prev / next

Magnets UI/UX
UX Research, low-fidelity wireframes, & High-fidelity prototypes (2018)

 Overview

Magnets is a household management app for busy roommates. It splits bills, sets up cleaning schedules, and makes life less frustrating.

 My Role

Market Research, UX Research, UI/UX Design

Magnets for Roommates

Outlook —

Problem/Opportunity Statement

Living with roommates can mean lasting friendships and great memories, or it can mean resentment and frustration as a result of miscommunication and differing expectations. Particularly for adult roommates who may live very separate lives, it’s difficult to find the time to coordinate and set ground rules. For close friends, a roommate agreement might feel stuffy or overformal. But without a system to manage the house, small annoyances can grow into tension that strains relationships.

Software on the market for household management targets a nuclear-family target demographic, which emphasizes cohesion and allows users to “assign” responsibilities to one another. While effective for families consisting of parents and children, this structure isn’t ideal for adult roommates because there are no authority figures in the household. There is an opportunity here to design a solution for household management which organizes the many moving parts of a household without making roommates feel belittled or that the system is too overbearing.

Problem Breakdown

  • Roommates need a place so that everyone is “on the same page” about chores, bills, shared schedules, and pet care.
  • Many people create half-hearted chore charts, which often go ignored
  • Written roommate agreement documents feel overly strict; many roommates find it unnecessary

