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
UX designer designing a responsive website called Happyflat from conception to delivery.
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.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Design a responsive website that let users manage better their flat organization with the help of many different tools.
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.
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.
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.
Meet the Users
Occupation: Graphic designer
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
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.
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.
Prioritizing useful button locations and visual element placement on the left side of the page was a key part of my strategy.
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.
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.
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
After usability study
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
The hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.
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.
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.