Moüthfuel is a healthy snack brand that kickstarted their business on Instagram end of 2024. The client wanted to expand their audience beyond the social media, and reached out to me to design their online store experience. The main goal was to present the 4 key products and Moüthfuel’s vision, and define visual branding elements in the process.

Searching for references
We looked at existing online stores to understand the visual identity and features we want on the website. Looking at inspirations together with the client, I understood the atmosphere she wanted to portray on the website. Then discussing what is both pleasant and effective, we were able to narrow down the features to actually implement for the website.

Target Audience
moüthfuel is a snack for those who prioritize healthy diet, but with convenience. The demographic of consumers tend to be about 16 - 35 years old. To them, being able to trust in clean ingredients and protein heaviness are important factors in purchase.

Defining brand identity
Our favorite references were Olipop and Graza, as they had interesting ways of storytelling and characterized product experience. This made sense as Mouthfuel’s exists between Olipop, brisk and fun drinks, and Graza, healthy and trustworthy olive oil brand. This understanding helped form a visual identity of vibrant green based website, representing healthy organic ingredients, with very delicious and satisfying snack.

Wireframing
Based on the findings from research, I started designing rough iterations.  I communicated with client closely for frequent feedbacks for quick implementations. Due to a short timeline before the first launch, there were interactions and pages that needed to be postponed for later. So it was crucial to prioritize the tasks at hand. It came down to 3 main features — Landing, each items, and cart / check out.

One of the challenges was finding the harmony between differentiating each flavor while being consistent as a whole. Because the client is selling protein balls with 4 different flavors, each purchase option is not easily distinguishable through photo. So we chose to associate different colors for each of them, and landed on a character-card like layout after iterating through various layouts and colors

We added elements to communicate the trustworthiness of the brand: value proposition, emphasized benefits, detailed nutrition facts for those who may need further assurance.

Applying feedbacks
As the wireframes were being designed, we asked for feedbacks to check if they were being perceived as intended. For example, I found out that the “empty cart” with item suggestions was being perceived as “not empty” due to how populated it was regardless of the text saying there’s no item in cart.

Taking in the feedback, I decided to replace the suggestions for specific items, with one button to shop for more items. This communicated the emptiness a lot better and didn’t overwhelm the user.

Lessons
Through frequent and responsive communication, I realized the importance of setting the foundation for sharing feedbacks in both directions, once again. Committing to a recurring meeting helped effectively understanding the client’s vision as well as providing input as a designer.

This was a project where the importance of the written content was highlighted. A lot of refining took place to keep the amount of information digestable to the viewers, and not overwhelm or distract from shopping.

Limitation
‍Due to the time limit of 1 month, and the capability of the platforms that are being used, we couldn’t implement all the features and pages for the initial launch. However, there is going to be continuous updates going forward, such as animated hover interactions and subscriber account pages.Another hurdle was understanding the tools needed in the workflow. It was my first time using both Shopify and the Instant plugin. I plan to learn more about the programs to seamlessly incorporate the needed features in the near future.