Starbucks POS Redesign
A personal project in which I redesigned the Item Availability Button within Starbucks’ POS (Point of Sale) system to equip its users with a more accurate, streamlined interface.
Tools & Tasks: Figma, user flow, user research, journey mapping, prototyping, UI design
Role: UX Designer
Duration: 5 months
Project Overview
This project explores Starbucks’ POS system and its pain points. Regularly experiencing its drawbacks as an employee inspired me to reevaluate the design. I relied on user research and feedback to develop a solution that improves usability while reducing the margin for error.
Project Focus: Item Availability
The item availability functions allow users to keep tabs on which items are still available to sell within the store.
Why Redesign?
The touch screen POS system includes several pages of buttons for food and beverages. While comprehensive, it requires multiple steps to complete simple tasks, causing constant frustration for users. Improving the interface is necessary as it’s the most crucial component of maintaining the store’s rhythm and efficiency.
Problem 1:
There are two separate item availability functions
To change an item’s status, the user must manually update both functions. This leaves plenty of room for error if either is overlooked.
Problem 2: An item count feature currently doesn’t exist
Since the POS doesn’t include this feature, users are required to regularly count and maintain a hand-written record of remaining items.
“The POS is the most crucial component of maintaining the store’s rhythm and efficiency.”
User Flow
To understand how users interact with the POS, I first identified the primary audience and its main goals:
Who Is the User?
The user, a.k.a the Starbucks employee, regularly utilizes the POS to input new orders, accept payment, etc.
User Goals
Quickly update the item status
Easily view an item count for each product
Reduce the number of returns and exchanges
User Flow: Two Different Functions
There are two different item availability functions and serves a unique purpose during the mark out process:
1. Mark In/Mark Out Section
The user can change the item status to available or unavailable, updating the system for the Starbucks mobile app.
2. Item Availability Button
The user can mark items as available or unavailable on the home pages, which serves as a visual reminder when placing new orders.
“My goal was to merge the item availability functions into one convenient location for more streamlined, accurate user interactions.”
User Research
I interviewed three coworkers to gain insight as to which item availability function would be easier to use overall. My goal was to merge the two functions into one convenient location for more streamlined, accurate user interactions.
“If the item availability functions were merged into one location, would the Mark In/Mark Out Section or the Item Availability Button be easier to utilize?”
Bray: “Definitely the Item Availability Button. It’s easier to find since I’m using it all the time.”
Erik: “The Mark In/Mark Out section because it gives you more details on non-POS items, like packed cookies and granola bars.”
Tara: “I think the Item Availability Button since going through here [the button pages] I know where everything is. It’s all muscle memory.”
Interview Findings
After evaluating user feedback, most participants found that the Item Availability Button would be fastest and most convenient. Carefully considering this research helped me decide on this location to start building my prototypes.
Journey Map
The next step I developed a journey map to visualize how users could potentially interact with the new button prototype. I mapped out key touch points to help define the item mark out process.
Sketches
To begin the ideation phase, I sketched various layouts with 3-4 item status buttons. As I sought user feedback, it became clear that the surplus number of buttons caused confusion. I continued to refine my designs by identifying key user interactions, defining the hierarchy, and adding visual interest.
Draft 1: Featured three item status buttons and the Item Count.
Draft 2: Added another item status button and the Item Count update.
Draft 3: Defined the hierarchy and added the sandwich image.
Draft 4: Condensed the item status buttons and added a category tag.
The Solution
After months of prototyping and seeking feedback, I finalized the button redesign to offer a more comprehensive and effective item markout experience.
Before
The current design is rigid and dated. It only allows items to be marked as available or unavailable without showing the status or mobile orders.
After
Rather than utilizing two separate item availability functions, the redesign prototype allows users to mark out items and turn off mobile orders in one streamlined location. To quickly view an item’s status, the color coded buttons and item count feature allow users to conveniently keep track of items within the store.
The green button shows that an item is readily in stock.
The orange button warns users that quantities are running low.
The red button confirms that an item has been sold out.
Quick Item Count Updates
Easily update the item quantity and record a timestamp to inform all users of items remaining in the store.
Simultaneously Update and Turn Off Mobile Orders
Quickly update the item status while switching off mobile orders to maintain accurate ordering.
Want to see the POS redesign in action?
Design Critique
User Feedback
In order to determine whether the prototype is a faster and more convenient solution overall, I presented my work and asked the following questions:
“At a glance, can you see the item status right away?”
Bray: “Yes, I can see the item status buttons right away.”
Erik: “Yep it’s easy to see.”
Tara: “Yeah it’s pretty clear.”
“Do you think the Item Count feature is an added improvement?”
Bray: “In my opinion, you don’t need the Item Count. It’s too difficult to update various items being exchanged in the store.”
Erik: “Yes, I think so.”
Tara: “Yes, I like that we can see the details for the entire store.”
“Compared to the current Item Availability Button, do you think the new prototype is easier to use?”
Bray: “It’s much easier because you only need to go to one location, which saves time and is better for new partners to use.”
Erik: “Yeah it’s more convenient merging the two locations into one.”
Tara: “Yes, since it’s in one spot, and you also have more options for marking an item out.”
Feedback Findings
After evaluating the user feedback, it’s clear that the redesign prototype is a considerable improvement due to its convenience and quick access. However, Bray mentioned his concern about the Item Count feature, which I agree will require further investigation.
Constraints
While seeking user insight proved valuable for measuring the effectiveness of the prototype, there were several constraints that impacted the feedback I received:
Limited Participants
Due to the lack of time and opportunity, I was only able to interview three coworkers. It would have been helpful to gather feedback from at least 5-8 participants for a more well-rounded perspective.
Lack of Access
Without having access to or understanding the POS system software, my prototypes are based heavily on user feedback. Would engineers feasibly be able to develop them?
“After evaluating the user feedback, it’s clear that the redesign prototype is a considerable improvement due to its convenience and quick access.”
Reflection
This project stretched my critical thinking and creative problem solving as both a designer and a user. My prototypes, while an improvement from the current design, still require more fine tuning to ensure an efficient, user-centered interface.
Next Steps
1. First, my goal would be to test a digital prototype to understand how users interact with the interface and highlight existing pain points.
2. After testing, I would meet with a team of software engineers to understand the development process and make necessary adjustments to my prototypes.
3. Through careful research, it became clear that users find the Item Count feature desirable. However, its highly inconsistent nature presents a tough challenge. I would further investigate this problem area to create as accurate a solution as possible.
Note: The POS photos and Roasted Ham & Swiss sandwich image were used with permission and are property of the Starbucks Corporation.