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 decided 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 roomates requests and keep record 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 embeded the ID verification seamlessly into the settings.
1. The Emerging Needs of Home Renting and Roommates Searching.
A friend recently relocate to the bay area and she had a quite a long journey looking for new roommates. Statistics show that more and more people in 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 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
2. Analysing Competitor Services
After understanding 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
3. The Signup Flow - 2 decisions, 4 design options, and 5 testings
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
4. Paper Prototyping the Detailed flow, Structure, and Functions
Flow iteration 1.1 - user fill all the preferences within 2 steps
Flow iteration 1.2 - user fill all the room and roommates preferences 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 Onboarding Flow and Functions on Wireframe
Through the 2 iterations of paper prototyping and feedback gathering, the basic logic, the sign up flow and main structures of the App were established. I found it's time to move on to start building wireframes and interactive prototypes to have a more concrete realization of the ideas
The prototype illustrates the flows and what users can do before and after user sign up. To provide a great user experience, users have the opportunity to search and find what they want even before signing up. This in return provides motivations for users to sign up. It also maps the steps in user journey, addressed the safety issues by user ID and security verification after user sign up. The common pains found in roommates interaction are addressed by providing a private space for split bills and opinion sharing
Before signing up, users can set preferences to search for their next room and roommates, and the preference will be saved Check the full-size image
After user signs up, user can message the potential roommate. Once they become real roommate, they can use the functions in roommates section Check the full-size image
Then I build an interactive prototype using Sketch's latest prototype tool. All the effort was to make sure that users will get a holistic idea of the flow experience and key functions provided by the App.
Interactive prototype for testing
With the prototype I conducted 5 user testings with the participants I interviewed earlier. They were asked to look for an ideal room and roommate "Amy", ask her questions and then became roommates. The purpose was to test the flows and the functions within the structure. The users helped me find 2 key insights:
1. "Roommates" section is confusing.
2. Money transaction function in 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. Visuals, Styles and Further Improvements
Exploring Styles via Moodboards
As the flows and functions were refined through wireframe and testing, I started making mood boards to pick the visuals and styles of the App. I explored 4 different color themes that bring different feels.
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 main tone was set for this App, I started designing the icons, illustrations that are consistent with the established feel
Evolutions of icons
With the colors, illustrations style set, I designed the units in 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 triggered by seeing some of 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 next steps, I will first test the high-fidelity prototype with more potential users to improve its overall usability. 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 is any other activities or services that can foster a good roommate relationship, and can be added to the App. 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?