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
I completed this project 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.
During the discovery phase, I conducted a competitive analysis of other rental and search apps to examine their 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.
The next step 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 set up 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 mapped out the task flow for User 1 in Flowmapp moving from the user's initial search results to initiating contact with the owner, and then created flows for the main search and back end account functions of the app.
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
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 view and to update the search when the map was moved.
I then played around with the design elements for the account options, first creating a central dashboard and then separate tabs for the various notification and messaging features.
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.
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.
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 home 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.
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.
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.
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.
What I Learned
Overall, I had a great experience designing this app in that it gave me the opportunity to move thru the full design process based on an initial concept, 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 UI designer.