The Good Coffee App
Ux/ Ui Design / Branding / Product Design / March 2022
This project was for my Google’s Online Course at Coursera. The objective of the course was to learn UX design by creating an imaginative app. I completed this project over the course of 10 weeks, and learned an incredible amount about UX design (wireframing, research, analyse and prototyping).
Tools used: Figma, Blush, Miro, pen and paper. Test the prototype!
Introduction
The project goal was to learn about UX design from scratch. My idea was to create a coffee app for consumers.
What is The Good Coffee App?
The app is for people who can order faster beverages and get points which can be used later. The Good Coffee is located in capital city area of Helsinki. The company serves good beverages and healthy meals. The product is a mobile app that lets users find their appreciated healthy and quick services.
User research: summary
I conducted unmoderated research and created personas to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who want to have their coffee faster without waiting in lines.
This user group confirmed assumptions about The Good Coffee customers, but research also revealed that time was the most interesting factor. Other user problemsincluded frustration or challenges that make it difficult to use the app.
I also did audition to check competitors in Finland. The biggest ones are Fazer, Robert’s Coffee and Espresso House. They are spread wildly in the capital area, but also in other bigger cities in the country.
Sketching
I love sketching and drawing with a pen. Sketching wireframes wasn’t familiar to me, but I got a hang on it quickly. I tested paper wireframes and then moved to create digital ones.
Affinity mapping
In my ideation process, I used sticky notes repeatedly to organize my findings and ideas. I used sticky notes in mapping potential user flows and Customer journey maps.
Digital wireframing
After sketching paper wireframes I picked best options and started to create digital wireframes and mockups. In a low-fidelity prototype can be seen places for pictures, text and buttons which I tested with my test group. After testing I gathered key pain points and started to create my high-fidelity prototype with pictures, colour, icons and added text. Here is an example of my cart review, where you can edit order and then confirm it.
