Starbucks Order Status Board
TLDR; Starbucks was launching a new Mobile Order only store format. This new format was intended to support high-traffic areas with a predicted 70+ mobile orders at any time, while also averaging a 15-foot lobby area. To minimize crowding near the hand-off area, we developed a digital display to inform customers about their order status. The design integrates with the store, is readable from 15 feet, notifies customers when orders are ready, alleviates anxiety about order status, and helps reduce congestion.
​
Duration: Winter 2019
Role: Lead Product Designer
PROBLEM
As this was a new store format, there was no type of store like this before, and no previous iteration of a screen like this. This new store format was intended for high traffic areas like Penn Station in New York City. These stores would have small lobby areas and would be Mobile Order only, therefore the inside of the store could become packed with people quickly which could make it difficult for customers to be able to pick up their orders when their order is ready.
​
Success metrics
​
-
Readable from the order side of the store
-
A reduction in clusters around the pickup counter
-
A reduction in customer time spent in the store once order is ready
DESIGN GOALS
-
Readable from 15 ft away
-
Be AAA accessibility compliant
-
Leverage the set store color palette
-
Instill confidence in screen accuracy
-
Create calmness even when there is a crowded store
-
Create a color palette that is scalable with the creation of more stores
IDEATION
We aimed to leverage the brand color palette, ensure AAA compliance, and create scalable color variations for different store versions.
The first step in solving the problem was identifying colors from the store design and brand palettes. We determined the colors needed for text, background, and a ready status. After testing these colors for AAA compliance with WebAIM, we narrowed our options down to just a few.
Limited color choices restrict screen scalability across stores. To solve this, we brainstormed ways to expand color palettes while maintaining AAA compliance, testing filled buttons, outlines, and text color changes. Increasing font size and using uppercase lettering also helped enhance color options while ensuring compliance.
We finalized three color palettes for the screen: dark, light, and one resembling our in-store menu boards. All are AAA compliant and visible from 15 feet away.
SOLUTION
The final design featured a timestamp, store name, customer’s first name and last initial, along with 'ready' and 'submitted' statuses. The timestamp assured customers of constant updates, while the store name confirmed their order was submitted to the correct location. Including the first name and last initial helped customers quickly find their order status while maintaining privacy. We sorted the list alphabetically for scannability, and the 'ready' state contrasted with order elements to enhance readability from a distance.
Pagination was a key aspect of this project. With stores having anywhere from 1 to over 70 orders at times, we needed a solution that would look elegant and calming in both scenarios. We explored scalable text that adjusted based on the number of orders, but ultimately, it appeared off-brand and off-centered. We inevitably landed on dynamic padding, where the spacing between the names adjusted based on the number of
A strong animation strategy was crucial for achieving calmness. This required new names to appear more slowly than the 'ready' status to prevent overwhelming movement on the board (see video above).
names on the board. This provided more breathing room during low-volume times and remained calming during high-volume periods.