Roommate-finder App
Roomr is a mobile app designed to match users looking for a roommate based on their personal attributes and qualities desired in a roommate. Users can easily communicate their housing needs through roommate or room listings and contact each other while maintaining their privacy.
Tools Used
Miro
Figma​
Time Frame
10 weeks
Sept–Dec 2024
My Roles
UI design
user feedback
research
prototyping
Problem
Expensive housing leads to many people needing to live with others, but it can be difficult to find a roommate online and to ensure that the two will be a good match
Solution
Create a mobile app that allows users to easily and safely connect with potential roommates who are compatible with them.
Process
Competitive Analysis
1
Brainstorm
2
3
Concept Sketches
4
Low-Fidelity Prototype
8
7
6
5
DesiGn Iterations
Usability TestinG Round 2
HiGh-Fidelity Prototype
Usability TestinG Round 1
Competitive Analysis
To gain a comprehensive understanding of the current market, I conducted exploratory research of three mobile apps that connect potential roommates.
Clear Navigation
Strong Brand Identity
Aesthetically Pleasing
Full Privacy/
Safety
Roomie
SpareRoom
Roomster
Brainstorm
Using a Miro board, I brainstormed elements needed for the mobile app based on the competitive analysis and users' needs.
Privacy/Safety
No last names on profiles
No specific addresses/locations
NaviGation/OrGanization
Bottom navigation menu
Menu pages: messaging, matches list, favorites, profile
App Features
Users asked questions about themselves and roommate preferences
AI algorithm matches users
Users have a profile & can also post roommate/
housing listings
Can filter match list by specific preferences
Concept Sketches
I the​n moved to the first stages of the visual design, sketching several ideas for the Listings page, the Message page, the Favorites page, and the Account page.
Low-fidelity Prototype
Choosing the sketch of each page that was most visually pleasing and user friendly, I created clickable low-fidelity wireframes in Figma.
Home feed where users view the roommates matched with them based on their answers in onboarding flow.
Users can favorite listings to save them to their Favorites page.
A roommate listing allows users to share qualities potential roommates would like to know without revealing sensitive information.
A bottom navigation bar was found through the competitive analysis to be the easiest way to navigate.
Users can easily message each other.
On their Account page, users can edit their profile, as well as view and edit their listings.
Usability Study Round 1
I conducted usability testing, asking participants to follow prompts using the think aloud method while navigating through the low-fidelity prototype.
Key FindinGs
1
NaviGation
Icons on bottom navigation bar need labels as they can be misinterpreted.
2
OrGanization
Separate roommate listings and housing listings on Favorites page for better organization.
3
MessaGes
Add an indication for unread messages of favorited roommates on Favorites page.
4
Personalizations
Offer further personalizations for roommate listings with info such as users' sleeping patterns and partying habits.
HiGh-fidelity Prototype
Using the feedback from the first round of usability testing, I created a high-fidelity prototype of the mobile app in Figma, iterating on my previous designs.
The competitive analysis reflected that aesthetically pleasing design choices with a strong brand identity were ideal. Therefore, I chose split complimentary colors to embed throughout the app and an easy-to-read sans serif font.
#115D49
#470A81
Avenir
abcdefghijklmnopqrstuvwxyz
0123456789
Labeled the pages in the navigation bar to make them more clear
More personalizations on roommate listings so users can get a better understanding of each other
Tagged unread messages on Favorites page, as well as on the user's profile page
Separated Roommate and Spaces listings for better organization
Usability Study Round 2
I conducted a second round of usability testing, again asking participants to follow prompts using the think aloud method. This time I had participants navigate through the high-fidelity prototype.
Key FindinGs
1
User Flow
Clarify the user flow on the Account page by making the editing function and the navigation between tabs clear.
2
Filters
Allow users to filter out roommates and rooms with more qualities, such as rooms that allow pets or smoking.
3
Room qualities
Add more specific details about available rooms, such as the type of neighborhood and whether it's a familial home.
DesiGn Iterations
Based on the feedback from the second round of usability studies, I made improvements to the high-fidelity prototype designs.
More obvious edit button and tabs at the top of Account page to avoid confusion
Changed the design of the user's listings to look more like buttons to encourage users to tap on them to edit
Added more qualities that users could filter in their home feed
Indicated which type of neighborhood each room is located in, along with whether it is a familial home
Finalized Prototype
Takeaways
Through my competitive analysis of existing products, I received significant insight into where my priorities should lie, what features would be helpful for users, and what the existing market is lacking.
After receiving feedback from participants during multiple rounds of usability studies, I was able to view the strengths and weaknesses of my designs through the eyes of potential users, guiding me to make improvements that led to the best version of Roomr.