Designing a roommate finder mobile application— A UX case study
Living with a roommate is an interesting experience. There are many questions that could come up before you meet your new roommate for the first time. What are they like? Am I going to get along with this person? Are they going to do their dishes? Will they do my dishes? (hopefully). Living with someone whether you know them or not, can sometimes be challenging.
Challenge
Design a mobile product experience that appeals to millennials. This needs to provide a convenient and quick way to find the ideal roommate. Design the experience from the perspective of a person who is looking for a roommate as well as a person who is looking for the apartment. Once the ideal roommate is found, what else can this product do to make the roommate experience better?
The Team
My Role
- User research
- User story mapping
- Sketching and Wireframing
- Low-Fidelity prototype using Invision
- High-Fidelity prototype using Invision
- User testing
- UI Design
My Process
Implementing a design process is crucial for any designer who wants to solve problems. Here below is the design process that I have learned and implemented into all of my projects.
Define
After receiving this challenge, I sat down with my partner and started talking about our first impressions and assumptions we had.
Some of those being:
- Everyone has had a roommate.
- Everyone has had a bad roommate experience.
- It’s not easy to find a roommate.
We then needed to define the pain points of finding and living with a roommate. I have some insight on what it’s like to live with a roommate, but I needed to see what our user base had to say. I then created a 10 question survey to get a better idea of where millennials stand on this subject.
View the full Roommate Survey.
The survey was helpful in challenging some of our assumptions and ideas. It recorded a lot of data on how people look for a roommate and what they look for in the “ideal” roommate. Yet it did not help me clearly identify the problem of finding and living with a roommate.
Empathy
I have lived with many different roommates in my life. However, it was especially important for me to make non-biased decisions about the process of finding and living with a roommate. I wanted to understand the experiences and pain points of others. I needed to speak with our user base to find out what their needs were. So I went to the University of Utah and interviewed students.
Speaking with students face to face was a great experience. It helped me understand the importance of speaking with my user base directly. It also increased the amount of empathy I had for our users. I was able to identify some of their pain points of finding and living with a roommate.
Some of those being:
Caitlin
Compatibility, finding a person that is compatible with me and my interests.
Madison
Differing schedules is huge for me because I have had roommates that would get up really early to go running, when I didn’t have class until 10, so that was hard for me.
Bennett (1st time having a roommate)
I was nervous about being with someone that I didn’t get along with. That‘s why I spent so much time trying to find someone with similar interests.
Competitive Analysis
During our research process, we began a competitive analysis on our competitors. Roomates.com being one of them. Some of the key issues we were able identify from this research were:
- It is an outdated and bad design.
- There were far too many steps to start browsing for potential roommates.
- Each page had a large amount of required information to fill out.
- It was difficult to understand where you were in the on-boarding process.
Persona
Creating our personas was key. It provided a “face” which gave a sense of purpose to the project. It also gave us a shared understanding of our users and their needs. At the beginning of our project, our goal was to only have one persona, but we found that we had two main users:
Renter
Tenant
User Story Map
While user story mapping, we referred back to our research to accurately define our MVP (Minimum Viable Product). Our research helped us identify and map out the most important features that were addressing our users’ needs. Identifying our MVP got me excited about the potential of our application and some of the features our users would encounter.
Some of those features being:
- Roommate preference page, which gives them the opportunity to narrow their search.
- An anonymous rating system to leave reviews.
- Including a chat feature to communicate with a potential roommate.
Ideate
Once we had our user story map created, it was time to start sketching. We started to sketch out some of our features. We recognized that we were spending too much time sketching out features and had not sketched enough for our on-boarding user flow. With time constraints in mind, we decided to move onto our wireframing to create these screens, knowing we had a lot of catching up to do.
Prototype and Validate
Wireframing is where we started to realize how data heavy our application is. Because we rushed through our sketching, we took our time in wireframing and prototyping. We wanted to get all our screens wireframed to test and refine as much as possible.
Key flaws in our initial design:
1. A confusing and unclear message.
2. The slider lacked personality and creativity, which caused the users to scroll right past.
3. User felt they were labeling themselves.
4. User felt this was too “black and white” left too much room for assumption.
5. User did not feel they needed to divulge this information.
See detailed explanation below:
1. What do you need
This screen was difficult for almost everyone we tested. The message was unclear both on the screen and in scenarios given. I felt like there was a clear scenario given. Yet, users would consistently select the wrong option.
See other iterations below:
The drag and drop design was a creative way of approaching this, but it proved to be confusing for our users.We wanted to be as clear as possible both in our design and scenarios given. There was an improvement of comprehension with the iteration on the right, which we ended up including in our final design. Don’t get me wrong, this design still needs work and is not perfect in any way, but we improved the comprehension overall.
2. Night Owl and Early Bird
This feature required an enormous amount of patience, but it paid off in the end. Based on research, the majority of people wanted to know when their roommate would go to sleep, and when they would wake up. So we created these iterations:
Being a sliding percentage bar, this feature lacked personality and creativity, which caused the users to scroll right past.
These proved to be more frustrating than anything else for the user. One of our biggest mistakes was overthinking and trying to be too clever. The result was a cluttered, ugly, and complicated design. We needed to take a step back and rethink.
There is always a light at the end of the tunnel
We ended up with the design below. There are a lot of form fields to complete in our application, so the last thing we wanted to do was create a chore for my users. We wanted to create a joy of use for our users. This design has tested positively with users. It gives them a chance to add character and individuality to their profile.
Three, Four and Five
The personality and culture subjects were a struggle throughout this design. Users tended to see these topics as too “black and white”. There was too much room for assumption when it came to personality and culture. We decided to leave this out of the final design and keep the option for them to create a tag for this content. They can also use their bio to explain this content. I truly feel we would have done better here if we had time for more iterations and user testing.
High Fidelity Design
We did not want this application to have the look and feel of a dating app. We wanted it to look credible and trustworthy to help the user feel confident in finding a future roommate. We used earth tone colors and soft gradients to portray this through our design.
Solutions
We would have never designed this application without user-feedback. Whenever my partner and I would create a new iteration of a page or feature, we would go out and show our user base for feedback. We made a lot of mistakes. We still have mistakes that would have turned out better in our high fidelity design, but this is the UX process and I love it.
Here’s what we did right:
- Reduced the amount of information a user needs to complete, which reduces the time it takes to connect with a potential roommate.
- We relied on visual hierarchy to help the user move quickly through the application and digest the information they need.
- Created a chat feature, enabling the user to quickly connect with a potential roommate.
- Implemented creativity and character into the design of the application to help the user feel a sense of individuality.
Conclusion
During this case study, I wanted to show you my thinking process. There is nothing more satisfying than finding the key to a user-centered design. The process in which you get there can be tough, but it’s worth it in the end.
Things I learned
- I learned that the UX process requires you to have patience and confidence that the process works.
- I learned to not treat my design as “my baby”. I spent a lot of time and effort on each iteration. I had two choices whenever I would get something wrong. I could give up and be angry at my users for not understanding. Or, I could get back into my design and iterate, iterate, iterate.
- Justify everything that I put on a page. Am I putting this feature or this color on the page for myself? Or am I including it because it alines with my users’ needs and goals.
