Brand: Year:
Starbucks 2024
Project Type: Role:
UX/UI Design Project Lead (Solo)
Overview:
As a partner at Starbucks for five years, I’ve experienced
firsthand the evolution of our customer experience initiatives.
While the app functions well, it doesn't fully capture the
essence of the Starbucks experience. This realization
sparked a desire to enhance the app's user experience,
particularly focusing on drink customization.
Research -
Starbucks Experience:
The Starbucks experience focuses on creating a welcoming environment where customers can enjoy high-quality coffee and food. I used these ideas/concepts as the vision for the whole project, if part of the app was not achieving this feel, I had to change/redesign it.
Initial Insights:
Upon reviewing the current app, I identified several key areas for improvement:
Visibility of Popular Drinks: Some of our most popular beverages are buried at the bottom of the menu.
Navigation Issues: The Cart button's placement above the bottom navigation bar reduces valuable screen space, while the top navigation bar has excess white space.
Complex Customization Process: The drink customization interface is overly complicated, with sauces and syrups split into separate sections despite both serving similar functions.
Design Focus:
The original idea was to redesign the entire app. After realizing that the customization needed the most help, the redesign approach shifted to focus on drink customization. Here are the key elements that define the design focus:
Aligning with the Starbucks Brand: Ensuring consistency with Starbucks’ established brand identity across all app interfaces.
Crafting the Starbucks Experience in the App: Enhancing the in-app user experience to reflect the warmth and personalization of the in-store environment.
Optimizing Drink Navigation: Improving the organization and accessibility of drink options for a smoother browsing experience.
Reworking Design Elements: Enhancing the layout with improved placement of location and cart features for better usability and flow.
Redesigning the Customization Experience: Revamping the customization process to offer a more intuitive and engaging user interaction.
Problem Statement:
The Starbucks app is an integral part of the company's digital experience, used by millions of customers to place orders and customize their drinks. However, while the app performs its basic functions effectively, it lacks the personalized touch that customers expect, particularly when it comes to customizing their orders. Popular drinks are difficult to find, the cart button's placement reduces screen usability, and the customization interface is overly complex with scattered options. These inefficiencies hinder the app’s ability to deliver the seamless, user-friendly experience that mirrors the in-store atmosphere, leading to frustration and potentially missed sales opportunities. The goal is to redesign the app’s drink customization and navigation to create a smoother, more intuitive user journey that better captures the essence of the Starbucks brand.
Design -
Wireframing:
I began by sketching wireframes for the existing customization page alongside my proposed redesign. This side-by-side comparison allowed me to clarify my vision and avoid unnecessary complications.
Prototyping:
Excited to move forward, I created a prototype that balanced low-fidelity and high-fidelity elements. Many of my initial ideas required only minor adjustments, such as optimizing item display from three to four items per row, and enhancing the user's ability to see more options at a glance.
Customization Redesign:
The biggest challenge was revamping the customization page. I wanted to replicate the in-store experience where customers feel empowered to personalize their drinks. I realized I needed to expand certain sections to convey a sense of "unlimited options" while maintaining clarity.
While Designing:
This project was a significant step forward in my UX design journey, marking my first major endeavor since earning my certification nearly two years ago. I explored multiple layouts and refined my approach with each iteration, only moving forward if a design truly added value. After each draft, I returned to my problem statement as a guide, ensuring that every design decision directly addressed the core issues. This iterative process deepened my understanding of UX principles and strengthened my approach to user-centered design.
User Feedback:
To gather feedback, I engaged family, friends, and colleagues, including store managers. Additionally, I tested the prototype with two individuals: Chandler, a back-end developer who is also a partner, and Joey, a frequent customer.
Chandler's Feedback: He offered constructive suggestions on the dropdown menu in the customization section. Additionally, chandler was able to point out some bugs such as UX shortcomings, such as clutter, muted type and an error with a dropdown menu.
Joey's Feedback: He appreciated the improved drink customization interface, noting, "It looks great bro! I like how the core changes and options are on the first screen without having to navigate through a ton of stuff. It gets a little confusing on the current app."
With this feedback in mind I knew that the direction of the redesign was in a great spot. The design was giving a better Starbucks experience.
Future Enhancements:
Throughout the project, I envisioned an additional feature: Community Creations. This concept aims to foster connection among customers by allowing them to share their unique drink customizations.
Community Creations would enable customers to discover and order popular drinks shared by others. This feature addresses the challenge of customizing drinks by providing tried-and-tested options. Inspired by our store’s weekly "Barista Pick," this addition would encourage customers to explore new flavors and build trust with our baristas.
Conclusion-
Conclusion:
Through this redesign project, I aimed to create a streamlined user experience that captures the heart of the Starbucks brand. By focusing on drink customization and introducing innovative features like Community Creations, I believe we can enhance customer engagement and satisfaction within the app.
Next Steps:
More Extensive Research: Expand user research to identify pain points from a broader range of customers for a more inclusive design.
Cohesive Iconography: Refine icons to create a unified and consistent visual language throughout the interface.
New Home Page Redesign: Redesign the home page to optimize the user journey and boost engagement.
Reflection:
Throughout this process, I realized the challenge of designing primarily with white and gray tones. Creating depth and visual interest without relying on a wide color palette was a rewarding test of my skills. I also enjoyed working within an established brand’s guidelines. While I typically thrive on selecting typography and color schemes, it was refreshing to engage with a project where those elements were already defined, allowing me to focus on enhancing the user experience within the existing framework.
