Design Overview
Sample "mega menu" rollout. Hover and rollover states were designed to have subtle details while remaining simple.
The gallery navigation serves as a filter for the tiled content. Convinient grid and list views give users chioce on how they want to browse the content topics. On click, rather than new pages, a new staged approach is given where the content appears over top of the page (see next screenshot).
Once the theatre goes dark, the focus is on the content —the real star of the show, the stories and photos. The "close" function stays anchored at the top of the page as content scrolls through the viewport of the browser. The arrows give easy access to play between stories quickly and easily browse within sections of content. When the window is closed, the user finds themselves back at the same spot where they left on the site.
For the product list page, simple rollover states highlight the entire row to add focus, while an additional piece of savings messaging (showing the percentage saved compared to retail) gives a new tidbit of information for potential buyers.
Product detail pages follow the same concept as the learn section detail pages. The focus is staged to give emphasis to the content, while providing easy tools to flip through from one product to the next. Like the other detail page, the close header stays fixed while content out side of the browser viewport scrolls into view.
One of the first key pieces to be created to tell the new brand story was the website. With competitive research and interviews from key stakeholders in hand, the site information architecture was created to focus on a friendly and accessible experience.
The elegant black and white photography of real customers played off the whimsy of wonderfully simple and colorful illustrations. Pops of accent colors shine and give life and motion to pages, finishing the overall visual strategy to create a vibrant template of reusable elements.
Illustrations by Will Frohn and photography by Betina LaPlante. UI/UX, Information Architecture: John Fitch; Strategy, Art and Creative Direction, Design: John Fitch and Shay Spaulding; Copywriting: Christy Anderson.