Knot

Improving Shared Living with Streamlined Communication for Roommates and Suitemates

My Role
Team
Time

UI/UX  Designer + researcher

Fiona Liu, Emily Lin, Natalie Zhu, Ivy Zhang

March 2023 - May 2023

1 Overview

Problem Statement

Young adults living with roommates and suitemates struggle with effective communication and management of shared space, often resulting in misunderstandings and tension. Our app addresses the issue by providing a communication platform that streamlines requests and task management between roommates / suitemates.

2 Research

User Research

We interviewed 10 people, currently living with roommates / suitemates.  We also sent out a Google Form survey, and summarized responses as as outlined below.

  • Key compatibility factors: living habits, social habits, chore habits, health habits
  • Challenges: lack of communication, difficulty setting boundaries, confronting issues
  • Desired app features: guest alerts, chore reminders, space share requests, schedule/exam sharing

User Persona

User Flow

Learning from the key insights, I sketched 3 versions of store editors and product editors, After conducting user research and analyzing user personas, I evaluated two potential information architecture structures for our app. The first structure emphasizes a list of tasks and requests (Main Page, Notification Page, Task Page, Schedule Page), while the second focuses on the functionality of adding tasks or requests (Dashboard, Actions, Profile.)

We chose to implement the first structure, as our app aims to streamline communication between roommates. The list/conversation format will provide users with a more efficient and accessible way to process all the information.

Storyboarding

Based on our preliminary sketches, we created a storyboard that featured both of our personas, Non-confrontational Nala and Busy Beatrix, but focused mainly on Nala’s motivations.

This storyboard helped us imagine the user flow while using our app, and what the most important features of our app might be.

3 Design Process

Brainstorm

Each of our group members created an initial sketch of pages in order to brainstorm all the different possibilities for our screens. Our sketch shared a lot of similarity, and after brainstorming together, we organized our sketches into the final sketch. (My sketch on the right)

Wireframe

I was responsible for the request page and its interactions. To distinguish it from the Task page, I designed the Request page with a more conversational style, resembling speech bubbles. This approach transforms impersonal requests into something akin to direct communication with one's roommate.

Style Guide

We developed a style guide to maintain a uniform aesthetic across various pages and enhance collaboration among team members.

High-Fidelity Mockups

I was responsible for the high-fidelity design and interaction of the request page. I devised the user flow for adding a request to the reminder and declining a task. Additionally, I designed the interaction for creating a new request initiated by the user.

4 Usability Testing & Iterations

We conducted usability testing with four participants, asking them to use the think-aloud method while testing various pages of the app and performing specific tasks related to receiving and sending tasks.

Key Insights from Usability Testing (Request Page):

  • Users are confused where request went after accepting / adding to reminder (sync in calendrer / profile page) [all users have this concern]
  • Consistent icon and button, the icon of add request should remain the same [2 in 4 users mention this concern]
  • Categorization for request [2 in 4 users mention this concern]

Final Design

Following our usability testing and design iteration, we finished our final high-fidelity prototype. We incorporated interaction animations and diligently ensured design consistency across all pages.

Dashboard

Loading Page
Update Status

Task Page

Check Tasks
View Task Log
Create Tasks

Request Page

Accept a request
Accept a request
Create a request

Schedule Page

Check Schedule
Request Update

Profile Page

Update Preferences

5 Next Steps