Beta Lab Housing App

I designed a mobile housing rental app for students at Queen’s University with Beta Lab that facilitates a positive housing rental experience by allowing users to narrow their search for a rental property to their unique preferences.

 

ROLE

Lead Mobile UI Designer

TIMELINE

February - April 2020

TOOLS USED

Figma

Problem

Every year students at Queen’s University struggle to find housing near the school. With so many different rental websites and property management companies, it can be difficult to navigate and students must balance the needs and priorities of each housemate while staying within their budget.

Solution

Build a simple-to-use housing rental app with students’ needs in mind, that allows them to easily find rentals and communicate with property managers.

IDEATION

Identifying target users

Before I began the project, I made sure I understood who the user was and how this would impact the design of the app.

Target user #1: ‘First Year Farrell’

Farrell is a first year university at Queen’s student who’s never rented a house before. She’s hoping to find a house with her friends that is within all of their budgets, but doesn’t know where to start looking. She needs to be able to show all of the potential options to her housemates so they can decide together.

Target user #2: ‘Graduate Graham''

Graham is a graduate student starting at Queen’s who has experience renting. He needs to find an apartment to rent or a room to sublet but does not have time to do a lot of research. He’ll be going on to campus everyday for his classes, and typically goes to the gym every other day. Living near campus is his top priority.

IDEATION

Initial sketches

My first step in the design process was mapping out every screen on the app before creating the first prototype to look at with the rest of the team. From there, I made edits and iterated until everyone was happy with the design.

betlab-prototype.png

IDEATION

Information Architecture

 
Group 1095 (3).png
 
 

DESIGN DECISIONS

Key product requirements

 

Easy and effective onboarding

From the get-go, the user is prompted to let us know some personal details about where they grocery shop, study, and work out. Not only does this help us narrow our search for rental properties that fit the needs of the user, but it also helps them to understand that this app is meant for students like themselves.

 

Feed-style home screen

The home screen allows users to quickly scroll through rentals from various property managers, all in one place. This is an easy and familiar interaction for the user, that allows them to view many properties quickly.

The filter feature allows the user to narrow their search to be extremely personalized. Fitting in many different filter types in a way that was intuitive was a challenge. I approached this problem by drawing on familiar interactions from similar applications, such as the use of toggles and draggable handles.

 
Group 1093 (1).png
Group 1088 (1).png
 
 
 

Viewing Properties

When a user clicks on a property to learn more, they have the ability to see its distance from their current location, message the property manager, see all the information about it, and save it for later. They can also “move in” which allows them to set up a viewing.

Group 1081.png
 

DESIGN DECISIONS

Style

Since the app’s purpose it to create an easy-to-use, stress-free rental experience, I decided to keep the style of the app as minimalistic as possible. Using blue as the primary colour, paired with soft grey tones, I intended to invoke a feeling of calm and simplicity. Similarly, I chose a neutral font that would not take away from the minimal design.

Final Design

(Excluding edge cases)

 

Reflection

In the design-thinking course I took last year, I learned that empathizing with the user is an important part of the ideation process as it allows you to design for their needs and abilities. Given a problem to solve and the freedom to design a solution, this project allowed me the opportunity to put this methodology into practice.

The biggest challenge I faced was having to make changes as the rest of the team got more information about the requirements of the project. Next time I would make sure to ask more questions to get more information from the project manager before starting.

KEY TAKEAWAY

Use empathetic design to build a solution that meets the user’s needs and accounts for any challenges they might face.

Previous
Previous

4U Academics Web App