UX/UI Case Study: Happyco
Background
With rising housing prices and stagnant incomes, sharing an apartment or house is almost inevitable. Limited kitchen counter space and an infinite supply of dirty dishes is also inevitable. Contrary to popular belief dishes do not wash themselves… and your roommates sometimes don’t wash them either.
So what is the solution to a problem we can all empathize so well with? How do you delegate tasks in a positive manner while holding people accountable (including yourself)?
Don’t worry, there’s an app for that.
For the final project of 9-week UX/UI Bootcamp with UXER School in Barcelona, we were given a challenge to build a digital product to solve an everyday problem. Our final project allowed us to integrate the UX/UI processes, tools, and best practices we learned in class to create a beautifully designed and researched application.
After a week of brainstorming and ideation, my partner and I decided to focus on improving the experience of shared living. We wanted to create a way for people to avoid awkward and uncomfortable living situations and conversations, which meant tackling the dishes.
This project was planned and executed by my partner Tanit Parada and I.
UX Design Process
Research and Discovery
The Challenge
Make living with roommates a more positive, clean, and transparent experience.
We created Happyco to address the pains and gains of sharing a space and to generate more positive interactions between roommates. It was easy for us to empathize with our users because we both had many of these shared experiences. Being located in Barcelona, a city full of young professionals and students living on a budget, we easily identified and acquired users for surveys, interviews, and user testing.
Ideation
After a few days at the drawing board and a million post-its later, we derived our hypothesis and started conducting quantitative and qualitative interviews.
One of my favorite UX/UI processes was ideating and brainstorming. It was incredible to see how collaborative my teammates were. It was invigorating to let ideas flow without the fear of judgement or rejection. Every idea played an essential role in forming the next and there was no such thing as a bad idea in this stage. To me that was a beautiful process. I was also very impressed by my ability and confidence to express my ideas and feedback in a foreign language (pats self on back*).
Hypothesis
Most people are motivated to share living spaces for social and economical reasons, however face conflict regarding communication, cleanliness, and accountability.
Comparative Competitive Analysis
We performed benchmarking research to identify our competitors. Our biggest competitors were:
- Cluttr
- RoomMate
- Flatastic
- Chorma
We analyzed their key functions, usability, and aesthetics. We realized many of these applications were outdated and had poor usability. There was a need for a more modernized and minimalist service that was easy to use. Our ultimate goal was to organize cleaning in a friendly and diplomatic manner, hence the name Happyco. Additionally, our stakeholders map revealed many potential partnership opportunities with companies such as Badi, Idealista, and other housing applications.
User Surveys and Interviews
After reviewing our results, we found our target users. We identified users (ages 18–35) who had lived with roommates for over one year. We prepared two surveys (an English and Spanish version) on Survey Monkey. We distributed the surveys across a variety of channels, such as Facebook groups, Slack, WhatsApp, and Instagram. We received over 80 responses in both English and Spanish.
The purpose of the survey was to learn principle frustrations, motivations, and pre-existing household management systems of our potential users. Our survey findings allowed us to better direct and focus our questions during interviews.
Many of the responses to Question #4 revealed that majority of people did household chores that were not their responsibility 2–3 times in two weeks. We then conducted qualitative interviews with our potential users. We wanted to understand the users experiences and conceptions of shared living and qualitative methods allowed us to discuss more personal experiences.
We conducted interviews in both Spanish and English, which widened our perspective and potential user pool. We found many of users shared apartments with a variety of nationalities, which also showed the need for simplistic organization and communication channels.
Key Discoveries
Our findings revealed that many of our potential users had conflict about cleaning and organization. We also discovered many shared similar social and economical motivations for sharing a space.
Motivations
- People live with friends and strangers because they want to save money while living in central and trendy locations
- People like the social aspects of sharing spaces and having people to share life with (i.e coming home from work and having someone to talk to or cook with)
Frustrations
- Lack of cleanliness in common areas (similar to the tragedy of the commons — my social sciences side coming out)
- Lack of accountability
- Miscommunication
Communication Methods
- WhatsApp was the most common way people communicated with their roommates, organized cleaning, and coordinated schedules
- One person is usually in charge of rent, bills, and communicating with management and other roommates if there is a problem
Direct Quotes from Users
“We do not have a system for organization and cleaning. No one cleans my apartment. That’s the biggest problem.”
“There is always one person who cleans more than the other. There is always someone that has to be the “mom” or “dad” or the others.”
“Cuando vives con gente que no son amigos la comunicación puede ser más difícil e incómoda al no haber confianza.” (When you live with strangers, communication can be hard and awkward if you don’t have a foundation of trust.)
User Persona
We created Luis, the persona which would guide our design processes. Luis represents the responsible, organized, and “dad” of the apartment that is also in charge of the lease.
Design Thinking and Planning
Empathy Map
Empathy mapping helps identify opportunities and challenges for reaching our end users. It also allows us to build empathy for our users day to day pain points. We conceived various scenarios based on what Luis feels, sees, thinks, says, and does. The purpose of this exercise was to better understand the behavioral patterns of Luis and to identify potential touch points.
Customer Journey Map
We then created a customer journey map to conduct a deeper analysis of Luis. We segmented our map into three sections: before work, during work, and after work. This system made it easier to understand how our user interacts in different settings and times of the day. For example, in the morning we anticipated Luis had challenges with accessing the bathroom and using the kitchen.
Wire-framing
We then built low-fidelity wireframes using WireFrame Pro. It was helpful to create the WireFrames at this time, because it made us focus on our MVP and key features. During our UI stages I went back to this wireframes which helped with rapid prototyping.
UI Design
Mood Boarding
We used InVision to create our mood and inspiration board. We wanted our app to convey positivity, good vibes, and happiness. Simplicity, functionality, and minimalism guided our UI Design efforts. Our inspiration board also served as a very util tool to create our color palette and style guide.
Our UI Research also allowed us to learn more about the millions of open source UI tools and inspiration. What a world! I was mesmerized by the infinite sources of inspiration and creativity. I enjoyed gathering inspiration and learning about design trends. I can spend hours on Dribbble or UXInspiration (when you know, you know).
Color Palette
Colors and typography are the most important aspect of UI Design. If your colors or typography are off, you can instantaneously lose users regardless of how sleek your design or functions may be. We chose colors that represented happiness, positivity, transparency, and overall wellbeing.
P: Happiness, positivity and satisfaction
P2: Balance and brightness
N: Used for Typography, Icons, Disabled buttons. Simplistic, neutral, and legible.
A: Used on action items, such as marking approaching tasks.
A2: Used in chat and other action items.
Typography
The Inter Typeface Family is designed by Rasmus Anderson and known for excellent readability on both computer and mobile screens. Inter is legible, minimalistic, and modern- all you need in a font. We wanted our typography to be accessible across all devices while complementing our modern design and funky color scheme. We used Inter Regular and Bold for legibility purposes.
Naming & Logo
Naturally, our branding preferences aligned and we shared a common vision. We wanted our brand to invoke positivity, good vibes, and community. We know how hard it can be to share a living space while maintaining cleanliness and positive relationships. 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.
Name Ideation
At the beginning phases, we named our application HappyPiso (Happy house in Spanish). During our branding stages, we brainstormed more names and then conducting blind voting with a total of six participants. Our results brought us to three final names:
- Happy Co
- Happy Hub
- Gramera
We then voted again and decided on Happy Co. We thought it was a name that had a lot of branding opportunities and positive connotations. We also saw an opportunity to evolve the Co to become our Icon. :)
Logo Evolution
After we decided on our name, we designed our logo on Adobe Illustrator and Indesign. We used Righteous as our logo typography to add a little character and brand distinction. We drafted various logo drafts on InDesign, Illustrator, and Sketch. During our first round, we focused on using our color palette and identifying color pairings. I was drawn to the light blues and periwinkle paired with neutral tones (N).
Final Icon and Logo Design:
We chose the blue logo as our final decision. We believe it invokes positivity, good vibes, and a minimalistic design.
Mock Ups
We created wireframes to assign tasks, see assigned tasks, and view user profiles. In the early stages, one of functions included a point system for roommates to compete and hold each-other accountable for cleaning and doing their respective chores. However, following Agile methodology we ultimately decided it was not a key feature and we wouldnt have enough time to fully develop it.
Refining/ Prototyping
Using Sketch, we designed our interactive MVP prototype. Our MVP includes onboarding, create a new task, view task, and a chat page. Using Sketch Mirror we were able to preview and test our prototype on various iOS devices.
Testing
Testing revealed that our app was easy to use with a few minor discrepancies. After completing various tasks for our on-boarding, our users had trouble with confirming they had submitted their information. We added a confirmation pop-up so users knew they had successfully completed a task.
It further revealed that various functions in our chat were not needed. For example, we originally had a payment option in our chat but our users brought up security concerns so we decided to delete this function to ensure credibility.
Future Improvements
There is always room for improvement, however it is important to share what you have, recieve feedback, and try again. I anticipate more edits and final touches to our design and in the future we would like to:
- Add a point system in the application for completed tasks
- Track each housemates progress
- Add more animations (like a dancing logo)
- Improve on-boarding experience
Key Takeaways
- Never forget about the user
- Keep it clean and functional
- More is less
- Collaboration is key
- Creativity has no language barriers
Conclusion
I love the multidisciplinary nature of UX/UI Design. One moment you are conducting market research, the next you are conducting user interviews, and then designing prototypes. It truly allows you to use all sides of your brain and to use human empathy and psychology to create a product that will hopefully make peoples lives easier. The development process of Happyco gave me many insights into the world of UX/UI and I was excited at every stage. Now we just to build our code and maybe enroll in a coding bootcamp…
Please feel free to provide criticism and feedback!
Test our final prototype on InVision
