Caffy
Design a Mobile Web app for a cafe
Project overview
Caffy is a Mobile Web Application designed for cafes. Among the current small and medium-sized cafes, many shops do not have their websites, and some provide shop information through social networks. In addition, the ability to allow users to view a cafe's menu online and order item from their mobile devices is not yet widely available. Caffy's goal is to serve information about the shop while providing an online ordering feature to improve the user experience.
Caffy, as a PWA (Progressive Web App), allows first-time users to easily access it on their mobile devices without having to download and install it. Also for heavy users, they can add it to their home screen for on-the-go access.
Project name
Caffy
Mobile Web app
Duration
2022.01 - 2022.02
(2 months)
Role
UX Designer
Responsibilities
User Research, wireframing, prototyping, usability studies
Understanding the user
I conducted interviews to understand the users I am designing for and their needs. A primary user group identified was working adults who used the cafe to rest and work.
Research revealed that shop environment and convenience are important to them. Environment aspects include the availability of Wi-Fi, sofas and the overall atmosphere. In terms of convenience, aspects such as waiting time and the ability to order easily and quickly became factors in whether they went to the shop.
Pain points
Environment
The environment and ambience of the actual shop is far from what one would expect.
Convenience
Orders must be placed in line at the cashier. Takeaway customers cannot order in advance.
Persona
User journey map
Goal: A easy way to get the shop information and make an order
Starting the design
Before getting into the mockups and high-fidelity prototypes, I wanted to get an idea of what the core parts of the application would look like by creating user flows and wireframes.
User flow
User task: Use the mobile web app to place an order quickly and easily.
Paper Wireframes
Drafting iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain. I tried different layouts and put them together to see how they worked together.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital wireframes
Using the completed set of digital wireframes, I also created a low-fidelity prototype. So the prototype could be used in a usability study.
Usability study
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.
Round 1 findings
Many people start placing orders from the order page
We can improve the details of the prototype to make the application feel more real to the participants
Round 2 findings
Did not know the price per item until the end of the order flow
Add an order history function
Refining the design
Style guide
Muckups
Prototype
I created mockups in Figma and then converted them to a high-fidelity prototype.
Open the prototype
Going forward
What I learned
Understanding your users
The more you understand the user, the better you can find design solutions. The primary difficulty I had while designing this product was conducting user interviews. Through primary user research, I can get some new information to help create a solution in the future, even if I don't have the right idea at the moment.
The first ideas are only the beginning of the process
While designing the Caffy app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and feedbacks influenced each iteration of the app's designs. Usability studies helped me understand how real users interact with my designs and how well the product meets their needs.
Next steps
Further iterations and usability tests
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
More research
Take more factors (e.g., different age groups, occupations) and stakeholders into account. And develop additional types of user personas, such as shop staff. To make Caffy not only consider the part of the consumer but also can meet the needs of the business part. For example, is the ordering process streamlined to improve the quality of service.