Simplifying Shared Living Situations
UI/UX Design + Visual Design
Introduction

This in-depth case study explores how college students interact with their roommates and attempts to create a product that alleviates the problems associated with their living situations. Through this design case study, I wanted to apply what I’ve learned from my summer internship at Cash App; most notably: creating a design workflow that allows for clear communication and efficient critique, the importance of story telling in interaction design, and working with design system components within Figma.

Logistics
  • Project Duration: 1 Month - November 2019
  • UI/UX Design + Visual Design
  • Team: One Member -- But lotsa friendly collaborators :')
  • Role: Primary UI Designer and User Researcher
  • Tools: Adobe Illustrator, Figma, Principle
Background

Living with roommates can be difficult; especially in many college apartment scenarios. From horror stories of the roommate who does the unthinkable to adjusting to your friends’ living habits, being in a shared living situation can be difficult. After hearing my friends complain about their roommates and say “there’s just no way to make it better”, I decided to put on my (design) thinking hat and attempt to solve this problem. Although this design project is just a personal project, I wanted to apply some new design learnings and approach it as a real project that I would plan to ship.

Problem Statement

To start the project, I prompted myself with the following question:

What are the problems surrounding housemates within shared living situations? How might we alleviate these problems and foster a healthier living space / community?

The Solution

After conducting research and exploring different ideas, I deduced that the best solution to the aforementioned problem would be a product that facilitated effective communication between housemates. In this case, effective communication can be defined in different ways such as anonymous, indirect or passive; but the main goal is to provide a platform where housemates feel safe enough to communicate their thoughts. The designed product focuses on allowing housemates to effectively communicate within 3 main struggle areas: chore rotation, split payments and schedule management.

User Research + Insight Synthesis
Onsite Observations of Living Situations

The first step to understanding the issues college students were having in their shared living spaces was to visit said living spaces, observe the surroundings and conduct small informal interviews with some of the house mates. Here I was able to observe natural interactions and ask follow up questions about how people felt or approached these different scenarios.

Personas

After conducting my research, I formulated 2 personas that helped me visualize the people I am designing for. This was particularly helpful in mapping out their current solutions to their issues and seeing how they are still frustrated with them.

Primary Insights and Learnings

After laying out my observations, I mapped out the key insights that I gained from them and continued to map out possible user needs and corresponding possible product features. From my research i identified the key insights to be:

  1. The primary root of most of the issues are that there is a lack of overall healthy and effective communication between housemates.
  2. The aforementioned lack of communication results in a house chores either being neglected or done at a subpar level with no accountability from any housemates.
  3. Additionally, not communicating results in housemates being unwilling to purchase communal items out of fear of not being properly reimbursed
  4. Housemates want to address issues, but don’t want to bring it up unless they have the support of other housemates.
Identifying User Needs & Creating Solutions

After laying out my observations, I mapped out the key insights that I gained from them and continued to map out possible user needs and corresponding possible product features. From my research i identified the key insights to be:

Mid-Fi Mock-Ups
The Design Process

Dashboard Screens

Creating the dashboard for this product, I wanted to make sure it was able to provide users with a snapshot of whats going on within their apartment. In this initial design run through, I focused on creating the separate components that would be used to help users communicate with their housemates. Some issues that arose while designing were: []. Check out a more in-depth view of the design process in my Figma file!

Payments Screens

When designing the Payments feature for this product, I wanted to keep the ideas of accountability and transparency at the forefront. This feature was designed to help users hold their housemates accountable with split payments and allow payments to be more transparent. My biggest struggle with this feature was ideated the “payment receipt” screens and figuring out how to make them the most useful to users. Check out a more in-depth view of the design process in my Figma file!

Chores Screens

The Chores feature was designed to help users keep their housemates accountable for their chore work as well as provide a way for users to communicate their dismay at a poorly done chore without the need to be confrontational. The primary issue I ran into while designing this screen was deciding how users would mark their chores as complete and the edge cases surrounding that. Check out a more in-depth view of the design process in my Figma file!

Schedules Screens

When designing the Schedules feature, I was overly ambitious and imagined a feature that would act as a mini-calendar and could change your status based on if you had an event or not. Scaling down, I realized that a whole calendar feature wasn’t actually needed and what was more important was letting housemates know your “home/not home” status, and if you had any events that might change household habits. Check out a more in-depth view of the design process in my Figma file!

Hi-Fidelity Mock-Ups & Prototypes

With the flow and general layout of the product decided in the mid-fidelity mock-ups, all that was needed for the hi-fidelity mock ups was to implement the more polished components, [prototype], and review the product for any oversights.

Design System

While working on the mid-fi mock ups, I slowly developed a certain set of repeated components that I used as the basis for the design system. The goal of the design system was to create a sense of uniformity throughout the product as well as act as a form of documentation that highlights the logistics of the elements to be ready for handoff. I created an asset exploration Figma file where I messed around with element padding, margins and overall style. After a bit of exploring, I created the “official” style guide where I defined the padding, dimesions and touch radius of each element and turned them into components to be used in Figma.

Interaction Design

Interactions should convey meaning

After getting the initial mock ups completed, I wanted to put in additional effort to understand how the interactions will effect the user experience and how to convey the distinct action flows through interactions. For example, creating something in the app should always feel like a similar experience; likewise the experience of marking something as complete will feel the same throughout the app.

Looking at the mock-ups, there are three distinct actions that are identifiable. The three actions can be described as: create, confirm, and view. For a more in-depth look into the process of creating these interaction designs-- take a look at my Figma file!

Pay attention to the small detail in micro interactions

Dashboard

Payments

Chores

Schedules

Next Steps

After reaching the end of my 1 month time constraint, I was aware of many important aspects that my product was missing some of which were the following:

  • An onboarding flow
      <
  • Empty states
  • Notificaiton system
  • Edge cases: accounted for, but not solved

Seeking Out Better Search

Read the Digital Search Case Study