Rentlist is an apartment finder app that I designed during my time at Designlab. This application allows users to search for apartments in specific or multiple areas, define criteria, and filter the results. I identified a task at the beginning and focused my designs around that task. Here you can see my process from the initial sketches to the final high-fidelity prototypes of the desktop and mobile application.
This task flow shows a path that user takes 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. Completing this task was the focus of the design of the whole project.
After some research and a brainstorming session, I chose Rentlist as the name of my application. During the initial sketches, I came up with the idea of combining the letters R and L with an abstract shape of an apartment to create a logomark. I also chose Lato, a modern sans serif type as the logotype to complement the geometric shapes of the logomark. The color palette that is applied below was developed later on in the project.
In order to have a consistent design system, I designed a custom set of icons that complement the logomark. They come in a single color and the same stroke.
I put together a style guide that shows the colors and typefaces my application will use, as well as how to apply them. It also includes samples of imagery, buttons, and icon. This guide acts as a way to explore how color and type choices will interact with one another, as well as create a ruleset to follow for designing the application.
To design the wireframes I defined the content, structure, and layout of all the core screens in my application’s primary user path. You can read additional information on the right side of each screen below.
High-Fidelitiy Desktop Mockups
Based on the refined wireframes, I designed hi-fi mockups using Figma. Below you can see the five main pages that are based on the initial task flow.
1. Landing Page
2. Login Page
3. Search Result Page
4. Apartment Page
5. Contact Page
High-Fidelitiy Mobile Mockups
I incorporated the responsive design into my work and created a mobile version of the desktop mockups with adjusting the layouts, content, and design elements.
With the prototypes below, you can experience firsthand how the apartment renting task could be completed using Rentlist applications for mobile and ipad.