Project Goals

  • Improve collective understanding and completion of scheduled household responsibilities and shared bills
  • Ease resentments between roommates and reduce passive-aggressiveness
  • Informalize the components of a roommate agreement so that more people engage in shared expectations without the formality of a written document
  • Discovery

    Market Research

    Summary and findings: Existing apps on the market geared toward household management do so with families in mind. In this case, families are composed of adults and children; only adults establish expectation of responsibilities within the household. Within nuclear families, there is also not a need to split bills or costs evenly, so there is no functionality to keep track of expenses. Moreover, these apps further serve as productivity apps to keep track of events and activities happening outside of the home. This is because parents are concerned with the safety and location of their children, which would not be a concern for adult roommates. Many of the apps use a dashboard format so that users may access any number of tools/functions quickly and view all data at the same time.

    Surveys

    Summary and findings: 45 participants were anonymously surveyed. Most fell in the 18-25 year old range, with the assumption that most are university students. Notably, there is a considerable difference in roommate’s ideal living cleanliness (rated on scale from 1 [laid-back] to 5 [very clean]) and their actual living situation. Moreover, almost 70% of survey participants reported not having a formal roommate agreement—Probably because people shy away from regimenting their household too much. How can this project make scheduling feel more natural?

    Select quotes from survey responses:

    • “When they eat my food without asking. It’s not hard to ask, and usually I would say yes, but its just annoying when they can’t take the time to simply ask. It feels like an invasion of my stuff."
    • “Everyone washes up but doesn’t want to put back in the cupboard.”
    • “Not doing chores, leaving kitchen and bathroom gross.”
    • “Bullying/being mean because it’s hurtful and hard to live with a person after that.”
    • “Not waking up / turning an alarm off in time or being loud and disturbing while the other person is trying to sleep. Even opening the blind while someone is trying to sleep. It’s rude and inconsiderate.”
    • “Expecting one person to be the “adult” or at least person in charge of the house, rather than sharing responsibility.”

    Analysis of Existing Solutions

    Summary and findings: There are a number of productivity-related products that may be applied to managing households, but they are spread out on a variety of platforms. Namely: Google Docs/Sheets, Venmo, and Paypal. Because they are not explicitly designed for household management, roommates have to design their own systems within the platforms and sometimes find work-arounds for organization.

    User Personas

    Persona A
    Values & Needs

    • Values following structure and believes that every roommate should complete their responsibilities on time
    • Believes that everything should be divided equally
    • Needs actionable plans in order to resolve conflict

    Quotes (from survey): What is your biggest roommate pet peeve

    • “Keeping the kitchen clean, I like a tidy space to keep an organized system and ease my mind. When it’s a mess I feel like a mess and it aggravates me cause I have to clean it instead of directly make food.”
    • “When they don’t take out the trash for an entire semester so I have to take it out myself.”

    Tendencies

    • Often, this person feels like they have to be the “adult” in the house although it should be a shared responsibility. They will often complete tasks that they feel others have neglected and then feel resentful about it.

    Persona B
    Values & Needs

    • Values relaxed attitudes and sociable relationships
    • Doesn’t sweat the small stuff
    • Dislikes being badgered by roomates; needs to feel independent of other people’s control

    Quotes (from survey): What is your biggest roommate pet peeve

    • “Blaming another roommate for something they didn’t do.”
    • “Bullying/being mean because it's hurtful and hard to live with a person after that.”
    • “When they nag.”

    Tendencies

    • Often, this person feels crowded out of their own home if another roommate repeatedly brings up scheduled chores/responsibilities. They might distance themselves because they don’t want to be nagged.

    Information Architecture

    The goals of this project are to convey important information quickly and easily in a way that feels well-integrated into daily life—users should not have to go out of their way to pull up a resource in the app. Therefore, I decided to structure the app around a one-page, minimal scrolling dashboard display. From the dashboard, stem two primary functions of the app and two secondary functions. PRIMARY: bill payment organization & chores/shared calendars. SECONDARY: consolidated shopping list & file/document locker.

    Storyboards

    Low-Fidelity Prototype

    From the storyboards, I created a wireframe and basic prototype in Sketch to be used in the first rounds of user testing interviews. I used symbols from a wireframing toolkit and components from the Material io kit. At this stage, I began conceptualizing the branding and name of the app. I thought about fridge magnets and their playful, roundabout way of delivering messages to housemates. Keeping this idea in mind, I envisioned a range of drag-and-drop functionality to the app, though these functions are not yet realized in this prototype.

    Validation

    User Testing Interviews — Round 1

    Summary and Findings: I interviewed five people about their current roommate situation, their major pain points, and attempted solutions. I then asked them to give feedback while walking through the wireframe. The five participants all fell in my target demographic of 18-25 year old young adults. They ranged from sharing their living space with one person (their significant other) to four other people (with whom they considered acquaintances and friends).

    Selected Insights:

    • It is extremely difficult to find/establish a system that people will follow. One participant explained that his household attempted to create a static chore chart (each person is responsible for one chore consistently week-to-week). They posted it on the fridge and it went ignored. The participant attributed this failure to not having a system of reinforcement, and because people are forgetful.
    • The amount of attention to household maintenance is generally correlated with how much time each person spends at home/shared spaces. Those who spend relatively little time at home feel that they shouldn’t have to clean spaces that they don’t use.
    • Venmo is universally used as a way to split bills.
    • One participant expressed that while it is okay for roommates to store items in shared spaces, they feel like there should be a regular “reset” when everyone must collect their belongings. They experience a situation where they feel roommates are monopolizing shared space and pushing her out of living room/dining room as a result.

    Convergent Feedback on the Prototype:

    • The drag and drop is confusing. The area where the items should be dropped to is not clear enough. How are users supposed to know what elements are meant to be dragged/dropped and which elements are meant to be clicked/tapped?
    • The bills section is confusing; There is an expectation that when the bill section is opened, that you will see what all the household bills in a sort of list. Currently, the multi-functionality of the main page makes navigation difficult.
    • Using Venmo keywords feel too formal. People are not disciplined and put random words and emojis on payments for bills. Therefore, this functionality would go unused and/or be inaccurate.
    • An idea for the calendar—to be able to schedule when you’re going to be out of town or when you need a proverbial “sock on the door”.
    • Consider what to do when roommates decide to split groceries (food items, not just household/cleaning items).

    Iteration

    New Pain Points and Solutions

    From the user test interviews, I concluded that the core functionalities (bill and calendar/schedule management) were not represented clearly enough on the dashboard. I had originally envisioned the top menu to be used only to generate new widgets; each schedule or function would then be managed via the widget. I made this decision with the reasoning that widgets would be easy to reference and readily accessed in one place. However, users universally expressed an expectation for the core functionalities to be more individualized branches within the app, with their own sub-dashboards. With this in mind I, revised the project’s information architecture and wireframe.

    Updated Information Architecture

    Updated Wireframes

    High-Fidelity Design

    Logo and Branding

    Based on the app name “Magnets”, I developed a visual language for the project which encompassed its goal of being an easy-to-use productivity and communication tool. I considered a range of color palettes, experimenting with themes that felt trendy, playful, and sleek. Eventually, I settled on the most muted color palette in order to inject playfulness into the UI components, like buttons and draggables. The visual identity relies on two typeface families: Benton Sans Compressed and Odile, to complete its simultaneously spirited and professional look.

    UI Component Design

    Having decided upon the general direction of the visual identity, I designed the recurring UI components in order to develop a uniform and easy-to-understand user experience. There are two main categories of user input interactions in the app wireframes that needed to be differentiated to avoid user confusion: drag+drop elements and tappable elements. Based on the name “Magnets” and the concept of drag and drop magnets, all drag+drop elements in the app are typeset in Odile Bold with a 1pt black stroke around the bounding box and a hard drop-shadow that hints at dimension, like a flat fridge magnet. These “magnets” are set on a 50% opacity square grid. Tappable elements are typeset in Benton Sans Compressed Medium with a dual-toned bounding box.

    Screen Design & InVision Prototype

    These design decision were then carried out across the screens as prescribed by the low-fidelity wireframes.

    Prototype Video