"Keto Meal is an all-in-one ketogenic (low-carb, high-fat) meal. It can replace any meal or snack, and tastes like a delicious milkshake. Science-based ingredients help you lose fat, gain muscle, or just save time."
Originally, the website had two goals: one is to get the user to read and subscribe to the blog posts, the other is to get the user to buy the products.
The current design is a website focused on the product, Keto Meal, to educate and convert site visitors into paying customers. This project is still under development.
I worked on the design of the website, producing all major deliverables, and presenting these to the rest of the team.
Our initial persona was based on results from a survey emailed to customers as well as our own assumptions. James is a highly educated professional who uses meal replacements as a healthy and convenient breakfast and sometimes lunch.
I hypothesized the blog posts would be the main driver to the site, since the posts gained traction on Medium and LinkedIn. So I decided to introduce the blog section first, followed by the shop, then finally information about the benefits of the product.
I created two possible color palettes based on some inspirational pictures. The brand has a modern feel, focusing on health and science. So the visual design should represent that with a clean sans-serif font and white as the neutral background color.
Putting it all Together
In this first iteration, I put together the previous work I did to create a high-fidelity mockup, choosing to use the version 1 color palette. While also deciding to switch the order of the blog and the shop in order to make the products more prevalent. I used content from the original website for the text and photos.
The Next Iteration
After receiving user feedback, the main concern with the current design was confusion about the blog posts. The posts felt "random" in that they "didn't relate to the rest of the site" about health, nutrition, or the product. Users also wanted more information about the benefits of the product and why they should purchase it. The decision was made to remove the blog posts from the home page and replace them with facts and testimonials about the product.
I also changed the color palette in order to improve the contrast on the call-to-action buttons.
I swapped the bright yellow for a darker orange and the light blue with a deeper midnight blue.
Additional changes included:
- adding CTAs to the Shop section so customers can easily add items to their cart
- creating a compelling email sign-up CTA by offering 10% a customer's first order. People want to return favors; the discount is a reward for signing up for the email list. This takes advantage of the principle of reciprocity.
- removing the images over a background image in the third section of the page because it felt distracting and cluttered
- improving consistency by making all the buttons with pointed corners
- removing the button's shadow to reduce complexity
- adding testimonials; customers are more likely to purchase a product if others have purchased and liked a product
The Current Version
Our present design is a website focused on the product, Keto Meal, to educate and convert site visitors into paying customers.
Using principles of social proof to boost conversions, a reviews section was added to the product page. The FOMO app, which pulls in recent sales from the store and displays them as notifications in the lower left corner of the storefront, helps increase purchase conversions by highlighting what other customers are doing. This creates a sense of urgency for customers to buy new products.
Adding the bio about Dr. Cameron Sepah, the founder and CEO, leverages his authority as a doctor who used his clinical and scientific expertise to create Keto Meal. People often trust the opinion of experts and authorities.
Tools: Sketch, pen and paper