top of page

COLIFE APP

UX/UI Case Study | B2C Digital | 2020

Overview

Developed an interactive mobile app prototype aimed at reducing co-living challenges and improving shared corridor living. Analyzed UX and UI progress through iterative design.

Duration: 2 weeks
Tools: Sketch, Balsamiq, Miro, AI
Phases: Strategy - Outline of Scope - Sitemap - Wireframes - Visual Mockups
Role: UX & UI Designer

Background

A “student corridor” is a traditional Swedish student housing setup where you have a private bedroom but share common areas like the kitchen and other facilities with 3-12 other tenants. The term comes from the layout, where bedrooms line a corridor with shared facilities located in the middle or at the ends. While sharing these spaces can be rewarding, it can also present challenges.

Challenges

Share Cleaning Duties:

Cleaning and maintaining the common areas is a shared responsibility among tenants, with tasks rotated weekly. Each tenant is responsible for basic cleaning and garbage removal for one week.

Communicate with Neighbors:

Regular corridor meetings, especially at the beginning of each semester, are essential for organizing cleaning schedules, setting corridor rules, and assigning duties.

Manage Corridor Fund:

Corridors often have a small fund to purchase kitchen and cleaning supplies. It’s important to make fund information more visible and reliable for all tenants and to establish clear management of the fund.

While having roommates brings numerous benefits, it also comes with challenges. Could we design a product to ease these challenges and enhance the experience of shared living?

UX Research

Primary Research: Surveys and Interviews

Having lived in a student corridor named Sparta for over a year, I aimed to understand user needs and behaviors related to corridor life. I conducted surveys with friends who had similar experiences and interviewed students, including one who had been a corridor administrator for over a year. My goal was to uncover their feelings about co-living, the challenges they faced, and the features they desired in a roommate app. The interviews highlighted core user needs, which I organized into an affinity map using post-its to identify recurring themes and issues.

Interview Recording

Affinity Mapping

Secondary Research: Competitive Analysis

In addition to primary research, I performed a competitive analysis of existing roommate apps. I used keyword research tools like AppTweak and Google Play to identify competitors and gain insights into their ASO strategies and customer feedback. To organize this information effectively, I created a competitive analysis matrix.

Through competitive analysis, I identified key features common in popular roommate apps, such as shared shopping lists, expense splitting, and chore management. Most apps focus on a single function, like money exchange, groceries, or task management, and often target parents and children rather than college roommates. Among these, "RoomMate" stands out as the most effective for roommates but lacks a calendar event feature, which is crucial for corridor living based on prior research.

User Needs

Based on previous user research, I identified the main sources of pain and user needs in corridor co-living:

Pains:

  • Cleanliness

  • Privacy

  • Communication


User Needs:

  • Chore checklist and schedule

  • Ability to divide chores with roommates

  • Notifications for chores, corridor meetings, and other events

  • Contact information for roommates

  • Chat room or post board

  • Public supplies checklist or to-buy list

  • Calendar for adding events

  • Weekly cleaning task scheduling (Admin)

  • Meeting organization (Admin)

User Segmentation

The app will focus on the following target audiences:

Roles (groups of people with similar goals):

  • Corridor administrator/ who establishes a home and assigns tasks to his/her roommates to maintain the corridor’s sharing space.

  • Corridormate/ who shares a load of responsibility evenly among roommates.

 

Demographics (gender, age, education, occupation, marital status, income, location)

  • Gender - Female and male students live in the same corridor.

  • Education - College Education or higher

  • Occupations - Students

  • Income - Limited budget

  • Age - 18-30-year-olds

  • Location - Student cities, Lund (can be other cities or countries with shared households)

 

Psychographics (personality, values, attitudes, interests, lifestyles)

 1. Personality & Attitudes: Adventurous, Youthful, Pleasantly

 2. Values: Good communicator, Open-minded, Team building

 3. Lifestyles: Active, Partiers, Privacy 

User Personas

Through the previous research and user segmentation, two key user personas emerged:

(1) Hana, the corridor administrator.

(2) Nancy, Hana’s corridor mate. I drafted these personas to help me better understand for whom I am designing the product.

Persona #1.png
Persona #2.png

Content & Functionality

Strategy turns into scope when I translate user needs into specific content and functionality requirements. This defines what I’m building and what I’m not.

Design Solution

Information Architecture

At the sitemap phase, focusing on structuring the content and functionality into a logical whole that users can easily navigate. The scoping phase had already defined the user requirements; now, it was time to address how these elements fit together.

Before diving into the sitemap, I considered specific concerns like the number of clicks a user needs to reach content, how many options to present, and how to label those options. Based on previous research, tasks like checking cleaning duties, corridor meetings, or inspections are common for roommates. To address this, I divided the 'calendar' into two main sections: 'My Home,' 'My Task,' 'Calendar,' 'Shopping,' and 'Messages.

Sketch Wireframe

Wireframes _Prototyping & Testing

How are the pieces of the sitemap presented on the screen? Wireframes act like x-rays of the final page designs, representing the underlying structure of each page. To start building this basic framework, I used 'Balsamiq,' a powerful tool for creating clickable wireframes.

I quickly developed an initial set of low-fidelity wireframes based on the application's content flow. These wireframes were then tested through live and remote usability sessions with participants from the target audience. I designed specific tasks for them to complete during testing, asking them to think out loud about their experience or anything 'unexpected.' This helped evaluate the application's effectiveness and likeability.

 

For the Corridor Administrator:

  • Someone left dirty dishes in the sink and you want to inform your corridor mates to clean them up.

  • Write a message to everyone about the inspection happening tonight

  • Invite new corridor mates to your family

  • Create the new cleaning schedule

  • Check and complete shopping list

  • Get the contact info of corridor mate who is living in 1411

  • You are going to leave your corridor, you want to change your administrator role to others.

 

For a Corridor Mate:

  • Check your cleaning task and discuss it with your task partner

  • Your corridor runs out of cleaning fluid, you want to inform the administrator.

  • Inform your corridormats that your friend is coming over tonight, you are going to occupy the public space.

  • Manage the notification setting

  • Share a funny video with your corridor mate 

  • Update your phone number and profile image

  • You are going to leave your corridor, you need to leave this home.

Logo & Branding

I began working on the logo and branding. Since the app is designed for young people living in shared accommodations, I selected a color palette that is vibrant and youthful.

屏幕快照 2020-03-01 22.35.42.png
屏幕快照 2020-03-01 22.37.03.png
编组 3.png
未命名.gif

Hi-Fi Mockups

After multiple rounds of usability testing and iteration, I integrated the branding and visual design to create high-fidelity mockups.

element3-05.png
bottom of page