UX/UI Case Study | Happyco
Introduction
Like most of my friends, I’ve spent the majority of my adult life living with flatmates. With the exception of the last couple of years, where I had my own apartment in Brussels, I’ve always had to share the space I lived in. Of course, that can be a lot of fun (and indeed I’ve made friends for life this way) but it can come with its own set of inconveniences. Having to deal with dirty dishes, noises at night and unwanted guests, sharing a flat can be frustrating.
At the beginning of the year, I traveled to Barcelona to enroll in a two-month Bootcamp on UX/UI design at UXER School. We wanted to work on the problems that arise when you live with other people, a topic we could easily relate to.
The timescale for this project was 8 weeks and was undertaken with one other student: Makena Haydon. You can read her version of this project here.
UX Design Process
Research
The challenge
The idea was to design a digital product that would allow our team of two to put in practice all that we’ve been learning during UXER School’s Bootcamp.
We decided to focus on the experience of sharing the space you live in and the issues that go with it.
Hypothesis
Once the preliminary research phase was over, we started formulating our hypothesis — the assumptions that we thought users would feel towards cleaning and organizing.
Cleaning is an issue when you share an apartment with others. You often have to clean after your flatmates.
We also thought that sharing an apartment came with other problems, like some people having to pay more than others. For example, having to put money upfront to pay for common expenses and not being paid back.
Competitive Analysis
In 2016, almost half of Spaniards between 30 and 50 years old were sharing an apartment.
However, we found a relatively small number of apps that were targeted specifically at flatmates with the aim of organizing tasks. Of those, some presented design challenges, as noted by some users in the Apple Store. For example, an overly complicated design was a common complaint in some of the apps we analyzed. Users found it difficult to use some of these apps to organize chores.
It was here that we saw an opportunity: to create an app where you could easily create tasks, assign them to someone and making the completion process straight-forward.
Surveys and User Interviews
The purpose was to determine the basic ‘pain-points’ of flatmates when it comes to sharing the space they live in.
We prepared a survey using Survey Monkey and distributed it among multiple Facebook groups and people we knew who were sharing their apartment and lived with flatmates. We looked specifically for people that had been sharing for a year or more and had between 18 and 35 years old. We gathered information from almost 80 people.
Something that we found surprising was that money was not that much of an issue as we thought it’d be. However, it became clear that different expectations towards cleaning was the number one frustration of sharing an apartment with others.
All of our respondents said they were not using a “formal” method to organize cleaning their flat or house. Some people remembered sticking a paper on the fridge hoping that’d work, but laughing at their naiviteé. People easily forget what they have to do.
Here are some of the things people told us:
- “When responsible people live together, it works, when there is a free rider, it does not.”
- “When you’re not friends with the person you live with, it may be harder to say certain things to their face.”
- “It’s easier to say things using your phone than in person”
- “When you live with people who are not friends, communication can be more difficult and uncomfortable because there is no trust.”
- “An organized system works better because you have to forget to propose it or someone to take the initiative.”
Something that stood up to us that we hadn’t considered initially is how uncomfortable talking about chores and responsibilities can be with your flatmates, especially if there’s no previous relationship. Many of our respondents used their phone to communicate because saying things to their face was simply too awkward. We were also surprised with the fact that, while people seemed to have various ways for managing their common finances (ranging from pen and paper to an app or Excel), the system worked and it wasn’t a real problem.
User Persona
As Karen Bhela points out, the user persona is a helpful tool throughout the design process because it bridges the gap between research and planning.
Meet Luis: He shares a flat in the Eixample in Barcelona and unfortunately for him, he often needs to clean his flatmates’ dishes so that he can cook his meal for the following day.
He’s frustrated but doesn’t know what to do about it: the idea of confronting his flatmates is too uncomfortable.
Planning
Empathy Map
An empathy map is a tool that allows you to visualize in depth the emotional and rational aspects of a user, in our case Luis, by asking about his actions and feelings. With this technique, we wanted to understand his point of view regarding the cleaning problem in his flat. To do that, we had to get into his skin and investigate more about his response to a particular situation.
Journey Map
Customer journey maps are much like personas but they focus more on tasks and questions. Because journey maps express the user’s experience over time, we divided our map into five sections: at home, before work, on his way to work, during work, and after work (at home).
As Paul Boag points out, the Journey Map puts on paper the development of our user’s journey through the representation of the points of contact that characterize their interaction with our product. With this, we obtain a route that helps us to reflect and to detect possible problems or improvements. For example, Luis had a negative experience before heading to work if one of his flatmates was using the bathroom at the time when he needed it.
Value Proposition Canvas
The Value Proposition Canvas is a tool which can help ensure that a product or service is positioned around what the customer values and needs. It’s formed around two building blocks — customer profile (right) and a company’s value proposition (left).
We used the Value Proposition Canvas to help us decide what is most important by evaluating which steps have the most benefit for the user, and prioritize what should be built next. Because we were only two people in the team, it was especially important that we were able to establish what was most important for our customer. In other words, we had to make a choice about where to put our efforts in. In the end, we decided that the ability to create and assign tasks as well as a chat for communicating was our key priority.
Visual Design
Using a tool typically used in design sprints called Crazy 8s, we created our first low-fi wireframes. Early on, we wanted to include a point system for roommates to compete against each other and keep track of someone else’s tasks but had to drop the idea because of time constraints.
Sketches
Sketching an outline of the app was a way to help us visualize it. Makena and I both sketched a rough outline of the app and then we combined our work, selecting the screens we both liked the most.
Wireframes
Low-fidelity wireframes provide a simple picture by way of organizing blocks that show space allocated for an image and mock content used to get a rough idea of the different content blocks. We based our wireframes on a user flow map, which helped us be more focused on what the low-fi wireframes we had to do. This was the first time we worked on low-fi wireframes and we struggled to keep it simple!
Visual Research
Mood board
Before getting started with the visual design we needed to decide the overall vibe of the app, so we created a mood board using Invision. The purpose was to learn about the visual world and gather inspiration from other apps. We wanted our app to convey positivity and both Makena and I wanted it to have a simple and minimalistic design, that was easy to use but looked great.
This part of the process is great to gather ideas of how certain features should work based on how others do it, so it’s a major step towards the final design.
Color and typography
We wanted our app to look happy yet reliable, so we went for blue as our main color. According to Color Theory in Action, blue is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven. Blue is considered beneficial to the mind and body.
Regarding typography, we used Inter Typeface, a free and open source font family designed by Rasmus Andersson. Inter is designed for computer screens, which translates in excellent readability. Because simplicity was the leading mantra; we decided to use just one font family.
Happyco’s name
This was one of my favorite parts of the whole process. We had the mentorship of Ismael Barros from Soluble Studio. Ismael guided us through the daunting task of coming up with a name and logo for our app. Before we started, I had the impression that most names are a product of fate or chance. He showed us that solid brands have given a lot of thought to their name, and that it’s a carefully crafted process that often results in the most successful brand identities.
Before we started our process, we called our app “HappyPiso” (Happy Flat in Spanish) — we liked how it sounded, a little goofy and laying down our intention of designing something that contributed in making people happy. Our pre-conceived idea was that in order to be happy you need to live in a happy space. This ended up being true, however, having “Piso” on our name could be too restrictive. For example, what if you’re an office looking for some internal cleaning organization? So, with Ismael’s guidance, we looked for something that conveyed our Value Proposition without restricting other uses of the app. The outcome: from Community, Co-living, Co-exist…Happyco!
As Makena says: “We wanted to provide a space where awkward conversations could be easily avoided with better anticipation of needs and duties. At the same time, we wanted our users to easily access our app and feel productive when doing so. At the end of the day, we want everyone to come home to a happy and clean space. We must not undervalue the importance our environments play in our day to day successes.”
Logo
We used Righteous as our logo typography because we thought this Google font has a lot of character. Our logo conveys a person with open arms, open to talk about things that have traditionally being a little uncomfortable!
Prototyping
With our user flow in mind, we used Sketch to design our prototype. Our MVP (Minimum Viable Product) includes setting up a new flat, inviting your flatmates to the app, creating a new task, view task, and a chat page. Originally we also had a feature to send and request money, which was removed after testing.
Intro screens
Creating a profile
New users can create their own profile and their flat’s profile. Then, he can share it with his flatmates so that they can create and assign tasks.
Create and assign tasks
This element is the heart of the app. After onboarding, users can create new tasks and assign them to themselves or their flatmates. They can also choose from a list of default (common) tasks. When creating a task, you can set reminders when you need to get it down. The due date is always visible and changes color as the date approaches, similarly to Trello. You can also have a task repeating every day, week, or month.
Because good communication is such an important part of sharing a happy space, especially when it comes to cleaning, we knew we had to include a chat. Using Happyco’s chat, you can socialize with your flatmates as well as asking things using a poll. An Activity screen lets you know what’s been done in the last days so you have an overview of what’s going on in your flat.
Testing
We tested our prototype to see what our users thought of it. This is such an important part of the design process. While we had been testing our wireframes and ideas with our classmates, this was the first time we tested our prototypes. Our most important feature, creating and assigning tasks, worked successfully. Other things, like what an “alert” was (a reminder that gets sent to your phone when a due date is approaching) was confusing for users so that’s something we had to clarify. Other details, like having a watch as the icon to illustrate a due date (instead of a calendar) were confusing.
One of the main conclusions during testing was that some of our original features were not needed. For example, as Makena points out, we originally had a payment option in our chat but our testers “brought up security concerns so we decided to delete this function to ensure credibility.”
Conclusion
What did I learn?
Designing the app has been a challenging and rewarding journey. It was clear from the onset that one of the major challenges was for people to get in the habit of doing their part when it comes to cleaning. Having the app helps but we thought that a points or rewards system would have been the next thing we would have liked to add as a way of motivating people to clean up. We understood the needs of the users through the survey and conversations.
Finally, we faced the challenge of creating an engaging app both from the user experience perspective and the visual perspective. Because Makena and I have no experience in graphic design, the visual part of our app was a little more challenging but I think that given this constraint we still managed to design something that looked good.
What are the next steps?
- Improve the user flow
- Add a point system with rewards for completed tasks as a motivation for cleaning
- Track each housemate’s progress
- More usability test of the prototype with users
- Refine the current design
- Deep research about specific features
Special thank you to Makena Haydon and everyone who supported and helped us while working on this project.
