Case Study | Yoghurt Shoppe — eCommerce Website
Yoghurt Shoppe is a 45 years old organic yogurt producer entering the online retail space.
The advance track UX/UI assignment from the DESIGNATION program is an individual brand building exercise. The challenge for this project is to create a digital eCommerce site given the following restrictions:
- The copy and content are not provided
- The only visual assets that can be used are the 12 images provided
- The brand must feel new, fresh, and represent the spirit and longevity of a 45 years old business
Given these conditions, I decided to explore a purchasing and checkout process based on the flavors of these yogurts cups.
The challenge is that the Yoghurt Shoppe wants to bring the yogurt craze to Chicago. This homemade yogurt is catching on because it is healthy and fun. They’ve exclusively been selling at farmers markets, but now they want to open their own shop.
Competitive Analysis
During the competitive analysis for this project, I noticed a strong brand-sense guided towards the small coffee shops look and feel. However, those businesses had the primary goal to cater to the bricks and mortar audiences. The stereotypical Starbucks’ customer.
Visual Study
Now with these competitors in mind, I dug deep into the workflow of their websites. In order to identify common themes and design patterns. I quickly discover that the primary conversion goal of their website was to build brand awareness and not to close sales.
Given these circumstances, I pivot my original exploratory research towards traditional eCommerce sites such as Amazon, Walmart, and eBay. Designing for the proto-persona of an online shopper.
Brand Identity
Given the guidance at the beginning of the challenge and the exploratory research into the yogurt market. I decided to use the following design principles to develop the brand identity of the Yoghurt Shoppe:
- New — the brand should appeal to hipsters and millennial audiences
- Fresh — the language of the site should feel playful and reflect the look and quality of organic ingredients
- Long-lasting — the brand should feel full of integrity, classy, strong, and trustworthy
- Typefaces choices — are for the user to feel the classiness and longevity of the brand
- Color Palettes — to evoke the idea of earthiness and the organic nature of their ingredients
User Flow
Every point of discussion until now has been focused on the brand and UI aspects of the website. However, the most important topic of this case study is the UX decisions that were made. Since the main conversion goal of this project is to produce an eCommerce site that converts into yogurt sales.
The reason why I decided to design the website in two sections:
- Exploration — this is the first section where users get to explore the brand before making a buying decision (home, about, and contact page)
- Conversions — this is the second section where the users get to make their buying decisions starting by choosing a flavor of yogurt; under a breadcrumbed checkout workflow
Home Page
Design Pattern | Upside-down Home Page
This principle positions the navigation links at the bottom of the page to have users interact with the main call-to-action buttons first.
Design Heuristic | Curiosity
The yogurt flavors are only revealed after the primary CTA is triggered funneling the users into the checkout process.
About Page
Design Pattern | Z-Layout
This principle creates a left to right readability design with break points in between to slow down the users. To help them better understand and consume the content on the page.
Design Heuristic | Social Proof
The brand authority logos on the footer of the site help the users trust the website and its’ products.
Contact Us Page
Design Pattern | Texting Chat Box
This principle creates a sense of a smartphone messaging app inside the website; giving customers ease of use, and familiarity.
Design Heuristic | Empathy and Liking
The avatar in the chat box tells the users they are dealing with another human being. Not a big and heartless corporation or a chatbot.
Main CTA — Flavors Modal
Design Pattern | Single Call-to-action
This principle is trigger when pressing the discover our flavors CTA.
Design Heuristic | Paradox of Choice
Users are only given three flavors choices to avoid paralysis by analysis.
Checkout Process
Design Pattern | Progress Indicator
This element displays the user’s current step of completion relative to the entire checkout workflow.
Design Heuristic | Endowed Progress
Making the users feel they have made progress towards completing their purchasing goal. Which makes them feel more committed to complete their checkout process.
Final Deliverables
In conclusion, I designed this eCommerce site to maximize conversions. Together with the development of a strong brand identity that conveys trustworthiness from the users.
