✧ Roomi in Web and App
Phoebe Yan
Overview
Roomi is a second project I worked on for the Google UX Certificate program, the previous project is called Room for Roommates, both serve as a platform to allow students to find rooms or apartments for their upcoming off-campus housing and a place to meet possible roommates.
Roomi is a one stop place for matching potential roommates with housing
Contribution
- Competitive Analysis, user Interviews
- Sitemap with information architecture
- Wireframing and prototyping using Adobe XD
Timeline
March 2022 - June 2022
The Problem
College students often struggle to find their first off-campus housing for the first time without the help of the school.
Let alone they need to pair themselves up with another roommate to lease an apartment together.
The Goal
- Ease the matching process with certification with neighboring schools
- Create a one-stop marketplace for students to find their next apartment, pair them with roommates who have similar living habits, and simplify the process of leasing by partnering with off-campus housing
Empathize with the User
To have a better understanding of the users, I conducted User Research and created a user persona, problem statements, and user journey map to help define who the user is.
User Research: Summary
I hypothesized undergraduate students who are looking for off-campus housing will emphasize pairing with roommates other than the price of the apartment.
Result: My assumptions are only partially correct
For First Time students, who are looking for an apartment emphasize much more on WHO they pair with as roommates as it affects their daily living habits and will be mostly sharing the common living area with.
Only 8% of students are concerned on the pricing of the housing.
User Research: Pain Points
- ⛅︎ Lack of Knowledge in Leasing Apartments
- Most undergraduates visit at least 3 different real-estate websites
- Not know if apartment legal information is up to date or applicable to the apartment they found online
- 💔 Lack of Trust in Finding Roommates Online
- Over 80% of students reported they did not know where to look for roommates and believe internet is not safe place to find a roommate that matches with their lifestyles
- 🌀 The Process is Troublesome
- About 68% of students hate how trouble and time-consuming it is to find a suitable apartment and then have to search for roommates who also share the same interest in the same housing.
Problem Statement
Marcus is an undergraduate student who needs to find his first off-campus housing by the end of September because he can no longer live in on-campus housing.
The Design
Sitemap
Since Roomi is a one-stop marketplace for finding housing and pairing with a potential roommate, I have to include different genres of housing matching different roommates' preferences.
Key parts in Roomi:
- Renting
- Listing a place
- Finding Roommates
- New in Renting Guidance
Paper Wireframing
I first started with Crazy 8s to come up with some key features or layouts of how Roomi could look like.
Eventually choosing some of the ideas over to a paper wireframe to test out layouts.
And finalize the ones that are the most feasible into one single layout.
Transforming into Digital Wireframes
The majority of users want a quick glimpse into what Roomi has to offer.
Therefore, I have moved cards above the fold so it is perfect for users to explore during the first glance into Roomi.
Features that I love :
Quick Navigation Menu
By default, there is a side navigation menu for the user to quickly understand there are different sections on this site that serves their needs.
Similar Cards are placed together
In the law of proximity, placing relevant or similar items together allowed users to quickly realize they were in the same category and allowed them to browse through without much explanation provided.
Screen Size Adaptations
Some of the users declared it was the first time they found an apartment on their own and were confused about where to begin.
A lot of them start by looking for housing through their mobile phones first, so having an adaptive design on screen sizes can increase the likelihood for users to use Roomi for their next housing or find their next roommates.
Usability Study
To discover any potential usability issues, I have undergone a moderated usability study:
📍 Location: US, remote 🙋♂️ Participants: 5 participants ⏱️ Length: 20 - 30 minutes
Findings + Refinement
Better Location of Reviews and Messages
Users are confused about where to find reviews and messages as they keep going back and forth to the home page.
After going through users' feedback on the "Roomi" term is confusing as it directs them to a message.
I have re-wired them to appropriate screens and added "messages" to avoid confusion between roomi and messaging.
Better Terminologies
Users are confused at the terms "Roomi" and "Circle" as they do not know what these terms refer to.
Before Usability Study
Discussion boards are named as it is but is confusing for users as there are another term "circle" for it. Most users expressed confusion and has to click around to discover it
After Refinement
Minimize confusion on "discussion board" to the same term in navigation menu as "circle"
High Fidelity Prototype
I have re-arranged the location for reviews and created a specific location for messages.
From the home page, the user is able to decide whether they are in need of a room or a roommate directly.
Accessibility Considerations
- Hierarchical Headings
- Different font and font sizes This helps screen readers and users to identify headers level as a visual clarity on the information.
- Luminosity Color Contrast
- Color Contrast 21:1 To keep a minimalistic look and the same aesthetic for users, I ensured this project's color contrast across different screens is 21:1 with awareness to visually impaired users.
- Dark Mode vs Light Mode
- Ensure Smooth Transition To ensure dark and light mode transition goes smoothly without complications, there are only 3 colors in the color palettes. Royal Blue is both the pop of color and the call to action button which is clearly visible in both dark and light mode.
Takeaways
Impact:
All the participants loved the placement of each section and the color combinations. They said if this is an actual product they would be regular user, especially during the summer season when they have to look for housing and roommates!
What I learned:
Adobe XD is a very useful tool especially when you are creating a mockup or a low-fidelity wireframe quickly with its quick scale feature. Its repeat grid feature saved me a lot of time and combined with its quickly adapted components, I was able to re-size components on different screens all at once.
Next Steps
- Adding a Search Bar and Filters Almost half of the participants find it natural to use the search bar as their preferred navigation. With the abundance of information both on the apartment and potential roommates, having a filter option allows users to quickly skim through according to their needs.
- Adding Depth and Shadows to show layers of different cards This helps users to understand which cards belong to the same group without cluttering the screen. It can also be used as a way to highlight previously saved apartments or potential roommates who have saved the same listing.
- Start on Owner's profile and analytics With the time limit on this project, I was not able to design in detail on the Owner's listings POV. I have only added the basics on owners' foundational analytics including applications they receive and reject or approve applications. I would suspect more should be placed into the analytics as well as editing the owner's profile and listings page.
