Design Process

After defining the problem, we brainstormed many possible solutions based on user needs. We decided to build a mobile application, which fulfilled all user requirements, and then conducted the cognitive walkthrough and usability testings with paper and digital prototypes, by which we improved the interaction quality and user experience. After confirming the interaction, I designed the color theme, branding, and the final product.

the design process from define, to ideate, prototype, test, and design colors and branding
The design process

User Research

Interview

Our team interviewed six participants (I had two), who had the experience of searching for roommates online. The interview questions included:

  1. What was the motivation of living with roommates?
  2. How and where did you find roommates?
  3. How did you make sure this is the person you want to live with?
  4. Did your roommates match what you expected?
  5. What was the experience of looking for roommates?

User Journey

Based on the data collected from interviews, I found that users’ needs shared some patterns. One of my interviewee said 'I wanted to live with my friends or friends' friends, which made me feel safe. But chances were I couldn't find anyone by social media.' According to the consistent user patterns, I built a user journey (below) that mapped out a person's experience of finding roommates, including the activities they did and the pain points they had.

a user journey of searching for roommates
A user journey map

User Requirements

We listed four user requirements, which we categorized from interviews:

  1. Location: users chose the living place according to the distance and time to their work or school.
  2. Safety: the identification confirmation of candidates made users feel more safe when considering candidates whom users don’t know.
  3. Behavior: roommates share space, where they have the same values of maintaining the shared space and feeling comfortable with each other’s behaviors.
  4. Communication: to avoid passive-aggressive behavior among roommates.

Design Direction

Our team were thinking about the media we would design, while taking user requirements into account. Among several options, we decided to design a mobile application for two reasons:

  1. Equipment advantage: for the safety concern in the process of looking for roommates, this application required users to upload digital copies of their identification. By using a camera embedded in a mobile device, which most students and young professionals have, it provided an easy way to complete the verification process.
  2. No time and place limitation: in order to have conversations or negotiate with potential candidates, a mobile application allows users to start and continue conversations anytime anywhere.

Transfer a complicated process into a delightful experience

After verifying the user's identity, we wanted to make this roommate matching a playful, delightful experience. I presented ideas by drawing storyboards. Two of the ideas were: a question-and-answer game (below left) and a personality test (below right). After discussing among our team and asking our friends, who had the experience of finding roommates, we moved forward with the idea of taking the personality test as an optional step, since 3 out of 4 participants gave us positive feedback and were interested in knowing what kind of personality they had and what kind of people were good fits of being their roommates.

two ideas to build a playful and delightful experience. a QA game and a personality test
Two ideas to build a playful, delightful experience

Cognitive Walkthrough and Usability Testing

Our team created paper prototypes with the features we designed, and removed any confusing parts after conducting the cognitive walkthrough. Using the cognitive walkthrough as the pilot test, we filled up gaps among screens where the transition is not intuitive. With the second version of the paper prototype (as seen below), we did usability testing with three participants. Two of them were students who had the experience of finding roommates, and one of them was a house owner who wanted to lease a room. We included two kinds of users (with or without the place), and it turned out that we got useful feedback. For example, the acceptable commute time depended on what transportation users were taking.

second version of the prototype
The paper prototype

Wireframe

Armed with the feedback from our usability tests, I built wireframes with the user flow (below) to make sure the interaction was effective and consistent. In order to avoid unnecessary actions, we dispersed several required/optional actions into different steps. For example, we asked users to register only if they want to talk to candidates rather than at the beginning of using this application.

two personas: one student who has lunchtime from 12 to 1 pm. one professor who wants to get food immediately
The wireframe

Branding

While thinking about the logo of this application, I wanted to present its ideals of communication and friendliness. I sketched out several ideas (as seen the sketches below) from the wordy style to figures, and kept using concepts of an alphabet M and a house image. Keeping logo simple but still maintaining the ideals of communication and friendliness was perfect for the symbol, so I chose the alphabet M and made it look like two persons sharing their hands. For the color theme, I chose the sky blue color which presented peaceful and wonderful weather shared among roommates.

the sketches of the logo and the color palette
The logo design

Final Screens

After finalizing the interaction and color theme, I built high-fidelity prototypes (as seen screens below) on Sketch and inVision. Then I adjusted the high-fidelity prototypes according to the feedback from three participants whom our team conducted the second-round usability testing with.

eight key screens of roommate matching application
Key screens

Reflection

My teammates and I worked remotely for the majority of the project (I was attending the CHI 2018 Conference in Canada). Despite this, our strong communication skills enabled us to work efficiently, and I also learned that I enjoyed the experience of working remotely. Thanks team!