List | Customized Results
With user's preferences in mind, the list screen shows all matching results of roommates and rooms, presented in a card form.
Messages | Sufficient Communication Beforehand
Provide a private space for potential roommate candidates to communicate so that they can better decide when and who to meet in person.
Room Hub | Enhance the roommates interaction
Once users became roommates and moved in, they can add roommates, receive roommate requests and keep records of money transfers.
Settings | Preferences and ID verifications
For users who haven't registered yet, we save their preferences for a better user experience. And for registered users, we embedded the ID verification seamlessly into the settings.
1.Researching users' needs
The Emerging Needs of Home Renting and Roommates Searching.
A friend recently relocated to the bay area and she had a quite a long journey looking for new roommates. Statistics show that more and more people in the U.S. are renting their homes. But the experience was not always nice. So I challenged myself to design a better mobile experience for my peers to look for new rooms and roommates.
I conducted 5 in-depth semi-structured interviews to understand participants’ past experience looking for a roommate and room.
Participants: average age: 28 yrs, 3 males, 2 females
The journey of looking for and keep good roommates can be summarized into 5 steps
5 steps of a user journey
What does a good roommate mean
To most participants, they are happy with a roommate who is respectful of others and the public space. He/she doesn’t have to share the same interests or support each other as friends.
Qualities that define a good roommate
What are the pains?
Pains in the search process
Pains when keeping a good roommate relationship
Analyzing Competitor Services
After understanding the user’s needs and pain points. I researched what competitors are providing, what I can learn from them and what could be done better.
Competitive analysis amongst 4 service providers
2. Setting design goals
The problem area actually involves three different use cases as listed below.
1. A user looking for both a room and a roommate
2. A user looking for a roommate, she has found a room.
3. A homeowner looking for roommates or tenants
For time constraint, I designed for the first use case first.
3. Ideating features
4. Designing flows and Structures
Sign Up Flow
The 4 design options for the onboarding and sign up flow are results of the combination of 2 design decisions:
Design decision 1: Sign up first V.S. Sign up only when user need message a potential roommate;
Design decision 2: User input first for more accurate results V.S. No input and show general results first;
Option 1: User registration and preference input first.
Option 2: User preference first. Registration only needed for further interaction.
Option 3: Registration first, no customized results until user later filled out the preferences
Option 4: results first, customized preference, registration
To decide which flow to choose, I did 5 quick user testings, going through the flow with 5 users and then ask them about their preferences.
Results: 3 participants preferred telling the app some preferences beforehand if the results listing is more relevant; 1 participant said he has no strong opinion if he is in urgent need for a room and roommate; 1 participant has an equal preference between option 2 and 4.
Option 2 got the most votes and I decided to go with it.
Mapping user mood with design flow option 2
Detailed User Flow for the First Use Case
App Structure on Paper
Based on the detailed user flow, I drafted screens of each step
Flow iteration 1.1 - users fill all the preferences within 2 steps
Flow iteration 1.2 - users fill all the room preferences and lifestyle step by step
Structure iteration 2.1 - Result List | Map | Favorite | Messages | Settings
Map the structure with user journey - Result List (Map view, favorites) | Messages | Roommates | Settings
5.Validating the Flows on Wireframe
After 2 iterations of paper prototyping and feedback gathering, the basic logic, I established the signup flow and main structures of the App. Then I used wireframes and interactive prototypes to have a more concrete representation of the ideas.
The wireframe below illustrates what users can do before and after user sign up. They have the opportunity to search and find what they want even before signing up. This in return provides motivations for users to sign up. After signing up, a user can send messages to potential roommates, add roommates and share bills. The App addressed the safety issues by verifying user ID after user-registration.
Then I built an interactive prototype using Sketch's latest prototype tool. The effort was to make sure that users will get a holistic experience of the flow and key functions of the App.
Interactive prototype for testing
With the prototype I conducted user testings with the 5 participants I interviewed earlier. They were asked to look for an ideal room and roommate "Amy", ask her questions and then became roommates. From the testings I find 2 key insights:
1. "Roommates" section is confusing.
2. Money transaction function in the roommate section is useful while "set up a poll" function is not.
The confusion in "Roommates" section may be caused by three reasons:
• The name "roommates" can't explain itself well;
• The action button "Invite a roommate" is misleading;
• "Roommates" section is intended to be used after users have met, and signed the contract offline and become real roommates, there is a gap of the offline experience in the App.
Therefore, I plan to make the following changes before moving to hi-fi prototypes:
• Change "Roommates" section into "Room Hub".
• Replace "Invite a roommate" with "Add a roommate".
Before: "invite a roommate"
After: "Add a roommate"
Before: Payment and Poll
After: Payment only
6. Defining Visuals and Styles
Exploring Styles via Moodboards
After the flows and functions were refined through wireframe and testing, I made mood boards to explore the visuals and styles of the App. I explored 4 different color themes that represent different themes.
1. Warmth, home, friendly, calm
2. Easy-going, fun, happy, breeze
3. Neutral, calm, easy-going
4. Efficient, professional, friendly, calm, trustworthy
Style 4 was chosen for it's professional, slick and simple design feel. It's neutral yet let people trust it to get the job done.
Icons, illustrations, and atomic design
As the theme was set for this App, I designed the icons, illustrations that were consistent with it.
Evolutions of icons
Then I designed the components of each interface so that they will be consistently reused across the App.
Atomic Design - Components
Hi-fi interactive prototype
Summaries and Next Steps
This is a personal project started by me seeing my friends suffering from finding roommates and room. And I challenged myself to practice lean UX within a limited time range (two weeks) with a user-centered approach. As a person who always does a ton of research for validation before start designing, it's fun to push myself on purpose to craft and design with limited user research information. The hardest part was to make the most logical and valid design decisions with limited user input.
For the next steps, I will first test the high-fidelity prototype with more potential users. From the previous user research, I learned that the most frequent activity among roommates is money transfer. Digging deeper, I want to figure out if there are any other activities that can foster a good roommate relationship. Lastly, seeing the whole user journey, the experience of roommates meet in person and sign the contract was not part of the App. That causes confusion. My current solution focused on using illustrations and wordings to make the flow clear to the users. Thinking out of the box, is there any possibilities to incorporate this offline experience into the App to make a seamless experience? Or separate the room hub section to be another App?