Research
UX/UI Design
CHEERs
An App designed to connect people and fight loneliness through cooking.
Timeline
Oct. 2020 - April 2021
Team
Team of 2
Methods
Focus Group
Market Research
Competitor Research
Keywords
UX Research
Prototyping
ABOUT THE PROJECT.
The task was to develop a new service which is visualized in the form of an app.
CHEERs is a mobile app designed for people who recently moved to a new city due to a new job or their studies, are passionate about cooking, and don't like to eat alone. The app offers a solution for their problem and connects people, regardless of their culture, religion, milieu, etc., to enjoy a nice dinner together.​​​
DESIGN PROCESS.
Research
Problem definition
Target-Group analysis
Market & Competitor analysis
Interviews
Prototype
User Flow
Wireframes
Design
Visual Concept
Design System
Components library
Prototype
Testing
User Testing
Corrections
AUDIENCE.
The app's main target group is between 18 and 28 years old and mainly located within the adaptive-pragmatic milieu. It contains university students as well as workers who just moved to a different city, either to study or to work. They are afraid of experiencing loneliness and have trouble making friends.
He moved from the small town of Minden to Munich​​ to study and is anxious about finding friends and fitting in.
​
Important information he provided:
-
mostly frightened about not finding friends or being alone
-
considers himself introverted and would like to make friends easily without stepping too far out of his comfort zone.
-
he doesn't like the awkward silence when meeting new people. In his opinion, it would be good to do something with strangers to avoid the silence.
-
He likes to cook but cooks the same stuff often. He would like to experience something new.
Thom, 24
in a relationship
Works as a working student
USER STORIES.
STUDENTS
Moving to another city is scary but I am sure that there are many people who are anxious. So I guess I would like an app that brings together the lonely and helps them connect.
I expect to be able to do an activity with others like cooking
INTERNATIONALS
I'm not only battling the fear of not fitting in but also of not understanding others. The language barrier makes it tougher to find friends and I catch myself being drawn to people who speak my mother tongue because it's easier. I expect an app to guide me but to also help me step out of my comfort zone.
USER FLOW.
Main path
additional path
WIREFRAMES.
The project's original wireframes were revised after getting feedback from potential users. Below is a selection of the new wireframes that will not match the UI Results displayed further down.
DESIGN SYSTEM.
COLOURS
#004aad
#878E9A
#0A1E2D
#5de0eb
#40515F
#00101C
#26333C
FONT
The sans serif ‘Etna Sans Serif’ is used for the app because it is easily readable and clearly distinguishes its letters. As a text font, "Roboto" is used because it is also easily readable and thus one of the most popular fonts there are.
BUTTONS
LOGO
The logo consists of a total of three elements: Two open circles, which represent condensation rings of glasses and at the same time a modified infinity sign. The CHEERS lettering is a reinforcing link between the circles and forms a kind of bridge between them. Together, the elements symbolise the lasting friendships that can arise through CHEERS.
UI DESIGN & RESULTS.
More Mock-Ups are in the making!
IMPROVEMENTS.
Reflexion is key. So to speak I am aware that the CHEERs app is not without flaws and I would like to point out the most crucial ones here. It's not trying to bash my ideas etc. I just want to be open and show that I am aware of the problems that the project has. Especially since CHEERs was one of the first UI Design projects I did and I gained a lot of experience ever since.
1
Focus & Features
To put it short: We stuffed the app with too many features. Being able to order through Rewe and have a shopping list and recipes on the app is good and fits the overall theme. But since everything was hastily created and thought of, none of the features are properly thought through, which is crucial. And this approach created mistakes.
​
Learnings:
-
Focus stronger on the "need" than the "nice to have".
-
Don't be a feature-pusher.
-
Center around intuitive design and accessibility.​​​
2
Navigation
The navigation can be slimmed down to avoid the cluttered feeling it provides right now. ​Settings, Help & Feedback, Sign out, etc. can all the summed up under "Profile"
​The menu doesn't need to be displayed as a burger menu, once it is reduced, it can be placed on the bottom of the phone...
​There are many ways to make this app more usable and those are only two.
​
Learnings:
-
more means that users have more opportunities to perform actions by mistake. Slim the options and prevent errors.​​
3
Accessibility & Usability
Let's face it: The app's structure is very complex. It was a huge project in very little time and I am still proud of how well we did despite our challenges. However, the User Journey we imagined is not user-friendly and should be redesigned.​
Also, the app's features should be checked with proper user research. I act under the premise: "If they (the target group) don't use or need it, you should lose it." Why? To declutter a design and provide people with features that add value instead of confusion.
On top of that, accessibility measures need to be taken.​​​​
RESOURCES.
-
Header foto by Odiseo Castrejon from Unsplash
-
Food fotos by Joseph Gonzalez from Unsplash​​
-
Persona (Thom) foto by Yingchou Han from Unsplash