Perfect Snacks Website Design
Perfect Snacks is a collection of fresh-from-the-fridge protein snacks for the whole family, founded by the Keith Family. Made with clean ingredients like freshly ground nut butter, organic honey and superfoods, their nutritious products offer a delicious dose of whole food protein on the go.
Perfect Snacks was rapidly growing and needed a new website with a UX refresh, a clearer purchase path, updated branding and photography.
Creative Direction, strategy & branding
UX / UI / Wireframes, User Journey, Visual Design and Prototyping
Video: Gut Branding & Voda Films
Photography: Greg Merino
VP Marketing: Allison Fowler
6 months of UX, visual design, development and testing
The site needed to be a mobile first experience since 80% of traffic came from mobile users, but had less sales than desktop users. The website also needed a shorter (and more intuitive) purchase path to increase sales. The website also needed to show more value bundling products (the more you buy, the more you save). The website also needed to update the branding to look clean and modern to increase user trust and strengthen our clean food creds. Additionally, the site needed to highlight the delicious texture of the food product and fresh ingredients calling for all new website photography.
I needed to create a best in show website that optimizes the mobile user journey to a quicker and more seamless purchase, while also highlighting the texture of their delicious products as well as their fresh ingredients and clean food claims. I recently created a new branding guide for Perfect Snacks, and would apply the new modern branding to the website's visual design as well.
Analytics showed that the Perfect Snacks website needed to be optimized for mobile which accounted for 80% of their traffic. The analytics also showed the priority of users went straight to products, rather than diving into the "about us family story" which was a focus in the past.
A user persona gives designers, marketers and salespeople a human approach when working on the product, brand, service and different strategies. We created user personas for the Perfect Snacks products, to make sure we were building the site with the current user in mind, and not based on internal team members perspectives with personal bias.
Identify critical tasks
Use optimal workshop for user testing
A sitemap is a vital tool for building a functional and usable website, it will take consumers where you want them to go instead of going around in circles and ultimately leaving your website in an act of frustration. The sitemap was created and shared with all stakeholders for a holistic view of the website redesign. Once approved it was also used to onboard development.
The Page Templates
Creating page templates is useful to onboard development and give them an idea of scope of the project. We can also decide which templates we can use internally to duplicate and build out using the CSS, saving development time.
Wireframes were created before visual design to get stakeholder and development approval prior to visual design. They were created for both website and mobile.
A UI library is created and updated in tandem with the visual design to provide a library between design and developers. The UI defines the look and feel of the entire site, ensuring branding, color, typography and icons are consistent on every page and element being created.
The Visual Design
Visual design focuses on the branded aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements. A successful visual design does not take away from the content on the page or function.
I created visual designs for the priority templated pages first. Once these were complete, we could build out more pages using the templates and CSS by updating copy and photos.
The new website also showcased new product photography hightlighting packaging (for recognizability also on the shelf), cookie-dough texture of the bars, and fresh ingredients. We also included product on white backgrounds and lifestyle shots in the kitchen with ingredients, as well as UGC images for trust, and animated videos to showcase ingredients in a refreshing way. The site was also updated with branded colors and typography for clear legibility and accessibility standards.
Perfect Snacks products need to convey the following: Cookie dough-like texture (delicious!), fresh from the fridge (clean ingredients!) and good on the go (the perfect snack at school, work, or gym). We reiterated this messaging throughout the site, as well as in the imagery, stop motions and videos.
We created a fresh new website with an optimized user experience and purchase path, increasing sales and strengthening brand awareness.
New photography and charming stop motion videos also created a memorable brand experience, each emphasizing the products main marketing take aways of cookie dough like texture, fresh from the fridge, fresh ingredients and good on the go.
The Facebook mobile team requested to use elements of this new "mobile first" site as best in class examples of parts of the consumer journey.