Embedded Files
Project Overview
Project Overview
I don't drink coffee. I don't like the smell. Which means I don't frequent coffee shops and have never even used an app to order coffee to go. The good news is, my lack of experience ordering coffee to go from an app means I won't be subconsciously copying any current company's app for this project. The bad news is, I have very little idea what features need to be in an app for ordering coffee. Therefore this project really will be a challenge.
The Challenge
The Challenge
As this was the first project of the Google Certificate Course, the course provided a fictional coffee shop scenario, and rather than have us do user research first, we were given three user pain points:
Patrons do not want to wait in line or order or pick up their order.
Patrons would like a better way to collect and make an order for a group of people.
Patrons do not want to lose their in-shop table/seat when they get up to make another order.
The Solution
The Solution
Create an app with the following features:
Patrons would like to be able to remotely make an order to-go.
Patrons would like an easy way to make a group order.
Patrons would like to be able to order in-house from their table.
Research
Research
Normally for this sort of project I imagine that I would want to gather information from the administration and employees of the coffee shop, as well as their patrons. I would also want input from patrons of other coffee shops that currently use an app for ordering to find out what they like about the app and to discover their pain points.
This information gathering might take the form of interviews, surveys, polls, or focus groups.
However, as this was the first course project, after learning about the various ways to do Foundational Research, the course provided two types of general users and moved me on to learn about empathizing with users.
User Personas (i.e. A Little Empathy Goes A Long Way)
User Personas (i.e. A Little Empathy Goes A Long Way)
We could all use a little more empathy towards our fellow humans these days, so I enjoyed the next step in the project, learning how UX Designers empathize with users by designing for personas that represent abstract group needs. It truly is easier to design for a person than an abstract idea of a group. So with the two following prompts, I was easily able to translate these types of users into personas.
One user wants to use an app to order a group order to go. The user wants a way to easily collect orders from group members, pick up the coffee, and have it still be hot when the user’s destination is reached.
I imagined this type of user to be a young professional who's job it is to get coffees for coworkers in the morning. My inspiration for this was films like The Devil Wears Prada where the newbie employee in a busy New York office has to pick up coffee for everyone on her way to work. However, I wanted to create both a female and male persona so I created a male for this prompt and instead of a job in the fashion industry, I imagined him as the newest addition to a law firm.
Problem Statement
Josh is a junior associate
who needs a fast and easy way to order and deliver coffee to his coworkers every morning because he wants to make a good impression with his superiors.
One user wants to order in house without losing their table. Currently a user must pick up all their belongings and get in line to order anything, however, then risks not finding another table upon return. Being able to order from the table would prevent this problem as well as let them continue working while waiting for their order.
I myself can't study in a noisy environment, however while in college and grad school I saw several students who did study in coffee shops. So my inspiration for this persona is based on my grad school peers.
Problem Statement
Emily is a student who needs a way to order coffee and food from her table and have it delivered because she does not want to lose her table or study time due to packing up her belongings in order to stand in line to order.
User Journeys (i.e. "Sophie, what's the next step?")
User Journeys (i.e. "Sophie, what's the next step?")
In my personal life I often approach situations by breaking them down into actions and the small tasks needed to complete each action. I first saw this technique in the Friends TV show episode where Chandler has to get married, but before that he must complete actions such as shower, then put on a suite. I later found it in the book The DaVinci Code where one of the characters mentions that her grandfather always asked her, "Sophie, what's the next step?" I now say this to myself when trying to get through a large task, and no my name isn't Sophie, but I've found this phrase to help on many occasions.
The cynic in me is also forever looking for ways a situation could be improved or optimized.
Therefore, I found the exercise of mapping user journeys felt quite natural to me.
Competitive Audit
Competitive Audit
The competitive audit process also was very familiar to me. I started both my undergraduate History Thesis and my blog by first researching what other works (be it books, web pages, apps, or social accounts) are out there on the topic and attempting to figure out what gap I could fill with my own project.
The Competitors
Because CoffeeHouse (according to the fictional Business Scenario provided by the course) has shops in cities all over the globe, I chose to audit the websites and apps of the two largest coffee shop chains I could think of, Starbucks and Dunkin' Doughnuts. Both serve drinks and pastries in shops around the globe and I felt these were the best direct competitors. Tim Hortons is the third largest coffee chain I could think of, however as this brand is mainly in Canada and also serves food beyond just pastries, I felt their website and app worth auditing, but determined them to be an indirect competitor. Finally, as CoffeeHouse is a smaller brand than Starbucks or Dunkin' that attempts to serve locally sourced items, I wanted to audit a small, local coffee shop in my own town that serves locally roasted coffee. I chose Juneau, Alaska's Heritage Coffee to audit, however found that they only have a website, but no app.
I chose three large coffee chains, Starbucks, Dunkin’ Doughnuts, and Tim Hortons, and one small local coffee shop, Heritage Coffee, to do a deep dive into their app and web sites for a competitive audit. As the CoffeeHouse my app will be for has several sites and tries to differ menu selections based on locality, it was important to me to look at coffee chains that operate globally. However, as the CoffeeHouse is still a small company, I also wanted to look at a small, local business.
My Conclusions
The About section is less important that the Shop option. Based on my experience creating websites, and my assumption that people like to support companies that have good social ethics, I had assumed that an "About the Company" section would be front and center for users to find out right away why they should support/order from the company. During the deep dive I discovered that the "About" section was often secondary to the "Shop Our Products" section. I guess when a user needs caffeine they're less interested in reading about a company to decide if that's where they should order coffee from than just ordering coffee and going on their way.
I was not able to proceed through the entire app ordering process. Unfortunately, I do not live where I could personally try the ordering process in any of the apps, so I was not able to go through the whole ordering process to find out what screens and alerts show up throughout. My knowledge of ordering food from an app comes from one time ordering pizza from Dominoes. I did not use the Pizza chain in my audit though because using other coffee chains seemed more appropriate.
The Gap: The locally sourced global advantage. I found it interesting that despite the size of the chain, each shop I audited attempted to market themselves on their websites as a neighborhood coffee shop each in their own way. They each maintain the same menu which may provide a sense of comfort to their patrons. No matter where they are globally, they can find the familiar taste of their home coffee shop. The CoffeeHouse, on the other hand, differs their menu by location based on local resources. I thought I could lean into finding ways to encourage patrons to seek out the different shops around the globe because of the differing menus.
Initial Designs
Initial Designs
Ideation: Crazy 8's
Ideation: Crazy 8's
The Ideation process started with a Crazy 8s exercise to explore the question “How might CoffeeHouse use the app to increase customer loyalty?” In the end most of these did not make it into the app, but could be added later.
My ideas included
Birthday points
Purchase points
Creating an account
Points for each store visited
Weekly challenges
Daily winner chances
Social media post challenges
Patron drink recipe challenges
Paper Wireframes
Paper Wireframes
I brainstormed layout ideas for five pages. For each page I drew 5 different layouts, then starred elements in each that I wanted to keep in a final sixth layout. The pages I selected to wireframe were the main page, a menu page, a payment/cart page, a find a store page, and a sign-in/profile page.
While I did come up with my own ideas, I also looked for inspiration by studying the apps for Starbucks and Dominoes to see how another coffee chain and another food ordering app have laid out the elements in their apps. From working as a Publications Specialist I have learned it is not necessary to reinvent the wheel. Working smarter, not harder, involves looking at similar products and using elements you like, but redesigning them to fit your own product.
Home Page
Menu Page
Payment/Cart page
Find a Store Page
Sign-in/Profile Page
Figma Digital Wireframes
Figma Digital Wireframes
I started my digital wireframes by copying the shapes I had drawn in my paper wireframes, but once the course introduced us to the Figma Mobile Wireframe UI Kit, the wireframes started to look better.
The Main Page
The point of the app is to allow users to quickly and easily order either ahead of arrival or from a table in store and also make group orders. Therefore the important elements are being able to set the current store location, having an easily accessible menu and order button, and a way to save a profile with often purchased items for quick repurchasing.
The image carousel is to highlight seasonal or other items, but keeps Accessibility in mind by having controls for moving the image. It is at the top because it is farthest from the users reach and has the least need of interaction.
A user can set their current store location on the map page, but this space on the Home page will remind them which store they will be ordering from in the app.
On the Home page the menu category buttons will be finger tip size and should be at the right place for a user navigating only by thumb taps.
The Welcome region will change once a user has created an account and logged in. Then they can view recent orders and their reward status.
The Menu & Cart Pages
Users want a way to easily collect desired orders from a group then make a group order for pick-up. This app will allow sending menu items to another user who can then add them to their cart.
The menu category buttons will take a user to the appropriate category on the menu page. Here, users will be able to “like” certain items which will be saved in their profile for easy ordering. They will also be able to share menu items with friends, and add items to their cart. Once they are ready to order they can use the slider at the top to move to the cart or the Order button at the bottom which may be easier to reach.
Users will be able to receive menu items sent from group members and add them to the order.
The Location Page
"CoffeeHouse Business Scenario: For each of the cities they currently operate in, they have crafted an exclusive coffee-based beverage that can only be ordered in its city. This has inspired fans to seek out CoffeeHouse shops in other cities in an effort to try all of the exclusive creations.”
The map page will not only allow users to pick the physical shop they want their in-app order to interact with, but it will provide incentive for users to visit more than one physical location.
This map will have pin points showing where all the physical shops are so that a user can either use the map or the search function below.
For some users it will be easier to type in a location than use two fingers to navigate the adobe map.
From the list resulting from the search, a user can save their current store location for ordering from the app.
To get users to want to visit multiple physical stores, the app will give users “badges” which they can earn by scanning a QR code with their phone camera at each location they visit.
This is similar to the Geocaching app which gives users a badge for each state visited and Geocached in.
Figma Low-Fidelity Prototype
Figma Low-Fidelity Prototype
The user starts on the main page where they can either proceed to the shop menu, sign in, or choose a different store location.
From the shop menu they can add items to their cart, share an item to a friend for a group order, or save favorites for quick ordering later.
At the cart page a user can finish their order and include items from a group order if they wish.
From the user profile page a user can quickly add recently purchased items to their cart.
Usability Study (Round 1), Findings, and Revisions
Usability Study (Round 1), Findings, and Revisions
Usability Study Plan & Note Taking
Usability Study Plan & Note Taking
Using a template supplied by the course, I completed a Plan which included an Introduction, Research Questions, Key Performance Indicators, Methodology, Participants, and a Usability Study Script.
Research Questions
How long does it take for a user to order a menu item from the app?
How long does it take to collect then order a group order of 5 people?
What can we learn from steps users take in attempting to order for a group?
Are there any parts where users are getting stuck?
Are there more features that users would like to see included in the app?
The Participants
If this was not a student project, I would have most likely found a more diverse group of interview participants, but in order to complete the Usability Study Interview task I asked five close family and friends to be my low-fidelity prototype testers.
As I learned 5-8 interview participants is the generally accepted number for usability testing before diminishing returns, I was still within an acceptable number of participants.
Two were my parents, but being less familiar with using apps in general and very unfamiliar with ordering food from apps, I found they provided insight into the lack of intuitiveness of app features that I find intuitive.
The three others were younger, more tech savvy individuals who provided insight into features they're used to seeing and expect to see in any app.
I recognize that none of my participants had diverse backgrounds from the other participants and therefore my designs are at risk of being subconsciously biased.
Methodology
I interviewed each participant separately via Google Meet. I sent them a link to my Lo-Fi Figma Prototype and while they screen-shared with me so I could watch them proceed through the app, I read the prompts and questions from my script while recording their reactions in a Google sheet.
Example of spreadsheet notes for a participant.
Script
Prompt 1: Open the CoffeeHouse app on your phone, Navigate to the shop’s menu.
Prompt 2: Add an item to your cart.
Prompt 3: Send the menu to a friend/colleague.
Prompt 4: Go to your cart.
Prompt 5: Add menu items sent from others to your order.
Prompt 6: Submit Order
Round 1 Findings
Round 1 Findings
Group ordering needs to be initiated by the user and more controlled.
The main page needs a better shop menu/location selection navigation.
Users need confirmation pages and “x” buttons to undo choices.
Affinity Diagram created with Google Jamboard to organize the Usability Study notes into themes.
Revisions
Revisions
Users requested the main page be more intuitive.
Category names have been added instead of lines to make prototype of main page menu area more clear and the search bar has been removed. I forgot that outside of UX Designers, it is not common knowledge that lines represent text, and I didn't give any indication what kind of text I envisioned the lines represented.
The word "Menu" was unclear, participants were unsure if when asked to go to the Menu they were being asked to go to the coffee shop menu, or the app's menu.
The CoffeeHouse location area has been moved below the menu and changed to a button.
Options for Quick Order (Profile) and Group Order have been added to the front page with clearer wording.
The hamburger menu at the top has been removed in favor of an “About Us” option at the bottom of the main page.
The Home and Order bottom menu items have been removed.
Before Usability Study
After Usability Study
Users requested the Group Order system be revised.
The design has been revised so that the app user initiates the Group Order, selects friends to invite, and chooses to include items returned by friends in group order to the cart.
“You need an approve button for adding specific orders and who it's coming from.” (Participant C)
Before Usability Study
After Usability Study
Users requested an “x” option for buttons.
A “Back to Home” button has been added in the upper left corner.
The pop-up box after pressing the cart icon on the menu items has been revised to offer an option not to add the pressed item.
“There’s no way to unshare!” (Participant C)
Before Usability Study
After Usability Study
Mockups & High-Fidelity Prototype
Mockups & High-Fidelity Prototype
Design System: Sticker Sheet
Design System: Sticker Sheet
I wanted to stick to coffee and earth tones. I used the Coolors Palette Generator to come up with a color palette. Color contrasts for text and backgrounds were checked for Accessibility with the WebAIM color contrast checker.
Headings are labeled hierarchically.
I loved learning that Figma has a way to save comment elements as components so that you can make a change once rather than many times over throughout the mockup designs.
I thought it was unfortunate that the course only taught us about Design Systems at this point, because going back to replace many of these components with components found in publicly available Figma Design Systems such as Google's Material would have been much more work. Next time I will be copying and redesigning components from other Design Systems in my projects.
Key Mockups
Key Mockups
Figma High-Fidelity Prototype
Figma High-Fidelity Prototype
Besides colors and images, the Hi-Fi prototype has many more feedback elements and back buttons than the Lo-Fi prototype had.
Usability Testing (Round 2), Findings, and Revisions
Usability Testing (Round 2), Findings, and Revisions
Having refined my designs, I refined my Usability Study Script and re-interviewed the same five individuals via Google Meet. Again I created a Jam Board to visually organize the collected interview responses into themes so that I could glean observations, themes, and insights. I then prioritized my findings into actionable mockup revisions and lower priorities that might be done if the app were to be further built out.
Round 2 findings:
Through this second round of testing I learned that while I had focused on creating examples of types of pages in my app, I had not actually created a prototype that flowed at all. For example, I asked each study participant to "add an item to your cart", however after they chose an item from the menu, hit the cart icon for that item and confirmed adding it to their cart- they then continued to the cart page where I had put three example items in the cart. This was frustrating and confusing to the participants who had only added one item, or perhaps multiple items, but not the ones I had chosen as examples. I also had neglected to add any way for users to customize their orders, and the menu category buttons on the main page only took them to the full menu page. I now know that I need to consider not just the flow of pages, but the flow of user actions, and I need to make my study questions more specific so the users follow the flow I have created in the prototype. I will be redesigning the app and prototype to match user expectations.
Revisions
Revisions
The app underwent a nearly complete redesign. The most noticeable change is the background color. Changing to a mostly white background gives all elements a cleaner look. The CoffeeHouse menu also received a new layout to provide larger images for users.
Pages were added to the prototype to add interaction that study participants asked for (such as on the Change Address page) as well as to add functions such as a timer to the Group Order.
Before second usability study.
After second usability study.
Revised High-Fidelity Prototype
Revised High-Fidelity Prototype
CoffeeHouse Screen Recording.movWatch the final product in action!
Accessibility Considerations
Accessibility Considerations
Color: Color contrast of back and foreground colors was checked with WebAim Contast Checker and color is not used as the sole indication of interactions.
Text Hierarchy & Iconography: Text headings are labeled in hierarchical order and font sizes follow the hierarchy. Icons are universal so users can expect to know the behavior/outcome of interacting with them and/or icons also have text aids.
Button Placement: I tried to place most needed buttons within thumb reach of the bottom of the app page.
Alt-Text: I would expect all photos to have alt-text if this app were fully functional.
Conclusion
Conclusion
Takeaways: Impact
Takeaways: Impact
Participant: “I wish I could order coffee with an app like this here in town!”
Takeaways: What I Learned
Takeaways: What I Learned
The entire process of UX Design from idea to high-fidelity prototype.
How to use Figma & Figma Design Systems.
How to create a UX Design case study and portfolio.
That the prototypes need small interactions within pages to work, not just broader page level interactions. And that the usability study task statements need to be precise and match the interaction that will happen with the prototype.
That despite your best efforts to create a perfect product, your usability study participants will point out ideas you hadn’t thought to include in the design.
Next Steps
Next Steps
If I were to continue this project I would...
Conduct another Round of Usability Testing to validate if user concerns have been effectively addressed or if another iteration is necessary before the design could be handed off to a developer.
Add pages for the About Us section of the app that the design appears to link to from the Home page.
Incorporate more of the ideas for increasing and maintaining loyalty of clients that I came up with during the “Crazy 8’s” exercise.
Page updated
Google Sites
Report abuse