From Coffee to Energy

Designing Starbucks' Digital Presence for a New Product Launch

Product

Landing Page

Duration

2 months

Project Type

Case Study Concept

Design Software

Figma

Year

2022

Role

UI Designer

Introduction

I design the Starbucks web page to promote a new energy drink. The challenge consisted of conceptualizing the energy drink for the famous coffee chain, aimed at an adult audience in Argentina. The new product has to be promoted on the web page, so it has to respond to the look and feel of Starbucks and its current products.

Starbucks energy drink product cans showing different flavors

Tasks

To follow Starbucks guidelines I had to incorporate and balance the two main characteristics, the functional and expressiveness of the coffee chain.

Keeping in mind their values (craft, courage, results, belonging, and joy), I decided to use the concept of an energizing drink that is healthy and aimed at a relaxed and healthy public. For this, I did a benchmark to know what kind of energy drinks are in the market and how they promote them. The selected brands were ZOA and Celsius, both for a healthy and fitness group in different ways.

Once the energy drink was defined, I designed a new home page to promote the energy drink. For this project, I focused only on the desktop brake-point.

Actions

Understanding Fucntional vs Expressive

Starbucks' Creative Expression guidelines define their voice through two core principles: Functional and Expressive.

The functional aspect

Prioritizes intuitive information architecture and anticipatory design, ensuring customers can effortlessly navigate both physical and digital spaces to find products. Digital interfaces mirror in-store experiences through streamlined navigation and contextual prompts that guide users naturally toward their objectives.

The expressive layer

builds upon this foundation, transforming practical elements into memorable moments. Each interaction is crafted with purposeful language that balances brevity with warmth—from playful micro-copy on mobile notifications to carefully curated product descriptions. This duality creates a cohesive journey that begins with clear wayfinding and culminates inemotional resonance.

Define and research

The energy drink market is large and various, for this project I centered on two brands:

Celsius

Positions itself in the lifestyle-wellness category through minimalist design and transparent ingredient communication. Their sleek, silver logo and clean aesthetic suggest a premium supplement targeting those seeking sustained energy.

ZOA

Targets the premium fitness segment, leveraging Dwayne Johnson's brand to reach dedicated gym enthusiasts. Their marketing emphasizes clean ingredients and athletic achievement, focusing on the 'no pain, no gain' mindset of individuals committed to daily fitness improvement.

This analysis identified an opportunity

Health-aware consumers seeking sustainable energy without the intense fitness focus. This aligns with Starbucks' existing customer base and brand values, leading to my strategy of developing a refreshing, wellness-oriented beverage for consumers seeking a natural energy boost.

Proto persona and Moodboard

These elements establish the foundation for designing both the product and promotional website for the energy drink. With a clear understanding of the target user and desired aesthetic, we have a solid starting point for the design process.

Design System

Voice and tone

Based on Starbucks’ Design System and the audience for the new product, the voice and tone will be defined for:

1Fun, but not childish
2Direct, but not distant.
3Friendly, avoiding the excess of trust.

Tone map

This is a guide to get a better understanding of the time and place of how to talk to the user. place of how to talk to the user.

For example, on the home page , we can be more enthusiastic and friendlier, but in the payment check-out should be more serious because it is when the user is making an important movement that includes their own money.

Product naming

Keeping the functional part of Starbucks, so the user can find it with no problem. They should be clear and straightforward. Hence, the name for the new product is Energizer Starbucks.

There are four flavors on this trademark, following Starbucks’ expressiveness.

Berry Plus, Sweet Strawberry, Clockwork Orange, and Peachy Punch.

For each flavor, there is a reutilized cup as merchandising, a common strategy of Starbucks when they release a new product.

The names are in English because in Argentina are used like that, and it goes pretty well for the target audience.

Colour palette

Functional

Expressive

Typeface and icon family

SoDo Sans typeface

Tabler Icons

UI Kit

Celf app buttons and messages UI components

Web process

As with every project, the initial step involved creating quick sketches to explore design concepts, and then continuously improving the layout in order to reach the final screen. For this case study, I focused specifically on the product page, which serves as the primary subject of the design process.

The product page stands out as the most distinctive section of the website, functioning as the key marketing hub. The primary objective of this screen is to effectively showcase the product's nutritional value and highlight its core benefits. To achieve this goal, the design prominently features natural ingredients alongside theproduct itself, creating a visual narrative that communicates quality and authenticity to users.

Sketch

1st Wireframe

Final Screen

Prototype

Final thoughts and learnings

This project, though brief, provided valuable learning experiences. Having access to the Starbucks documentation created a solid foundation for my work and reinforced the importance of comprehensive style guides in design projects.

Drawing inspiration from Creative Expression principles, I meticulously documented how visual elements, voice, and tone would be implemented throughout the site. This attention to detail ensured consistency and cohesiveness in the final product.

The feedback from mentors and colleagues proved invaluable to this project's success. Gaining diverse perspectives on my work enriched both my creative process and the development of new ideas.