STARBUCKS
MICRO SITE DESIGN
Abigail Mumma | SMAD 308 September 10, 2018
ANALYSIS Each year as college students become more engaged with technology and the economy, the ability for companies to reach a young demographic becomes more crucial. A micro site can be a unique way for brands to cater to the narrow interests of collegeaged consumers. Even though young adults may not have as much financial independence as older demographics, a micro site can entice them to become customers by using targeted strategies.
students are likely suburban or urban, and have busy lives between class and extracurriculars. They likely use some forms of social media, and use a smartphone as one of their primary internet-connected devices. The current site has a lot of good features, like the rewards program and online access to see your card balance. However, the site is very text heavy, especially the navigation. Clicking through the drinks menu seems daunting,
The aim of the Starbucks micro site is to engage college students with an experience that helps them explore and enjoy the Starbucks menu, as well as provide incentives for customers to keep returning. I selected Starbucks as a good candidate for a micro site because of their popularity with college students. In recent years, Starbucks has become increasingly focused on developing their online presence, with sweepstakes on their website, a youthful instagram, and a popular mobile app. Aside from being college students, the audience for this site would largely focus on students who have at least a moderate amount of disposable income to spend on their coffee. These
not enticing. Even though Starbucks is known for its seasonal drinks, these aren’t promoted on the user’s dashboard, only under the drinks menu. Design wise, the site is clean and calm, which fits well with the Starbucks brand, but a micro site could be a good invitation to use pops of color to make the user’s experience more exciting. College students are a visual-focused and social audience, and the design needs to reflect that.
CURRENT SITE
DESIGN The fonts I selected were based first on the established Starbucks font. Freight Sans was the closest I could find to the font they use. I’ve also included Chippewa Falls to use as an accent for headers. Chippewa has a more retro, hip vibe than a standard sans serif, and the hand-drawn characteristics help to add some personality to a website that can seem overwhelmingly corporate.
THE QUICK BROWN FOX The quick brown fox
Freight Sans Pro Bold, Book
For colors I wanted to continue to build brand loyalty, but also stretch out into a space that felt more stylish and appealing to a younger crowd. Starbucks green is the standard corporate color, Rewards Gold mimics the color scheme they use for their rewards program, and Collegiate Pink gives a playful and enthusiastic vibe, drawing from the popularity of millennial pink.
Starbucks Green R:50 G:108 B:57
Rewards Gold
The Quick Brown Fox
R:155 G:134 B:45
Chippewa Falls Regular
Collegiate Pink R:232 G:154 B:161
STARBUCKS CORE VALUES • Creating a culture of warmth and belonging, where everyone is welcome. • Acting with courage, challenging the status quo and finding new ways to grow our company and each other. • Being present, connecting with transparency, dignity and respect. • Delivering our very best in all we do, holding ourselves accountable for results.
I’ve chosen to include the logo both regular and reversed out because of the preference in younger generations towards reversed text. Because Starbucks is already an established brand among college students, the emphasis is less on brand consistency and more on brand image. Much of the Starbucks core values align with the interests and values of college students, the perception though is that Starbucks is another corporate coffee chain.
INSPIRATION 1 2
The first website I visited was not actually a site, but rather the Spotify desktop app. Spotify is already pretty popular with college students, and has made some clear functionality and design decisions to keep their audience happy. The text is nearly all reversed and in a clean sans serif font1, giving the interface a sleek and modern feel. Despite being a platform for streaming non-visual content, Spotify still makes an effort to add cool graphic elements.
The curated playlists all include a related image card2 that allows the user to browse visually as well as textually. What I found most noteworthy about the Spotify app was not its visual design, but rather its interesting functions. Spotify creates curated playlists based on moods, genres, and the user’s own listening history3. This way the user can browse and discover new music based on characteristics they like in the music they already listen to.
4
Another function that stood out to me immediately was the “Friend Activity” sidebar4. This displays what your friends are listening to at the moment or within the past day. Since our decisions are often molded by the people we surround ourselves with, the listening habits of the user’s friends could be a useful function in finding music that appeals to them. Most importantly though, this function doesn’t need the user’s input to work as it should. Having a huge internal social media where users could post statuses and like other people’s content would be way too ambitious and likely to be ignored by most users. Instead, the sidebar automatically updates whenever one of your friends plays a new song, requiring no effort from the user at all.
3
INSPIRATION CONT. The second website I visited for inspiration was the Apple Education micro site. This site is specifically targeted towards students, and most heavily towards college students. They receive special discounts, and the content is catered towards the products a college student would be most likely to buy. In terms of design, I liked the simple, flat look that the site has. It feels clean and simple, but not boring. The small pops of color5 give the pages more personality, which is likely to appeal to a younger demographic. Nonetheless, you don’t feel as if you aren’t on an Apple website. They do a good job
at keeping the website interesting and fresh-faced, but not ditching the branding altogether. The function of the College Essentials page6 was very similar to something I was imagining for an internal Starbucks page. Because Apple has so many professional products that are way out of the need and price range of a college student, this function makes shopping simpler. In addition, the user isn’t bombarded with $2000+ desktop computers that would make the site feel out of their price range. Instead, prices are displayed with “Education Pricing” which students can receive with a valid student ID.
Key Points: • Clean sans-serif fonts and reversed text • Visuals take priority over copy • Users like to see what other users like to do • Pops of color in a clean look • Curated context lists for users
USER STORY GRIDS Habitual
Irregular
Habitual
Get rewards for buying frequently
Suggest small changes to your regular order
Suggest drinks you may like based on your history
Get rewards for buying frequently
Suggest drinks you may like based on your history
Browse by flavor profile to find new drinks
Browse based on flavors, moods, colors
Suggest drinks based on friend’s activity
Get a random drink
Picky
Flexible
See your mostpurchased items
Split costs with friends
Browse the menu based on flavors
See what other people around you are drinking
See the most popular drinks
See suggestions based on your interests
See what friends are drinking
See what friends are drinking
See suggestions based on your history Get rewards
Irregular Individual
Split costs with friends
Social
Jen Dillmore The Workaholic
Access Points: Iphone, Macbook, Ipad Buying Frequency: Every morning Favorite Drink: Hot medium roast with cream Other Interests: Business honor society, student government, going to the gym
Payton Bridges The Indecider
Access Points: Android, library computer Buying Frequency: Occasional Favorite Drink: Changes every visit Other Interests: Jazz ensemble, scriptwriting, road trips, hiking
Lauren Shaw The Social Butterfly
Access Points: Iphone Buying Frequency: Most days Favorite Drink: Iced Caramel Macchiato Other Interests: Alpha Phi Mu, online shopping, spending time with friends, social media
MAJOR FEATURES Drawing inspiration from the “College section of the Apple micro Curated Suggestions Essentials” site and the curated playlists on Spotify, a major feature of the Starbucks college micro site will be handpicked coffee suggestions for college students. The functionality will be much more like the Apple site, where the lists remain fairly consistent and won’t require a lot of updating unless new products are added. Some examples of curated lists would be afternoon pick-me-ups, dairy-free alternatives, and trending on college campuses. Starbucks users who are logged in will be able to see what their friends are drinking, Friend Feed much like how the Spotify listeners in my inspiration piece can see what their friends are listening. This is a great way for students to look for something new to try, and enforces the perception that the users friends all drink Starbucks regularly. Part of this ‘friend’ functionality is also the option to buy your friend a coffee. Registered Starbucks users can send the money for their drink of choice to their friend, either as a gift or as payment for the friend buying them coffee. Starbucks already has a rewards program College Star Rewards based off of ‘stars’ which are collected when the customer buys Starbucks products. However, it takes earning 125 stars, or around $60 to get a free drink currently. I propose a college student program that follows the same premise but only makes the customer reach 100 stars for a free drink instead of 125.
WIREFRAMES HOMEPAGE DESKTOP
WIREFRAMES CONT. INTERNAL DESKTOP
WIREFRAMES CONT.
HOMEPAGE AND INTERNAL MOBILE
MOCKUPS
HOMEPAGE DESKTOP
MOCKUPS CONT. INTERNAL DESKTOP
MOCKUPS CONT.
HOMEPAGE AND INTERNAL MOBILE