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

Process

Design Process

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.

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 the 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

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.

pain points
pain points
pain points
pain points

Competitive analysis amongst 4 service providers

2. Setting design goals

match the flow
match the flow
match the flow

Design Scope

The problem area actually involves three different use cases as listed below.

match the flow

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

match the flow

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:

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

Detailed flow

Detailed User Flow

Detailed User Flow for the First Use Case

App Structure on Paper

Based on the detailed user flow, I drafted screens of each step

Iteration 1: all at once

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

Iteration 1: step by step

Flow iteration 1.2 - users fill all the room preferences and lifestyle 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 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 prototype 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.

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 split bills Check the full-size image

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.

prototype gif

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



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

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 theme was set for this App, I designed the icons, illustrations that were consistent with it.

style 1

Evolutions of icons

interfaces

Illustrations

Then I designed the components of 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 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?

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.