RoomM8

A website with a customizable dashboard to manage household responsibilities and avoid roommate conflict, geared towards college students and young adults working from home.

Web prototype created for an Interaction Design course taken remotely in Fall 2020.

 
 
 
 

Discovery

 

Through a variety of exercises, including user personas, user task/goal charts, and interviews with target audience members, I identified the area I wanted to address. I chose the increased conflict of roommates during the pandemic due to most activities becoming remote.

Some notable pain points included:

  • Food prep is noisy while others are on a call or in class

  • Workouts more difficult because less space and noise disruption at early hours

  • Practicing instruments disturbs roommates who might be working/studying

  • Overall more overlapping at home, can get in each other’s way

I established that an important part of my site had to be a scheduling tool for roommates.

 

Target audience interview with my roommate at the time, Karisma, a part-time remote college student and remote employee.

 
 

Process

 

Lo-fi Wireframes

Initial wireframes for a top priority workflow: adding an event to a shared calendar.

 
 
 

Lo-fi digital wireframe for dashboard homescreen.

 
 

Prototype

 

Landing Page

The landing page has an automatic carousel exemplifying a variety of relatable situations RoomM8 addresses. The carousel of screens also immediately introduces the idea of variety and customizability.

 
 

Create Account

 
 

Homescreen (Dashboard)

 

Each roommate chooses a color to represent themselves on their household’s account. This color is used for anything tied to their schedule — calendar events they create, and alarms that pertain to those events. This system helps users recognize immediately upon seeing their dashboard which roommate has needs that must be accommodated.

 

Calendar Widget

 
 

Mobile Prototype

Due to the nature of this website as a dashboard, the mobile version has limited functionality. However, it has several responsive workflows that enable users to view the most important scheduling information they would need if they’re on the go.

To see the prototype demonstration, click here!

 
 
 

Branding

 

Typography

Apertura is clean, approachable, and versatile. Apertura Condensed is legible and clean for smaller body text and widget details.

 
 

Logo

 

The logomark is a simple house, whose lines mimics the line quality of RoomM8’s typeface, Apertura. The type in the logomark also has rounded corners to feel softer and friendlier.

 
 

Color

 
 

Each user chooses a distinct bright color to represent themself in their household’s account. These are also used as webpage backgrounds.

 
 

Illustration

Illustrations contribute to the inviting nature of the site so that RoomM8 doesn’t seem like a stoic platform intended only for households that already have conflict; it should feel like a welcoming, helpful tool for communication in any household.