The Challenge

Our first steps were to discuss with the client their vision and desired content on the website. From there, we created a site map, which broke down the navigation and established a framework for the best user-friendly experience. We captured all of the pages that were going to be included on the site, as well as an information hierarchy.

Once we were aligned on the site map, we developed a detailed home page wireframe template to establish the most important elements and key functionalities that would be showcased. We built the wireframes for both the desktop layout and the mobile layout to ensure the design would be responsive & seamless across devices. Dynamic movement was a key deliverable, so we worked collaboratively to ensure that we included details on where possible interactive and/or animated components would be incorporated. Following alignment on the homepage wireframe and design, we created wireframes for the remaining website page templates.

The end result was a custom website with a bold design that was engaging, dynamic, and user-friendly. We created an aesthetic that targeted consumers who lead a healthy, active lifestyle by using relatable imagery and highlighting featured trail mixes, ingredients & recipes to increase appetite appeal. By utilizing icons, we quickly communicated usage occasions and product benefits to emphasize the better-for-you nature of the brands. The creation of these icons also resulted in additional animated elements that grab users’ attention as they scroll. Sprinkled throughout were celebrity ambassador imagery & testimonials, call-to-action buttons, and social media feeds.

To continue highlighting the Power Up® and newly-launched Power Up® KIDS brands, we created separate pages. This allowed us to customize the design and content to maximize product awareness and education. Both pages followed the same structure, starting with a featured-flavor & ingredient-focused animated billboard. The pages also incorporated gifs using the icons we created to communicate product benefits, plus a special interactive magic hover feature that allows users to engage with the elements on their own as they scroll across the graphics. Additionally, these brands included page designs for each individual product within the lineup. These product pages were ingredient-focused, featured a BUY NOW button so consumers could purchase directly from Amazon, and were easily accessible from the SHOP tab in the navigation.

Knowing that a majority of consumers shop from their phones or tablets, it was crucial to have a responsive website that resized and scaled properly on desktop and mobile devices. In addition, the site was designed and built with speed, accessibility, reliability, SEO and browser support as priorities. From a design perspective, the imagery, videos and animations were adapted for mobile while maintaining the look & feel from the desktop version.

For the additional brand landing pages, we designed a template that could be modified for each product line, including Gourmet Nut™ Premium Nuts, Simple Slices™, Perfect Pairings™, and Better Than Popcorn™. Tying back to the Power Up® home page, we maintained a simple & clean look utilizing black and white in the navigation, body copy & background, and added customization with the respective brand elements & color palettes. We wanted to highlight the recently designed packaging for these brands, so each header graphic included a package rendering coupled with product photography and/or illustration for appetite appeal. We also wrote headlines and body copy to engage consumers and generate excitement for these premium healthy snacks.

We wanted this site to make a big impression, so we incorporated the use of dynamic imagery, video, rollovers & movement throughout. For Power Up®, we created storyboards and then animated the billboard graphics to highlight the premium quality ingredients. We also cut videos to highlight the brand’s celebrity ambassadors. For Power Up® KIDS, we utilized brand assets from the packaging, such as icons and the emoji illustrations, to create gifs for areas of fun & subtle movement.