top of page

PRODUCT DESIGN

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.

My roles:

  • Creative Direction, strategy & branding

  • UX / UI / Wireframes, User Journey, Visual Design and Prototyping

Team:

Video: Gut Branding & Voda Films

Photography: Greg Merino

VP Marketing: Allison Fowler

Timeframe:

  • 6 months of UX, visual design, development and testing

LaJolla_casestudy_20201.jpg
2023 case study website Perfect Barthe challenge.jpg

PART 1

Service Name

The Challenge

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.

PART 2

The Solution

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.

2023 case study website Perfect BarVisual Design copy.jpg
2023 case study website Perfect BarAnalytics.jpg

PART 3

Service Name

The Analytics

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.

PART 4

The Users

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.

User testing:

  1. Identify personas

  2. Identify critical tasks

  3. Use optimal workshop for user testing

  4. Analyze results

2023 case study website Perfect Baria 4.jpg
2023 case study website Perfect Baria 3.jpg

PART 5

Service Name

The Sitemap

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.

PART 6

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.

2023 case study website Perfect Baria 2.jpg
2023 case study website Perfect Barwireframes.jpg

Service Name

PART 7

The Wireframes

Wireframes were created before visual design to get stakeholder and development approval prior to visual design. They were created for both website and mobile.

PART 8

The UI

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.

2023 case study website Perfect Barui.jpg

PART 9

The Visual Design

Service Name

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.

PART 10

The Storytelling

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.

PART 11

Service Name

Final Thoughts

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. 

bottom of page