Serenity Cafe
An accessible and easy to navigate coffee application.
Programs Used
Figma, Google Forms & Sheets
Role
UI/UX Designer
Timeline
October - December 2022
(12 weeks)
Project Overview
Background
Serenity Cafe strives to create an accessible and easy to navigate coffee application while implementing a feature that allows users to see how occupied the coffee shop is.
Problem Statement
Customers often face frustration when arriving at a coffee shop only to find it overcrowded or with limited seating.
Project Goals
The application should reduce wait times, improve user satisfaction, and create a more enjoyable cafe experience.
Empathize
USER PERSONAS
As the first step in the design process, understanding how a customer would feel through the creation of user personas, gives me an idea of what design elements to implement.
USER JOURNEY MAP
This user journey map was also extremely helpful in developing Serenity Cafe’s application. This was my first time creating a user persona and journey map and it let me “step into the shoes” of how a user would feel while using an application.
Define
PROBLEM STATEMENT
Customers often face frustration when arriving at a coffee shop only to find it overcrowded or with limited seating.
COMPETITIVE ANALYSIS
I conducted a competitive analysis to determine which features Serenity Cafe should implement in their new app. Comparing competitor companies and their apps helped me develop different elements for Serenity Cafe.
Ideate
INFORMATION ARCHITECTURE (IA)
This lo-fidelity prototype helped me structure my application in a way where users would intuitively run through the steps with ease. While I should have created a standard flow map before starting my prototypes, I was very excited to start designing. I realize now how useful the initial flow map is before designing.
Prototype
LO-FI PROTOTYPES
I created 5 different wireframe variations for the homepage. I decided on this specific home page because users could access almost everything, they could need in a mobile ordering application.
HI-FI PROTOTYPES
It was incredible to see my designs finally come to life! I followed the IA flow map that I created before helped me understand how a user could use an application.
Test
ROUND 1 FINDINGS
Users were confused with descriptions
Increased accessibility to occupancy counter
Ability to choose and pick time quickly
My first round of usability testing was conducted as an unmoderated, remote testing through the use of Google Forms and Sheets. I was able to collect usability testing data by giving a set of tasks to users and asked for their feedback. My main roadblock was that users were confused with descriptions and that was a problem that I needed to tend to immediately.
ROUND 2 FINDINGS
Descriptions were labeled properly and easily identified
Occupancy counter found on homepage and checkout page
Time features are optimized and easy to use
For my second round of usability testing, I made the necessary changes and found that my findings from round 1 were all resolved.
FINAL PRODUCT
Throughout the process of my first user experience and interface design project, I was able to learn the entire design process. Although it was overwhelming at first, I found that each step is the foundation for the rest of the project. User experience isn’t just about the design aspect, it’s about building the blocks that are necessary to design in the first place. Explore the Serenity Cafe app below.