PRODUCT DESIGN
Perfect Snacks Responsive Website Re-Fresh & Re-Design
Perfect Snacks is a family-founded venture offering a range of fresh-from-the-fridge protein snacks designed for the entire family. Crafted with clean ingredients such as freshly ground nut butter, organic honey, and superfoods, these nutritious products provide a delectable source of whole food protein on the go.
As Perfect Snacks experienced rapid growth, the need for a revamped website became evident, encompassing a UX refresh, updated content and copy, and a more transparent purchase path.
​
My responsibilities included:
-
Creative Direction, strategy & branding
-
New brand and copy style guides
-
UX/UI/Wireframes, User Journey, Visual Design, and Prototyping
-
New delightful and direct messaging based on user data, in the right place, at the right time, for the right user.
​
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.
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:
-
Identify personas
-
Identify critical tasks
-
Use optimal workshop for user testing
-
Analyze results
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.
Service Name
PART 7
Wireframes & Content
I created desktop and mobile wireframes based on data, created with intentional hierarchy for our target consumer's shopping habits. I presented to stakeholders for approval prior to development.
PART 8
Style Guides
I created a style guide to define the storytelling, look and feel of the entire site, ensuring copy, branding, color, typography and icons are consistent on every page and element being created, and scalable.
PART 9
Delightful Brand
& Copy
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.