Design Overview
A national hearing aid company needed to focus their message and their voice. I created a small team to tackle a fresh approach to a very stoic product niche. We started by talking to customers and internal stakeholders. Through the interviews, we created themes and common story elements. We then workshopped the general tone and voice we heard, refining what we were after. With the basic elements and research synthesized, I hired a fantastic copywriter to help write the brand story and give life to our loose brand persona.
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.
UI/UX, Information Architecture: John Fitch; Strategy, Art and Creative Direction, Site Design: John Fitch and Shay Spaulding; Copywriting: Christy Anderson. Illustrations by Will Frohn and photography by Betina LaPlante.
