Starbucks Assignment
Coffee Plantations — UX/Product Design Assignment
Vision & Scope
This is a design challenge I completed recently as a part of the hiring process at a fin-tech company.
The vision here was to have an option for the customers to support coffee plantations around the globe by purchasing coffee capsules from the Starbucks website. I was given the opportunity to create a section that allows the customers to do exactly that, by also keeping all the guidelines in mind and making it a simple/easy to navigate flow.
Success Metrics
Customer is able to easily choose their preferred coffee origin before purchase and is given the option to mix multiple coffee origins.
Customer is easily able to choose the number of capsules they wish to purchase.
Customer has the option to select the desired delivery time.
Design Approach
USER RESEARCH
Survey Insights:
Quick small group survey through Typeform —
Age group 25–45
50% were unlikely to purchase coffee capsules from a website, 30% were very likely, and 20% were neutral.
50% drink coffee daily, 30% often, and 20% once a week.
40% purchase coffee capsules occasionally, 20% monthly, 10% weekly, 30% never.
The factors that influence the decision to purchase coffee capsules: 70% quality, 20% flavour options, 10% customer reviews.
70% were aware of the environmental impact of coffee production, whereas, 30% weren’t.
80% were willing to pay a premium for coffee capsules that support sustainable coffee plantations, and 20% weren’t.
60% said it was very important for them to support coffee plantations from a brand when purchasing coffee beans or coffee capsules.
70% of them said they’d recommend coffee from a brand to support sustainable coffee plantations to others.
Comparative / Competitive Analysis
I looked at a few companies/brands that were already selling coffee beans and coffee capsules online to get some inspiration from their e-commerce site and how they promote the importance of coffee plantations.
CC Analysis Takeaway
Found some great inspiration from Reunion Coffee Roasters, they have the option to select from different coffee origins and the quantity a customer wants to purchase.
Nestle shows importance of sustainable coffee on their website when investing in coffee plantations.
Mountain View Coffee has a PDF list of coffee origins to choose from.
Steamed Dream Coffee and Nespresso both have a clean and simple e-commerce page for purchasing coffee capsules. Whereas, Kurig and Invigo coffee’s page had a more basic layout.
Info on the L’OR website was a bit confusing and hard to navigate, too many options, but they did emphasize on sustainability.
User Persona:
User Stories:
When I purchase coffee capsules, I want to understand the product, so I can decide how it relates to my needs and be able to select quantity before purchase.
When I’m ready to place an order, I want an easy way to select different coffee origins, so I can mix and match them before the purchase.
When I consider buying coffee capsules or invest in coffee plantations, I want to be able to choose how long I’m going to wait until delivery, so I can make an informed buying choice.
Defining the Problem
"User has difficulty making a decision to purchase from different coffee origins, and isn't able to fully understand how they can support coffee plantations because of so many given options."
PLANNING
Customer Journey Map — Future State:
User Flow
DESIGNING
Ideation
Once I had a clearer understanding of the problem, I started off with low-fidelity wireframes before creating a high-fidelity wireframe to highlight and prioritize the following elements:
The amount the customer is willing to invest in the coffee plantations/ capsules.
Source of payment selection for the customer when making a purchase.
Terms & conditions that need to be approved before purchase.
BUILDING
Wireframes:
Below is the page when a customer selects the “Shop” tab from the main navigation, from there they can easily select the coffee origin when choosing to buy coffee capsules. They also have the option to customize the capsules, select quantity and waiting period, and then they have the option to either make a one-time purchase or subscribe before they agree to Terms & Conditions of the purchase. This design would be prototyped in future and then later go through stages of moderated or unmoderated usability testing with the target audience.
Style Guide:
Elements used from the Starbucks library:
Typography: SoDoSans
Colours: Accent Green — #00754A, Starbucks Green — #006241, Cool White — #f9f9f9, True Black & True White.
Full Width Layout
Components: Card, Select, Check box, Radio buttons / Expanders, Info icon, links, Filled/positive buttons, Footer.