jj.png

Happyflat

Happyflat is a responsive website that allows you to organize yourself better with your flatmates to guarantee an effective administration of the flat tasks.

Project duration: Oct - Nov 2021

My role

UX designer designing a responsive website called Happyflat from conception to delivery.

Problem

It's difficult for users who live in a shared apartment to have a good organization with the other flatmates, mostly because they have communication issues.

Responsabilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Goal

Design a responsive website that let users manage better their flat organization with the help of many different tools.

Group 1.png

User Research

Summary

Paint Points

I conducted user interviews, which I then turned into empathy maps to better understand the target user and needs. I discovered that many target users who live currently in shared apartments enjoy a more sociable living and they also reduce expenses; however problem communication lead to a bad organization of the flat and as a result the flat gets messy and unorganized, making the users feel frustrated.

1

2

Flat reunions

When living in a big flat sometimes it's difficult to be all at the same point. Many users would like to make flat reunions but these are difficult to organize.

3

share expenses

Sometimes, in many shared apartments the flatmates decide to share their food but this is sometimes problematic.

Many users find it difficult to organize themself with the other flatmates within the cleaning, leading to misunderstanding and imbalance.

Clean plan

Meet the Users

i.jpg

Primary

Name: Lars

Age: 30

Occupation: Graphic designer

o.jpg

Secondary

Name: Anna

Age: 24

Occupation: Student

Anna is a 24-year old sociology student who also works part-time to be able to afford the expensive London living costs. Living in a shared apartment helps reducing these costs but sometimes she finds difficulties in establish new goals with her flatmates in order to solve potential issues.

Lars is a 30-year old freelance graphic designer who lives in a shared apartment to save living costs. He spend most of the time at home because he likes working from home. Lars have problems with his flatmates because there's a lack of communication an organization of the flat.

User journey map

Goal: Create a new cleaning schedule with the happyflat website

Persona: Lars

user journey.PNG

Information Architecture

iMac - 1.jpg

Paper Wireframes

Next, I sketched out paper wireframes for each screen of the website, keeping the user's pain points in mind. At the right side are the mobile variations, optimizing the browsing experience regardless of the device that the user decides to use.

Adobe Scan 19 nov 2021_page-0003_edited.png
Adobe Scan 19 nov 2021_page-0001_edited.jpg
Adobe Scan 19 nov 2021_page-0002_edited.jpg
Adobe Scan 19 nov 2021_page-0001_edited.png
Adobe Scan 19 nov 2021_page-0001_edited.png
Adobe Scan 19 nov 2021_page-0003_edited.png

Digital Wireframes

Moving from paper to digital wireframes made it easy to understand how to redesign could help address user pain points and improve the user experience.

cleaning plan.png
clean plan.png

Prioritizing useful button locations and visual element placement on the left side of the page was a key part of my strategy.

Budget.png
Budget.png

Usability Study: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Brainwriting (1).jpg
  • Unclear cleaning plan: We found out that users need a more intuitive and interactive way to have within the cleaning plan.

  • Add a new event: For the users was not difficult to complete this action, but some of them thought that some changes could be applied to make it even more intuitive.

  • Add a new budget: Users didn’t find easily the right button to click to be able to complete this action.

Mockups

Early designs allowed for some customization, but after usability studies, I added a basket to make clear what users were ordering. Also, I refined the design by deleting some plus buttons and being able just by clicking in each picture, finally, I added more payment options and made the registration just once.

Before usability study

lofi design06.jpeg

After usability study

cleanplan.png

I made the "add a new item" more clear by painting it grey, it pops up and makes it easier to read for users, helping them to complete the action faster.

Before usability study

After usability study

lofi design05.jpeg
Budget – 1.png

Design System

Desktop - 2.png
1.jpg

High-Fidelity Prototype

The hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.

cap.PNG

Mobile Adaptation

3.jpg

I made some specific designs when adapting to the mobile version because of the limited screen size. For example, I placed the main menu at the bottom part of the screen and I organized the information vertically in order of importance.

2.jpg

What I learned

I have learned to use adobe xd, even when I was more used to using Figma. for this project, because it was a personal project in which I have direct experience since I live in a shared apartment, I learned to get out of my prejudices by listening and understanding the real needs of the user, always putting the user first. I also learned that to create something new you have to think differently and be open to all kinds of ideas, even if at first they may seem nonsense.