Forme Shaker
UX design for a high-end protein shaker's e-commerce site.
About Forme Shaker
Forme Shaker is a protein shaker brand first launched on Kickstarter. They have been selling their product through Shopify for over a year and now looking to expand their brand and website.
​
Forme Shaker is a protein shaker meticulously designed to not leak or smell, easy to clean, has a silent shaker mechanism, a hidden storage container, a concealed drinking lip, regulates the temperature of the contents, all in a sleek design.
The Challenge
Forme Shaker wants to gain more insights about their users and how to better their e-commerce site design in order to produce more client turnover through their web channel.
Tools & Frameworks Used
-
Job stories
-
User experience mapping
-
Figma
Initial Research
To get better contextual information for the redesign we conducted a stakeholder interview, competitor analysis and user interviews.
Stakeholder Interview
We got to meet up with Nick in person to ask him about Forme Shaker, his goals and expectations for the design sprint as well as his vision for the brand.
Competitor Analysis
We conducted competitor analysis to get a better contextual understanding of where Forme Shaker is positioned in the market, what are tactics being used by other brands and what does Forme Shaker needs to do to grab the attention of online users.
User Interviews
3 days. 40 online survey replies. 9 phone calls, 20-30 minutes each.
Chat with Nick...
We got to meet up with Nick in person to ask him about Forme Shaker, his goals and expectations for the design sprint as well as his vision for the brand.
​
-
Target Audience:
-
Nick has a vague idea of the ideal target customer he and his team wants to aim for - casual gym-goers who have a lot to spend on gym gear, seeking a healthy lifestyle ("People who shop at Lululemon, buys a Peleton, is into Aletheisure."). However, he wants to better understand and define who his user groups are.
-
He wants to find a way to expand his target, not to just people who are already taking protein shakes but those who are health conscious and might be taking supplements.
-
-
Branding:
-
"No one who's cool says they are cool!" Nick says. Nick wants Forme Shaker to come off as stylish and premium however he isn't too sure how to better show that rather than tell on the current website. ​He wants it to become a lifestyle brand.
-
Wants a page to help facilitate co-branding opportunities.
-
Wants the brand to empower people to use supplements, breaking the stigma that this is something only for hardcore gym-goers.
-
Due to the Forme Shaker's sleek design - he's unsure how to communicate that it's a protein shaker. Nick wants the branding to communicate the use of the product without having to overexplain - he wants to sharpen the brand messaging.
-
​
Notes for Possible Solution Constraints
-
The design should be compatible with Shopify.
-
"Load-time is a killer!" Nick explained that because they are a business still in its early days, they are still unsure about speculating demands when making manufacturing orders, sometimes leaving things out of stock.
-
Currently just being managed by Nick and his co-founder, the customer service and returns is kept vague as it can be hard to manage if this increases.
Competitor Analysis
We looked at two key types of brands in the market:
​
Type 1 - Brands where customers are currently purchasing/getting their protein shakers from/are shopping for supplements ie. Bulk and Huel. This gives insight into how Forme Shaker can differentiate itself as a Protein Shaker product compared to its direct competitors and how the users who are more likely to purchase a Forme Shaker are currently being marketed to.
​
Type 2 - Reusable bottle brands at the price point of 30 GBP and up ie. Stay Sixty, Chilli. (This is to better understand how a similar type of product at the same price point is positioning itself in the market, what are they doing right? What are ideas we can borrow?)
Our findings: ​
​
-
Type 1 websites...
-
have a very clear return policy that can be found very quickly on the website. This is possible to better assure and encourage buyers to make their purchase decision at a high price point.
-
Has a lot of messaging about sustainability to showcase transparency.
-
-
Type 2 websites...​​​
-
Have a lot of messaging around health and wellness. ​
-
Communicates a sense of community through social media hashtags and blog posts. This helps cultivate the brand as a lifestyle choice, going further than just a produce ie. Huel calling their buyers 'Hueligan', this allows the brand to be perceived as an identity, not just a product.
-
​
-
Both/Some...
-
Utilize blog pages to increase traction through articles relating to their audience's interests, cultivate a certain brand image through strategic partnerships, and archive past mentions of their products in past online publications to cultivate a sense of credibility.
-
Review feature.
-
Express checkouts.
-
​
​
User Interviews
Goals​
-
Find out their lifestyle and interests outside of the gym.
-
Find out non-supplement users' reasons for not using protein shakes.
-
Find out their key pain points and habits with e-commerce purchasing.
​
Method
We sent out a screening survey, garnering 40 replies. We were able to make 9 phone calls out of the 40 people who responded. Each phone call lasted from 20-30 minutes.
Additionally, we also went on a site visit at a gym to talk to possible target audiences.
Here's What We found:
Identifying User Insights
Identifying key trends, and defining user insights by breaking our target down into 2 user groups and user experience mapping.
Key Trends​
​
-
Branding:
-
Sustainability is very important to buyers when it comes to making a purchase of reusable bottles and products of higher price points ("I would want to know how Forme Shaker is sustainable at that price point.")​
-
Female interviewees found Forme Shaker's site and its social media branding to be too masculine and non-inclusive. Non-supplement users found the protein shaker branding to be too strong, "I don't think this product is for me" - however when asked if they would consider it as a water bottle they were more open due to Forme Shaker's sleek design.
-
Some interviewees mentioned they felt unsure about purchasing from the Forme Shaker website due to its lack of reviews and the mention that it was only recently launched on Kickstarter.
-
​
-
E-Commerce Pain Points & Habits:
-
Before deciding on a purchase users would compare reviews, and look up recommendations on trusted news sources or Reddit forums. Multiple pictures of products with models are also conducive to helping buyers make that final decision as it helps them get an idea of how it looks in everyday use. A lack of reviews can turn a buyer off entirely.
-
All interviewees say their first source for online shopping is Amazon however they do make exceptions when buying directly from websites when there are special promos and if these sites have generous and clear return policy ie. Asos, where buyers do not have to pay for return shipping.
-
Interviewees cite express checkout to be an important factor to them.
-
Buyers like being able to track shipping.
-
​
-
Product
-
Current users of protein shakers have very positive responses to Forme Shaker, ​citing the specs to be exactly what they are looking for. However, the blatant marketing of Forme Shaker exclusively as a protein shaker makes non-protein shakes user feel alienated even if they might take supplements in the form of pills (which can also be what the storage container of Forme Shaker be applied to enlarge their target market).
-
​
Primary User
The Gym Goer
Works out 3-5 times per week.
Take protein shakes.
Have clear workout goals.
​
Often buy gym gear recommended by trainers/gym friends they trust. Don't mind investing in expensive gym gear if it is of good quality and would be long-lasting. Current brands of protein shakers they use are Bulk, Grenade, and Huel (the latter often being the freebie that they get when ordering the Huel protein shake).
​
Quote
"A product like Forme Shaker is exactly what I am looking for. I am also excited by the idea that I can easily use it as a regular water bottle that would keep my coffee hot when I am at work and use it as a protein shake when I need it."
​
"I think Forme Shaker is everything I need in a shake but I cannot tell if it's legit from just looking at the website. I don't like that it shows no reviews and says it just launched from Kickstarter. At that price point, I also want to know if it's really sustainable and how long-lasting it is."
​
Secondary User
The Health Conscious
​
Works out 0-3 times per week.
Does not take protein shakes but might take supplements such as mushroom powders or vitamin D in tablet format.
Does not have body goals but care a lot about their diet.
Use reusable water bottles.
​
Often buy gym gear recommended by trainers/gym friends they trust. Don't mind investing in expensive gym gear if it is of good quality and would be long-lasting. Current brands of protein shakers they use are Bulk, Grenade, and Huel (the latter often being the freebie that they get when ordering the Huel protein shake).
​
​
Quote
"I don't see a protein shaker as something I'd ever use but I might consider it as a water bottle due to its sleek design."
​
"I have to take tablet supplements regularly for health reasons but I can often be forgetful."
​
"Forme Shaker's branding looks like it's targeting hardcore gym-goers, I don't see myself using it. The branding and their social media don't look inclusive to me. It's too masculine."
​
Problem Statement
Forme Shaker website needs to promote its value proposition and reassure visitors of its post-purchase experience, while delivering a premium visitor experience that does the product justice.
​
​
Build Trust
Assuring new visitors that their purchase is protected, being made with a legitimate business that aligns with their sustainable values.
​
Articulate Clear Value Proposition
Communicating how and why it is a better choice than other protein shakers (and reusable water bottles in the market) for those who are willing to spend money on gym gear and invest it into their health and wellness.
​
Presents a Premium Aesthetic
Aptly reflecting the quality and stylishness of the Forme Shaker product.
The Forme Shaker website needs to...
Ideation
Addressing Trust
-
Sustainability messaging should be at the forefront of the site and reinforced throughout.
-
Information on return policy should be at the forefront of the site and reinforced throughout.
-
Added review feature.
-
A blog page that includes press mentions to reinforce credibility.​
​
Addressing Clarity
-
Sections dedicated to explaining the quality of the materials and the thought process behind the meticulous design.
-
Specs break down on the homepage and product page.
-
Key value propositions of the product are presented in infographic format.
-
Sharpen brand messaging on whom the target audience is by displaying a variety of lifestyle pictures not just of muscular males in the gym.
​
Addressing Premium Aesthetics
-
Use of gradients and drop shadows to show an optical dynamicity to complement product placement.
-
Change of secondary color palette to better complement product placement.
-
More variation of text hierarchy to create more optical dynamicity.
Addressing Stakeholder's Needs
-
A co-branding page. ​
-
A blog page that helps reinforce a sense of community behind the brand, putting together articles that educate users on supplement use.
-
Added notification on how many are left in stock on product page.
​
Sketches
Wire Frame
Key changes to the site's structure:
Specs breakdown on the home page.
Frequent mentions of how to make returns and sustainability messaging.
More message on how it is designed to blend seamlessly into any lifestyle.
Added blog and co-brand page.
Added review function.
​
Visual Language
Colors that make the product pop​
Dynamic Text Hierarchy
Heading and paragraph texts vary in size and weight. Use of drop shadows and outlines for titles to make it stand out and eye-catching.
Use of more lifestyle photos
Embossed, Shadowed & Interactive Elements
Pale blues are chosen as secondary colors to help make the products stand out. Gradients are used to create a dynamic and dimensional look and feel when the products are being presented.
This is so the 'solid' look and feel of the physical Forme Shaker is reflected throughout the website. The website should feel tactile, as if having depth.​
Users should be able to envision themselves with the product, not simply as a protein shaker but also a water bottle they don't leave home without. Thus, the site should encorporate more lifestyle photos to help users see themselves engaging with the product outside the gym as well as while at the gym.
End-Product
Structure Breakdown
Homepage Elements
-
Easy to understand infographic breakdown of product's value proposition.
-
Detailed breakdown of product specs.
-
Assets showing the use of the product in varying situations by a variety of demographic to show inclusivity.
Shop Page
-
Messaging on sustainability and returns on homepage, shop page and product page.
-
Messaging reinforcing quality assurance and meticulous design.
Ethos Page
.jpg)
-
Messaging on inclusivity and sustainability.
Cobranding Page
-
Pictures of past collaborations.
-
Contact form.
Banners on Sustainability & Returns
-
Messaging on sustainability and returns on homepage, shop page and product page.
Shopping journey that addresses all key concerns
Product Page
.jpg)
-
Details on returns, product concerns and reviews quickly accessible on the product page's landing.
-
Key features breakdown, reinforcing its value preposition.
-
A gallery of product pictures.
Community Page (Blog)
-
Word choice of 'Community' is chosen (instead of 'Blog') to reinforce a sense of premium branding and lifestyle messaging.
-
Clean, accessible layout of articles.
FAQ Page
-
Neat designs of question categories.
What's Next for Forme Shaker
Recommended 3 Months Plan for Forme Shaker
Consult developer
More user testing
Mobile version design
​
Develop a clearer structure for the return policy, preferably with free return shipping.
Marketing & Product Suggestions
To better target secondary users the storage compartment can be marketed to also be utilized as a pill compartment. This will allow non-protein powder users to see the value of buying their own Forme Shaker.
Social media pictures should feature more lifestyle photos and diversity of bodies.
​
Email notifications for buyers to help them track their orders.
