Project: Alcove
Role: UI designer (solo student project)
Tools: Sketch, InVision, Photoshop, Illustrator, InDesign, After Effects, WebAIM Color Contrast Checker
Overview: The real estate market can be a complicated world to navigate. Most people need a guide to help them find reliable and relevant information. Alcove is a responsive web app designed to help first-time home buyers in this process. With Alcove, buyers can find comprehensive information on all available properties in their area and efficiently make the jump from potential home buyer to home owner.
PROBLEMS
First-time home buyers need an app that:
Allows them to view listings on-the-go
Welcomes them into the world of real estate
Makes the property search process easy
Feels tailored to them
Provides detailed info on available homes
GOALS
Design a real estate web app that:
Functions well on mobile devices
Feels fun and inviting
Focuses on simplicity
Recommends listings to users
Emphasizes property visuals and specs
Low-Fidelity Wireframes
I started the design process by sketching low-fidelity wireframes of the app’s main screens. Taking a user-centered design approach, I focused my efforts on mapping out screens that would help my primary persona meet her goals. Since my persona needed to be able to research properties on-the-go, I implemented a mobile-first design strategy and concentrated on designing for the phone at the outset. My persona also wanted a personalized search experience, which led me to sketch screens where she could create a profile, filter searches, and bookmark listings. LEARN MORE
Mid-Fidelity Wireframes
Once I had a collection of low-fidelity sketches that I was happy with, I began translating my designs into mid-fidelity wireframes. At this stage, I did not concern myself with aesthetics and, instead, focused on structure and organization. I used a 12-column grid to help me align the elements on my screens in a balanced way and established visual hierarchy by varying the text weights and grayscale colors used in my designs. LEARN MORE
Mood Board
With the structure of my mobile screens intact, it was now time to establish my app’s visual style. I created a series of mood boards to help me in this process, ultimately settling on one I titled, “Playful Minimalism.” This design stood out to me because it did the best job of synthesizing the concepts from the project brief into a visual design direction. The brief emphasized creating a professional but inviting experience for first-time home buyers, and the “Playful Minimalism” board achieved that goal by incorporating fun details into a clean layout.
Accessible Color Palette
Using my mood board as a guide, I constructed a color palette for my web app. I selected blue as the base color because it is often associated with professionalism and might inspire first-time home buyers to trust the Alcove brand. When choosing the remaining colors for my app, I paid close attention to accessibility guidelines, making sure to build a palette that was WCAG AA compliant.
Final Mobile Mockups
After establishing a color palette, I incorporated images, icons, and typographic styles into my designs, building the final mobile mockups. I feel that these designs satisfy my primary persona’s desire for a simple and inviting way to view property listings. Each screen in the app features splashes of welcoming colors and fun visual details. Yet, these elements never get in the way of usability. The screens remain clear, uncluttered, and easy to navigate. My app also delivers on my primary persona’s request for a tailored, comprehensive property search experience. The app’s filter and sort features allow users to browse listings in a personalized way, and the detailed property info screens provide them with a complete picture of each available property. Thus, by keeping my primary persona’s needs in mind, I was able to build an app that meets my initial project goals. LEARN MORE
Responsive Designs
Having built a strong set of mobile mockups, it was now time to start designing for tablet and desktop breakpoints. As with my mobile screens, I started by creating paper sketches and then progressed to higher fidelity mockups. Taking a progressive enhancement approach, I made a larger number of property images visible in my desktop designs than in my mobile mockups. This is due to the fact that desktop computers have larger screens and fewer bandwidth limitations than mobile devices. LEARN MORE
Style Guide
As I designed the Alcove web app, I created a set of rules for how to use type, color, images, and UI elements across the site, which I later compiled into a brand style guide. Paying close attention to detail, I applied the rules in the style guide each time I designed a new screen, ensuring I was building a visually consistent app with a clearly defined voice. LEARN MORE
Animation
While designing the Alcove app, I noticed several instances where I felt animation could help make the experience more clear and user-friendly. For example, I wanted to place a spinning wheel in the center of the screen when the app was in the process of generating new search results, so as to let users know the app was working on their request. Rather than describe my animation ideas through complex notations, I decided to construct samples in After Effects to ensure my vision was easy to follow.
Remove Search Filter
Form Validation
Bookmark Listing
Learnings
Keeping my primary persona in mind throughout the design process helped me meet my project goals
Creating mood boards enabled me to establish a clear visual design direction for my app
Defining a detailed set of style guidelines to work from allowed me to design new screens for my app more quickly and helped me build a more consistent interface
Next Steps
Research techniques for establishing uniform vertical spacing throughout the app
Continue refining the app’s iconography until all elements look like they are part of the same style family
Perform usability tests to ensure the Alcove prototype is intuitive
