Starbucks
Starbucks
Starbucks
Starbucks' in-store experience feels personal, but its mobile app feels static and transactional. Adding motion to the order-to-purchase flow brings the brand's personality back, guiding attention and reducing purchase friction.
Category
Category
Client
Client
My role
My role
Product Concept
Product Concept
Timeline
6 weeks
Motion Audit
Loading Screen
The loading screen features a pour-over sequence as a metaphor for the company’s dedication to deliberate, hands-on craftsmanship and the art of coffee making.
Reward Announcement Screen
The 100-Star reward animation was designed to spotlight the experience of earning and enjoying a handcrafted beverage. By framing the scene with coffee plants and beans, the design ties the reward back to the company’s roots in high-quality coffee and intentional craftsmanship.
Home Screen
The home screen opens with a handwritten-style greeting, designed to evoke the warmth and personal touch of a note from a barista. This small detail brings the brand’s in-store experience into the digital space, creating an immediate sense of familiarity and connection. I also added a moving gradient to the purchase-related buttons in the Figma file to attract users’ attention.
Custom Order Screen
I wanted users to see their order come to life as they customized it. To achieve this, I replaced the full-screen overlay with a dynamic slide-up panel that updates the product image in real time, creating a more intuitive and visually connected experience.
Review Order Screen
I added animation and visual emphasis to the coupon area to capture attention and guide users toward active promotions, transforming a static element into an engaging moment in the experience.
Confirmation Screen
I designed an animation to visually communicate where an order is within the preparation process. In the case study, the sequence plays out at an accelerated pace, but in practice, the cup moves to the espresso machine once the barista takes the ticket and remains there until the drink is marked ready.
Pay Screen
I introduced subtle steam animation on the point-of-sale screen to infuse warmth and motion into the checkout experience, transforming a routine transaction into a brief, rewarding moment that reflects the brand’s spirit of hospitality.
Main flow
Motion Audit
Loading Screen
The loading screen features a pour-over sequence as a metaphor for the company’s dedication to deliberate, hands-on craftsmanship and the art of coffee making.
Reward Announcement Screen
The 100-Star reward animation was designed to spotlight the experience of earning and enjoying a handcrafted beverage. By framing the scene with coffee plants and beans, the design ties the reward back to the company’s roots in high-quality coffee and intentional craftsmanship.
Home Screen
The home screen opens with a handwritten-style greeting, designed to evoke the warmth and personal touch of a note from a barista. This small detail brings the brand’s in-store experience into the digital space, creating an immediate sense of familiarity and connection. I also added a moving gradient to the purchase-related buttons in the Figma file to attract users’ attention.
Custom Order Screen
I wanted users to see their order come to life as they customized it. To achieve this, I replaced the full-screen overlay with a dynamic slide-up panel that updates the product image in real time, creating a more intuitive and visually connected experience.
Review Order Screen
I added animation and visual emphasis to the coupon area to capture attention and guide users toward active promotions, transforming a static element into an engaging moment in the experience.
Confirmation Screen
I designed an animation to visually communicate where an order is within the preparation process. In the case study, the sequence plays out at an accelerated pace, but in practice, the cup moves to the espresso machine once the barista takes the ticket and remains there until the drink is marked ready.
Pay Screen
I introduced subtle steam animation on the point-of-sale screen to infuse warmth and motion into the checkout experience, transforming a routine transaction into a brief, rewarding moment that reflects the brand’s spirit of hospitality.
Main flow
