My goal was to redesign the user interface of the Starbucks website. I wanted to create a friendly and welcoming experience for users to order coffee and interact with the brand beyond the cafe. Starbucks are trying to be the home on the way from your own home to the office.
Challenges & Objectives
1. make the website feel less corporate
To accomplish this I would use brighter colors, shapes, and white space to let the content breath.
2. support the Starbucks brand color
The Starbucks brand color green is impossible to miss. It dominates when it is on the page, it took research and experimentation to determine the correct color palete to compliment it.
3. Add personalization
Lack of community features. Users should feel welcomed on the website and have ways to interact.
Competitor Analysis
The Starbucks brand focuses on making sure customers have a consistent experience whether they are using a phone app, the website or grabbing a coffee in person. I took time to study other coffee companies and how they lay out their digital presence.
Gregorys
Bold. Direct. Community.
1. Very Clear and simple layout. Little option to click something wrong on the front page. Pay, location, rewards, gift, order.
2. Bold, clear and scientific approach to layout.
Blue Bottle Coffee
Tranquil. Simple. Graceful. 1. Landing page has a news feed which immediately highlights the product.
2. Able to select a home location and have the app remember. This gives the app a little bit of personalization and you don’t have to select the location later.
3. Modifications for items on the Blue Bottle app don’t bring you to a new screen. They bring up an overlay.
Dunkin’
Energetic. Bright.
1. You don’t have to login to use the app. Landing page with promo items.
2. Simple menu layout.
3. Drop down menus for items modifications.
4. Pink color used to accent throughout, this highlights both things you can change about your order and selections that you’ve made.
Task Flow
For this redesign I focused on a single taskflow. The customer would start on the Homepage and navigate through choosing a coffee and then add it to their cart for purchasing.
Moodboard
Joyful, Smile, Clear, Enjoyable, Authentic, Hand Crafted
All of these words come to mind when I think of Starbucks and their total brand. I used them as inspiration when making the moodboard. I wanted bright patterns and shapes to highlight products. I also took particular notice of how you could frame sections of the design with white space to make sections of the product stand out.
Prototype
Landing page
Users are met with a custom greeting upon reaching the landing page. Below that is user submitted content.
The bright pink contrasts against the Starbucks green without detracting from the brand. All of this stands out because of the white space which leaves the content room to breath.
The hamburger menu has details about the currently logged in user and links to other parts of the website from the menu, rewards, their account or a way to find a location.
Finding a Location
Shades of the starbucks green are pervasive through the design and are seen here on the find a store page.
Once the user picks a location they see a picture of the cafe.
The Menu
Finding a drink
On the forfront of these pages are the product. The focus is all on them. The user can scroll on the menu to find different types of items. At the bottom of the site is their saved location info along with a bag showcasing how many items a user has added to their bag.
These pages also have breadcrumbs that lead the user back to the start of the menu.
The last menu page before confirming a specific item also displays the amount of points the user will get for purchasing it.
Product Display Page
Easy to digest information
These pages display the product in a bright appealing way. There is nutritional information about the product below. This page also gives the customer the opportunity to customize their drink.
The Add to Order button can be clicked to add the item to their bag.
Customizing Your Order
Add-ins And Flavors
Customizations are made within modals.
There are animated gifs of creamer being poured into coffee and cinnamon sticks bouncing to add movement to the page.
The desktop site uses the added room to display the modal and not hide the selected coffee instead only taking up a portion of the space.
Finalized Drink
Confirming your Drink
After the user makes changes to their coffee selection the graphic would update to showcase the product they will be ordering. In this case the coffee now has almond milk in it.
The stars have also updated based on cost.
Design System
To support the redesign I built a design system. By the end I had a large Figma page of dozens of components to reference when building new screens or trying to figure out how to structure a new part of the design.
The typeface chosen for this project was Lato. It is a warm and friendly san-serif that I thought would convey a sense of welcoming for the user across the entire website.
I've also included the entire color library I built for the redesign along with common icons buttons and other components used throughout
After redesigning both the mobile and desktop for this task flow I had achieved my goals.
1. Users are welcomed the moment they hit the landing page. 2. The primary brand colors are supported by new gradients and lots of white space to help the product and Starbucks brand shine. 3. Users have access to community features to develop a stronger relationship with Starbucks.
