Project for U.T.N UI Design Course
Role: UX/UI Solo Designer
Date: August - October 2023
Starbucks Mate
As part of its Ready to Drink line, Starbucks is launching a new product on the South American market: Mate, an energy drink. A website was designed to accompany the store launch of the product and give the customer the possibility of knowing more about this new product.
Starbucks is a company that was founded in 1971, selling freshly roasted coffee beans, tea and spices in Seattle. Today they have more than 36,000 coffee shops around the world and serve more than 30 beverage blends with coffee, tea and offer fresh food, such as sandwiches and salads. The concept of their cafés is based on warm, inviting environments, meeting places and a design that can connect people and inspire.
Among its products, coffee and coffee drinks are the most popular. In recent years, Starbucks created new products and variations, from home-brewed products to Ready To Drink (RTD) beverages, ready to drink at any time.
As part of its Ready to Drink line, Starbucks is launching a new product on the market: Mate, an energy drink aimed to the South American public. In this project, the process will be shown and the decisions made to create a web platform to support the launch of the product on the internet will be explored in depth.
The Project
For this project, the choice was made to create a website.
A website was considered a viable option for an established brand such as Starbucks. Its products are primarily marketed in physical spaces, being the web support used to share and extend information about concepts or products that are about to be launched or that are already in the shops.
One of the advantages of this medium is the possibility of presenting and extending product information in a dynamic and friendly way for the user who wants to know more. A website is also an easily accessible medium with a wider reach to the general public. It requires less effort and commitment from the user, as opposed to downloading an app.
Problem
The brand wants to extend their new product's launch experience to the online space.
Goal
Crafting an online framework where people can know more about the new product, discover more products from the brand and find stores to buy them
Solution
Create a website that shares information about the products and stores in a dynamic and accessible way for all audiences.
Research
In order to learn more about the brand and its customers, research was carried out using public data on the internet. This research yielded the following data:
Based on these data, a user persona was devised.
UX Writing
For this project in particular, a focus was made on UX Writing. The voice and tone of Starbucks were analysed, in order to create texts that would consistently fit the style of the company and reinforce the communication with the customer.
Starbucks’ voice is distinctively:
The use of both functional and expressive tones allows the brand to create more space for relevance, connection and joy.
For the introduction of this product, the expressive and functional voice characteristic of the brand will be maintained, creating texts for the website that range from enthusiastic to informative. As the website will have a diverse audience, the texts will not be personalised. It was decided instead to create texts that appeal to the closeness with the user: casual, simple and friendly. We researched and took as a reference texts from the brand's websites aimed at the Argentinean market.
Texts taken from Starbucks.com.ar and Starbucksathome.com/ar/
A tone map was created to differentiate the tones from each section of the website
The first section of the Home page is aimed directly at getting to know the new product. The rest of the sections direct the user to learn about the other products and to find a nearby shop where they can purchase or enjoy them.
For this purpose, texts were used that speak directly to the user, inviting them to try, to discover the product, to explore more products and to find their shop. Using verbs in the imperative affirmative to reinforce a casual, informative and enthusiastic tone.
The About the product section is the space where the user can find out a little more information about the brand's new product. For this, texts were created to evoke sensations with key words (energy, refreshing, enjoy) in a casual, friendly and expressive tone. For the descriptions, an informative tone was used but always keeping it casual.
The Products section aims to present and inform about the products that the user can buy in the shops. In this case the tone is more informative and the verb to buy is used in the present infinitive for the CTAs. The only product that has a short description is the one in the hero section. The rest of the products only have a subtitle.
The CTAs in this case lead the user to find a shop where the product is available.
The Stores section does not contain much text, although in this case a subtitle was added to encourage the user to look for their closest store and make them feel close to the brand.
Wireframes
Branding & Design
To keep the design consistent with the well known Starbucks look, resources from their brand guidelines were implemented.
When creating the texts and displaying them on the web, SoDo Sans typeface, a sans serif typeface family, was chosen. It is part of the Starbucks brand manual and is versatile, usually used for body copy.
SoDo Sans is a friendly, legible typeface and, according to its creator Rob Stanton, plays the role of 'sans serif corporate identity', with enough differentiation that a customer can say "ah yes, hello Starbucks" when they see this typographic voice in an advertisement or menu.
In order to produce texts that matched the voice and tones of the brand, the decision was made to use this typeface to give visual recognition to the user: if the functional and expressive voice of Starbucks is perceived when reading the texts, the SoDo Sans typeface reinforces this identity in a visual style.
A moodboard was created to conceptualise and show the aesthetics of the brand and the visual approach around the project.
The product “Starbucks Mate Energy Drink” graphic design and identity was also part of this project. Full breakdown of that process can be found on this page.
UI Kit
