08 (1)_edited.jpg

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

Property 1=Variant6.png
pngwing.com.png
 

Application

Product.jpg
MacBook Pro 16_ - 6.jpg
Shop _____.jpg
Product.jpg
08 (1).jpg

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. 

Screen Shot 2022-06-01 at 12.57.34 PM.png
Screen Shot 2022-06-01 at 12.55.06 PM.png
Screen Shot 2022-06-03 at 2.45.23 PM.png

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. 

Copy of StraightOn-Jungle-Green.png
Copy of StraightOn-Jungle-Green.png

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

Workout

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."

Screen Shot 2022-06-03 at 7.02.58 PM.png

Secondary User

The Health Conscious

Young Dietitian

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."

Screen Shot 2022-06-03 at 7.01.55 PM.png

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. 

Copy of Image-2-StraightOn-Tilted-Exploded.png

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.

285609511_432551374994475_7930711068983992801_n_edited.jpg
 

Sketches

285456191_985583098822283_40224821917014
285466136_675500336847197_53487067057518
285371252_329969825958648_34079675283578

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.

Screen Shot 2022-06-04 at 9.41.48 AM.png
 

Visual Language

Colors that make the product pop

Dynamic Text Hierarchy

MacBook Pro 14_ - 1.png
MacBook Pro 14_ - 1.png
Product.jpg

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

MacBook Pro 14_ - 1.png
MacBook Pro 14_ - 1.png
DSC05546.jpg
DSC05480.jpg

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.

08 (1)_edited.jpg

End-Product

Structure Breakdown

Homepage Elements

MacBook Pro 16_ - 7.jpg
  • 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

Shop _____.jpg
  • Messaging on sustainability and returns on homepage, shop page and product page.

  • Messaging reinforcing quality assurance and meticulous design.

Ethos Page

Ethos (2).jpg
  • Messaging on inclusivity and sustainability.

Cobranding Page

Co Brand.jpg
  • Pictures of past collaborations.

  • Contact form.

Banners on  Sustainability & Returns

MacBook Pro 16_ - 7.jpg
  • Messaging on sustainability and returns on homepage, shop page and product page.

Shopping journey that addresses all key concerns

Product Page

Product (2).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)

Blog.jpg
  • 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

MacBook Pro 16_ - 4.jpg
  • 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.

08 (1).jpg