Find your next roommate, easy breezy

Challenges: I challenged myself to design an iOS app that helps millennials to find perfect room and roommates.

Time: 2 weeks, March 1st - March 14th 2018

Type Individual project

Methods: Participatory design, low-fi & hi-fi prototyping and testing, visual design.

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.

Process

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.

statistics of rent home

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

user journey
user journey
user journey
user journey
user journey

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.

good roommates

Qualities that define a good roommate

What are the pains?

Pains in the search process

Safety is the major issue
It is hard to know the life style of someone beforehand
A lot of unpredictable factors

Pains when keeping a good roommate relationship

Rely on the sense of obligation for payment
It is hard to track the record

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.

pain points
pain points
pain points
pain points

Competitive analysis amongst 4 service providers

Design Goal

match the flow
match the flow
match the flow

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:

decision: when to sign up

Design decision 1: Sign up first V.S. Sign up only when user need message a potential roommate;

decision: when to sign up

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.

sign up flow option 1

Option 2: User preference first. Registration only needed for further interaction.

sign up flow option 2

Option 3: Registration first, no customized results until user later filled out the preferences

sign up flow option 3

Option 4: results first, customized preference, registration

sign up flow option 4

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.

testing results

Option 2 got the most votes and I decided to go with it.

sign up flow option 2

Mapping user mood with design flow option 2

4. Paper Prototyping the Detailed flow, Structure, and Functions

Iteration 1: all at once

Flow iteration 1.1 - user fill all the preferences within 2 steps

Iteration 1: step by step

Flow iteration 1.2 - user fill all the room and roommates preferences step by step

Iteration 2: structure 1

Structure iteration 2.1 - Result List | Map | Favorite | Messages | Settings

Iteration 2: structure 2

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

wireframes: before user sign up

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

wireframes: after user sign up

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.

prototype gif

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".



roommate section before

Before: "invite a roommate"

roommate section after

After: "Add a roommate"

activities before

Before: Payment and Poll

activities after

After: Payment only

structure

Structures: before

structure

Structures: after

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.

style 1

1. Warmth, home, friendly, calm

style 2

2. Easy-going, fun, happy, breeze

style 3

3. Neutral, calm, easy-going

style 4

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

style 1

Evolutions of icons

interfaces

Illustrations

With the colors, illustrations style set, I designed the units in each interface so that they will be consistently reused across the app.

style 2

Atomic Design - Components

interface gif

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?

Thank you for reading

Thank you for reading

If you have any questions or want to collaborate, you are more than welcome to drop me an email.