CompletEats is a plant-based vegan cookie company based in San Francisco. Looking to build out a simple and elegant brand, CompletEats brought me on to redesign their previously preliminary website. After a happy first round, I was hired to work on additional marketing assets, and later a complete rebrand.
This project consists of overturning the old web pages into a more on-brand, user friendly and informative website. Later in 2019, while migrating from Wix to Shopify, I've also taken the chance to refresh the website so it tells a better story while offers a more comprehensive shopping experience.
- Sells a better-for-you cookie that fits a healthy vegan and gluten-free diet
- Uses simple, nutrient-rich and locally-sourced superfood ingredients, such as chia seeds and almonds
- Wants to make plant-based eating easy while on the go
Read more on CompletEats' story.
CompletEats's old website is primitive and needs an immediate redesign in order to sell.
The old website is...
- Uninformative, lacking essential information about the brand
- Inconsistent, both aesthetically and functionally
- Hard to use. Flat out buggy, especially on its Shop page
The old home page tells very little about the brand. Besides a tag line and an Instagram board, there's no way for a user to learn more about what CompletEats is, or stories behind the brand from this page. It is also the only page that has the main menu bar in the middle of the page, whereas all other pages have it on top. This is likely to cause confusion while navigating through the pages.
The old Shop page contains many glitches. An overuse of frames within a frame caused this page to have three vertical scroll bars at the same time. HTML syntax was showing, and incorrect shop alert was found on the side of the screen. It became obvious that this website was put together very quickly to get the shop running.
- Function as a one stop shop to promote the brand, sell the product, and tell the story
- Adopt a simple, clean, and lively look that fits the brand image
- Have a consistent and seamless user flow
Here are a few websites that inspired the redesign, in terms of aesthetics, layout and interaction.
The 4 most urgently needed pages are Home, Shop, Location, and Contact, before the website can go live. This simple layout chart we drafted out helps to remind what goes under each page, and in what order when creating mockups.
For each main page, I have provided the client with 3 to 4 design iterations to choose from. And with each decision we made, I was able to get a better grip of what the client is looking for and what she would like to offer her customers through the website.
The second option became the winner as it displays a more unique and fun layout, while still maintaining a clean and elegant look that the brand is trying to achieve.
List or grid? That is the question. We decided to go with the grid layout for it provides more flexibility housing additional products as the brand grows in the future.
At the time when CompletEats were selling in ~40 organic grocery stores, a list of locations felt intimate and local, while still remained relatively easy to use. As time passes on, with CompletEats selling across the country in 100+ stores and adding, the list grew too long. Now, we have gone full on with the map and eliminated the list. CompletEats | Find Us
A simple, straight-forward, old-fashion contact form rules.
With the high-fidelity mockups at hand, the new website rolled out in just a month. Now, upon landing on the home page, a user can easily find out what CompletEats is all about within a few scroll, and the whole shopping experience finally runs smoothly without any hiccups.
As new products coming out and orders grow, CompletEats has decided to moved on to Shopify, a dedicated e-commerce platform for a more seamless shopping experience on both ends and to better account for future growth.
