Overview
Philz Coffee, located in San Francisco, California, is a renowned coffee company that offers a diverse range of specialty blends in both hot and cold varieties. With the aid of their mobile application, customers can conveniently order their preferred items for pickup. Furthermore, customers have the flexibility to view the menu online and manage their accounts and payment methods as needed.
Roles:
UX Designer, UI Designer, UX Researcher
Tools:
Figma, Zoom
Process:
5 day Sprint
Target Audience:
Coffee drinkers
Deliverables:
Competitive Analysis, User Flow, Sketches, Wireframe, Low-fidelity Prototype, Hi-Fidelity Prototype
Constraints:
Design sprint moved quickly, which was challenging in the beginning to find time for client meetings
I had to make sure to keep to Philz’s branding and color. Since the font is unique to Philz so I had to find a comparable font style.
The Challenge
This project derived from a personal visit to Philz Coffee after receiving an e-gift card as a gift. As a customer, I wanted to use my gift card as a preferred method of payment, which required me to read the 16-digit number out loud to the employee or display the phone to them. This process prolonged the checkout experience.
Philz Coffee customers are looking for a simple and quick way to use their gift cards in-store to purchase their coffee so that they can move on with their day.
How Might We…
Improve a user’s gift card payment experience when making a purchase in-store at Philz Coffee?
Solution
I developed a redesign of the gift card payment screen to offer users a swift checkout process. This redesign not only streamlines the user's experience but also simplifies the Philz employee's task by eliminating the need to manually enter the 16-digit code into their checkout system. The introduction of a QR scan code reduces the likelihood of human error, boosts productivity, and provides a more user-friendly experience.
Day 1: Kick off by Empathizing and Understanding
I outlined how I would tackle the 5-day sprint and kicked off my research by empathizing with users. I reached out to 3 individuals who enjoy drinking coffee and have ordered coffee from a mobile device.
User A
-Payment screen lacking compared to UX on other screens
-Found it “unusual” that the UX was not developed for this form of payment.
User B
-Complimented on UI of coffee orders.
-Wasn't sure how to proceed in making a coffee purchase.
-Found it confusing that she'd have to read the gift card numbers out loud or present the phone to the Philz employee.
-Found it “unusual” that the UX was not developed for this form of payment.
User C
-Liked gift cards could be stored digitally but found it odd there wasn't a barcode scanner to process the payment.
-Asked if Tap and Pay was an option.
From the interview, I learned that users expect a simple and quick in-app experience.
User Flow Assessment
By examining the user flow within the Philz Coffee mobile app, I evaluated the screens, actions, and decisions that users must navigate to achieve their objectives. Based on this evaluation, I constructed a user story that defines the user's objective and outlines the steps they must take to accomplish it within the app.
Day 2: Research + Sketch
With the problem more clearly defined, I conducted research by performing a competitive analysis and sketching possible design solutions.
Philz Coffee, Starbucks, and Peet’s Coffee
Discoveries
Starbucks and Peet's Coffee offer customers the ability to scan digital cards/gift cards in-store and transfer gift card balances to their digital cards. This feature eliminates the need to manage multiple cards digitally. In contrast, Philz Coffee does not have the capability to scan gift cards in-store. Only when placing an online pickup order, customers can use their gift card balance for payment.
I found it peculiar that the Philz Coffee app did not have a feature to scan gift cards in-store, especially considering that the UX was optimized for online pickup orders. Introducing a feature similar to that of Peet's Coffee or Starbucks could enhance business efficiency and reduce customer pain points.
Furthermore, I examined the general reviews of the Philz Coffee mobile app and noticed that the average rating was a 3.1. It is evident that the app requires some enhancements.
After analyzing the feedback, customers are expressing their dissatisfaction with the app's user experience, resulting in confusion and frustration.
Mobile App Ratings and Reviews
Crazy 8’s Sketching Activity
After exploring designs online, I generated possible solutions by sketching and performing a quick Crazy 8's activity. It became clear that many mobile apps offer a "scan to pay" method, so I decided to move forward with this idea.
I created several design solutions, including a QR code payment and gift card barcode scanner. The QR code offered a simple user experience while also adding a level of security by generating a unique code for each user.
Day 3: Decide
On Day 3, I referred back to the problem and reviewed possible solutions to resolve the problem.
I revisited the How Might We statement to ensure that the design solution I selected for prototyping would provide a more streamlined experience for the user. Despite there being several ways to handle payment methods, it was crucial to consider the user's overall experience. This involved going back to my user interviews, which revealed that the user's experience was generally positive but needed improvement on a particular screen.
Placing myself in the user’s shoes
To gain a deeper understanding of the user experience, I utilized a storyboard activity to help me envision the user journey from start to finish.
This allowed me to create a visual representation of the improved experience a user would have when using the QR scan feature.
Day Four: Prototype
Wireframing mobile application with QR scan
In order to redesign the payment method screen, I began by sketching wireframes of each screen the user would encounter on the mobile app.
This redesign eliminates
the need for the customer to recite a 16-digit gift card number.
the need for the employee to input the 16 digits.
possibility of error and increases productivity rates.
Low Fidelity Prototype
High Fidelity Prototype
Was the user’s experience simplified?
After creating the prototypes, I conducted two usability tests using methods similar to those in my user interviews. This allowed me to compare and contrast the feedback from the testers.
Results:
Both users had a friendlier experience with the QR scan code.
Users felt like this was a feature that would make the in-store purchase process quick and easy.
Users wanted a scan-to-pay button.
Concerns + Questions:
In the usability test, one of my testers asked, “How would this look different if I had multiple gift cards?”
This was a good question! When I was coming up with design solutions, I actually thought about this issue as well. At first, I thought about having multiple pages on the QR code for users to select which gift card to use. However, a better solution would be to allow users to consolidate their gift cards into one account, so they can manage them more easily.
Day Five: Review Feedback + Final Revisions
On the final day of the design sprint, I took some time to review feedback and made final revisions.
Usability Feedback:
A user indicated he was looking for a “scan to pay” button on the home screen.
After considering the user's needs, I wondered whether a "scan-in-store" button or a scan icon on the navigation would improve the user experience more, or possibly both. I decided to explore this idea further and created a "scan in-store" button that floated on the homepage. This made it easier for users to quickly access the option to scan their gift card in-store to make a payment without having to navigate through multiple screens.
Now that a user has two possible paths to accomplish their goal, I revisited the user flows I developed and designed another pathway to illustrate the user’s journey.
Interactive Prototype
Possible Impacts
User Engagement
Users are more inclined to use the specific feature of the app
Increased Productivity
Spending less time to complete a task
Increase User Return Rates
Return rates will increase if users are able to accomplish the task
Improve App Rate Scores
App that is user-friendly would signal better reviews on the mobile app
CHALLENGES
Having testers lined up in advance is really helpful when doing usability tests. With the challenge of designing a prototype within 5 days, I didn’t allow as much time as I wanted to on my research.
I discovered there were layers to resolving this problem, such as thinking about what a user’s experience would be like if they had multiple gift cards to manage.
THINKING AHEAD
Diving into the app as a whole and uncovering the needs of the users with the pick up/order again features. From the research I gathered in the app store, it was clear there were some issues with the order again/pick up features to the app.
Taking time to really understand where pain points and frustrations stem from, will help me as I continue to make improvements on this experience.