Overview
Case Study Summary
Designed a Coffee Shop App to help users find quiet times and book tables.
Conducted research usability testing with first-time users.
Identified issues in feature discoverability.
Improved navigation clarity and accessibility options.
Introduction
As part of my UX Design degree, I completed a capstone project focused on creating a coffee shop app for students. Although I don’t drink coffee myself and was initially concerned about tackling the project, my experience spending countless hours studying in coffee shops during my BA made me excited to design a digital experience students could enjoy.
Challenge
The Challenge for this product was to make a digitally-enabled coffee shop experience. As part of this experience, people, mostly students, will be able to use an app (mobile or web-based).
According to user research, despite the many different aspects of buying from a coffee shop customers valued atmosphere and physical space the most because it can get over-crowded when they want to go in or find it’s too quiet.
To resolve this issue, the feature Popular times was introduced in the Udacity Coffee shop app along with the feature to book a table.
Research: Gathering and Analysis
Research & Discovery
I watched an interview on 3 potential users. After gathering and organizing the notes I discovered many themes and opportunities through the interviews.
After looking at which theme to concentrate on I saw that the theme with the most notes were atmosphere. For instance 2 of 3 interviewers were describing in-depth about how they value coffee shop’s quietness with a slight buzz of conversation in the background.
As I was analyzing this particular theme, I realized that a feature could be made from atmosphere because a place has quiet times and crowded times throughout the week.
Research & Discovery
I watched an interview on 3 potential users. After gathering and organizing the notes I discovered many themes and opportunities through the interviews.
After looking at which theme to concentrate on I saw that the theme with the most notes were atmosphere. For instance 2 of 3 interviewers were describing in-depth about how they value coffee shop’s quietness with a slight buzz of conversation in the background.
As I was analyzing this particular theme, I realized that a feature could be made from atmosphere because a place has quiet times and crowded times throughout the week.
Design: Concepts & Sketches
After gathering research and analyzing the data, I selected three features chosen and did the crazy-8 sketch:
Show popular times to reserve a table
Digital menu with good description, images and Variety
Daily Promotion and offers
As I was quickly sketching each screen, I came up with a few ideas and formed a simple layout. Some screen I drew were great and others not so much because I couldn’t think of what to draw.
Another technique I used to ideate solutions for my design prompt was How Might We question method. This exercise gave me a better concept my layout and potential features.
Design: Concepts & Sketches
After gathering research and analyzing the data, I selected three features chosen and did the crazy-8 sketch:
Show popular times to reserve a table
Digital menu with good description, images and Variety
Daily Promotion and offers
As I was quickly sketching each screen, I came up with a few ideas and formed a simple layout. Some screen I drew were great and others not so much because I couldn’t think of what to draw.
Another technique I used to ideate solutions for my design prompt was How Might We question method. This exercise gave me a better concept my layout and potential features.
Design Pt. 1 : Lo-Fidelity Prototyping
Iteration 1
To simplify and save time in the design process, I created a wireframe to first get the structure of the created user interface.
Iteration 1
To simplify and save time in the design process, I created a wireframe to first get the structure of the created user interface.
Usability Testing
Getting feedback from a current student for my Coffee Shop App was insightful. The User wasn’t a coffee drinker and had no prior experience using a coffee app but navigated through the user flow of the app well.
1. Discoverability of Key Features Needs
ImprovementDuring the Usability test I discovered that the user did not know she could search for all the popular times from the main menu or book a table easily.
2. Popular Times Feature Supports Decision-Making
The participant validated the idea of seeing popular times, “If I’m going to the cafe I don’t want to go in when it’s really busy – as a student – it’s something I considered and you can get a seat easier.”
3. Table Booking Contributes to Accessibility and Inclusion
She also mentioned how great an idea to see the times and book a table for the cafe for those with hearing impairments or mobility issues, “If you’re going with friends – music is loud and with people being loud you can’t have a conversation. Imagine how it is for people with hearing aids”.
The participant’s feedback was validating for the features I chose to concentrate on and gave me ideas on how to improve my app’s user experience.
Usability Testing
Getting feedback from a current student for my Coffee Shop App was insightful. The User wasn’t a coffee drinker and had no prior experience using a coffee app but navigated through the user flow of the app well.
1. Discoverability of Key Features Needs
ImprovementDuring the Usability test I discovered that the user did not know she could search for all the popular times from the main menu or book a table easily.
2. Popular Times Feature Supports Decision-Making
The participant validated the idea of seeing popular times, “If I’m going to the cafe I don’t want to go in when it’s really busy – as a student – it’s something I considered and you can get a seat easier.”
3. Table Booking Contributes to Accessibility and Inclusion
She also mentioned how great an idea to see the times and book a table for the cafe for those with hearing impairments or mobility issues, “If you’re going with friends – music is loud and with people being loud you can’t have a conversation. Imagine how it is for people with hearing aids”.
The participant’s feedback was validating for the features I chose to concentrate on and gave me ideas on how to improve my app’s user experience.
Usability Testing
Getting feedback from a current student for my Coffee Shop App was insightful. The User wasn’t a coffee drinker and had no prior experience using a coffee app but navigated through the user flow of the app well.
1. Discoverability of Key Features Needs
ImprovementDuring the Usability test I discovered that the user did not know she could search for all the popular times from the main menu or book a table easily.
2. Popular Times Feature Supports Decision-Making
The participant validated the idea of seeing popular times, “If I’m going to the cafe I don’t want to go in when it’s really busy – as a student – it’s something I considered and you can get a seat easier.”
3. Table Booking Contributes to Accessibility and Inclusion
She also mentioned how great an idea to see the times and book a table for the cafe for those with hearing impairments or mobility issues, “If you’re going with friends – music is loud and with people being loud you can’t have a conversation. Imagine how it is for people with hearing aids”.
The participant’s feedback was validating for the features I chose to concentrate on and gave me ideas on how to improve my app’s user experience.
Iteration 2
To simplify and save time in the design process, I created a wireframe to first get the structure of the created user interface.
Iteration 2
To simplify and save time in the design process, I created a wireframe to first get the structure of the created user interface.
Design Pt. 2 : High-Fidelity Prototyping
Hi-Fidelity Iteration 1
After getting the basic structure of the screens and creating the UI, I was ready to make my Hi-Fidelity design.
To create my style guide, I found inspiration looking at other coffee apps and see what their colors and typography were.
For colors, I wanted the main colors to be inspired by coffee so I picked colors like cream, espresso and cappuccino. To create contrast against the warm brown tones in the palette, I incorporated a complementary blue inspired by Udacity’s brand color. The blue adds visual balance and is primarily used for interactive elements such as buttons, helping them stand out clearly within the interface.
For text I chose playfair and roboto. Roboto would be the body font and playfair display would be the Header’s font to give a fancy look which I thought it fit for a coffee app.
Iteration 2
After making my design in Hi-Fidelity, I did an annotated iteration for accessibility.
For potential users with visual impairment, I checked my button color(sky blue) if it would pass the WCAG test. When it didn’t pass I found a color similar that would qualify. I made some fonts bigger as well.
In screens displayed to the right, I added in my iteration little lines below each bar graph for better visual use.
For potential users with limited dexterity, I made sure to fix the spacing after I re-sized the font so there wouldn’t be issues with them clicking the wrong element.
Iteration 2
After making my design in Hi-Fidelity, I did an annotated iteration for accessibility.
For potential users with visual impairment, I checked my button color(sky blue) if it would pass the WCAG test. When it didn’t pass I found a color similar that would qualify. I made some fonts bigger as well.
In screens displayed to the right, I added in my iteration little lines below each bar graph for better visual use.
For potential users with limited dexterity, I made sure to fix the spacing after I re-sized the font so there wouldn’t be issues with them clicking the wrong element.
Iteration 3
I conducted an unmoderated self-test on Lookback with 4 participants I discovered that most did not know what the icon buttons meant – especially for the task to reserve a table. All participants used the popular times screen to book a table.
For my KPI I chose to how to decrease the time on reserving the table. My alternative solution was to make a buttons with labels to prevent my hypothesis that 40% will be unable to find the book a table icon button to reserve a table.
In screens displayed to the right, I added in my iteration little lines below each bar graph for better visual use.
For potential users with limited dexterity, I made sure to fix the spacing after I re-sized the font so there wouldn’t be issues with them clicking the wrong element.
Iteration 3
I conducted an unmoderated self-test on Lookback with 4 participants I discovered that most did not know what the icon buttons meant – especially for the task to reserve a table. All participants used the popular times screen to book a table.
For my KPI I chose to how to decrease the time on reserving the table. My alternative solution was to make a buttons with labels to prevent my hypothesis that 40% will be unable to find the book a table icon button to reserve a table.
In screens displayed to the right, I added in my iteration little lines below each bar graph for better visual use.
For potential users with limited dexterity, I made sure to fix the spacing after I re-sized the font so there wouldn’t be issues with them clicking the wrong element.
Conclusion: Engineering and Handoff
Solution & Impact Overview
I arrived at my solution and built a digitally-enabled Coffee Shop App by adding and iterating features like book a table and popular times through careful data-gathering and analysis.
User testing has validated my results and the feedback testers have provided and their actions while testing the app.
Upon making my last iteration, engineering handoff was completed through zeppelin and a style guide was made.
It was a challenging yet impactful project to learn and build my skills. Hope you enjoyed this case study.
Solution & Impact Overview
I arrived at my solution and built a digitally-enabled Coffee Shop App by adding and iterating features like book a table and popular times through careful data-gathering and analysis.
User testing has validated my results and the feedback testers have provided and their actions while testing the app.
Upon making my last iteration, engineering handoff was completed through zeppelin and a style guide was made.
It was a challenging yet impactful project to learn and build my skills. Hope you enjoyed this case study.
