Carolyn Swanhall
Learning Experience Designer

dwll.ng

Home Screen

Home Screen

Concept

Design an app that allows users to search for rental properties within a specific area, filter by specific requirements, and communicate directly with listing agents to secure their dream rental

Scope

This project was completed as part of the 4-week UI Design Certificate course offered by Designlab, from designing an initial concept, thru the creation of user task flows, wireframes and high-fidelity prototypes. 

Discovery
Setting up Notifications in Hopper

Setting up Notifications in Hopper

Competitive Analysis

Throughout the discovery phase, I conducted a competitive analysis of other rental and search apps to see how others within the industry had addressed similar features and functionality. 

Those I reviewed included: Zillow, AirBnB, HotPads, Hopper, and Hotel Tonight.

From this analysis, I identified common user flows, design patterns, and features related to the search and filter functions that would aid in the design of my app concept.

User 1 Task Flow

User 1 Task Flow

User Journey

The next step in the discovery phase was to create user task flows to map out the various functions and features that would exist within the application. I was provided with the following user paths:

  • User 1 wants to search for an apartment in a specific area, refine the results by a set of criteria, view the details about an apartment, and initiate contact with the owner.

  • User 2 wants to setup a series of notifications for new apartments that meet their criteria. They should be able to view any current notifications they have set, set up a new one, and delete or modify an existing notification.

I began by mapping out the task flow for User 1 in Flowmapp moving from the user's initial search results to initiating contact with the owner. I then created flows for the main search and backend settings functions of the app. 

Initial User Flow

Initial User Flow

Wireframes
Desktop Wireframes (Figma)

Desktop Wireframes (Figma)

Wireframes

At the beginning of my design process, I created wireframes of the desktop app in Figma to mirror the tasks and features within my user task flows.

Beginning with the initial landing page, I then designed the search results and filters that would help users narrow listings by their preferences, including:

  • number of bedrooms / bathrooms

  • price range

  • property type (apartment, condo, duplex, etc.)

  • move in date

  • desired amenities (laundry, parking, pets, etc.)

While I was working on the wireframes for the main search screens, I added additional options for users to customize the map with multiple view options and to update the search when the map was moved. 

I then played around with the design elements for the backend user experience, first creating a central dashboard and then separate tabs for the various notification and messaging options.

Mobile Wireframes (InVision)

Mobile Wireframes (InVision)

For mobile, I adapted components from my desktop wireframes, patterns from my competitive analysis, and iOS interface elements into an initial wireframe in InVision.

Within the mobile app, I included ways for users to customize how they would view listings (map / list view) and navigate between the account and filter options using centralized tabs and bars.

Search screens for both the mobile and desktop wireframes focused on large visual elements (listing images / maps) and designing an easy ways for users to filter, save, and reach out about specific listings.

Design System
Style Tile

Style Tile

Style Guide

Once I refined my wireframes, I started designing a style guide to inform the overall look and feel of the app.

Given that the app would help users find their next rental, I chose teal as the central brand color to capture a feeling of calm and to help users view their next home as a place of tranquility and growth. I kept the color palette minimal with a focus on tones of the brand color and neutrals.

For my typefaces, I paired two (2) sans serif fonts, Poppins and Open Sans, for their simplicity and readability, and developed a font hierarchy that would be flexible for mobile and desktop.

I also utilized Humaans by Pablo Stanley illustrations to add visual interest to the overall designs and illustrate to users how the app would help them achieve their goals.

Logo

Logo

Logo Design

When initially presented with this project, I brainstormed potential names for the app that would set the stage for the user experience I was hoping to achieve. I wanted the rental app to convey how the app would help users find their next rental with limited friction / stress. Words that came to mind early on were: home, habitat, dwell / dwelling, abode, etc.

I decided to move forward with "dwelling" and make the app distinctive from other similarly named companies by removing the vowels and using a period to symbolize the "i".

For the logo design, I wanted to keep the design minimal but evocative of the rental experience. After adding elements of the home (balconies, curtains, clotheslines, plants, windows, etc.) to the letterforms, I settled on transforming the "d" into an apartment building and adding windows and plants to align with the overall brand style thus far.

Icon set

Icon set

Icon Design

In addition to the logo, I also designed an icon set to be used throughout the mobile and desktop designs.

Each icon was designed using simple shapes and lines, and leaned on familiar iconography to aid in discoverability.

Iteration
Landing page

Landing page

High Fidelity Mockups

After finalizing my style guide, I began working on the higher fidelity versions of the app.

During this process, I added additional screens to account for the different paths of new and existing users, empty states for the new user account screens, and confirmation messages for when users save / create a listing or send a message.

Moving back and forth between the multiple iterations of the desktop and mobile designs, I focused on reusable components, such as cards and overlays, that would simplify the actual development.

I also gave additional thought to the app's microcopy to ensure the content was clear and concise, and made modifications to my icon set to provide further clarity to users.

Mobile prototype

Prototypes

After four (4) rounds of iteration for both the desktop and mobile designs, I created interactive prototypes in Figma to demonstrate the user flows for both new and existing users.

These prototypes highlighted the complexities within the app, especially in navigating between the search and account sections, in addition to the different states that would be viewed depending on the type of user.

Desktop prototype

Reflection

What I Learned

Overall, I had a great experience designing this app in that it gave me the opportunity to take an initial concept thru the design process, and to do so with the direct support and insight from my Designlab mentor.

The project became more complex in scope as time went on to provide additional features and expand the user flows (e.g. how listing agents would manage their properties within the app), but this expansion gave me more practice in being mindful of the various use and edge cases within my designs as I continued to iterate.

This project also helped me become more confident in my work as a designer, which I credit to my mentor's openness to questions and providing specific feedback on several of the choices I made during the iteration process. His sharing of several of his previous projects and design process, in addition to encouraging me to continually evaluate other apps / features, was a huge help during this project and as I continue to grow as a designer.