Sonus website

The Overview

This franchised physical hearing device company needed an updated website that better fit the needs of their customers. Getting visitor to the stores was the overall goal for the site, but content was included to help patients dispel the stigma of hearing aids.

The Details

Client : Sonus Hearing
Tools : OmniGraffle, Excel, Photoshop
Role : User Experience Designer

Approach

Prior to our client kick-off meeting we did substantial competitive research. The agency had done work for a business that made clinic management software for audiologists. So we knew the business needs and subject matter very well. We were also aware that customers were dealing with a sensitive and personal challenge in needing a hearing aid.

Discovery

Persona Driven

After talking with several client contacts who dealt directly with customers, we were able to create five personas that encompassed the people that came to their sight and storefronts. Patients generally fell into two categories: either they accepted their need for a hearing aid or they didn’t. Influencers for these patients were another set of personas. The last were hearing professionals looking for information.

We suggested serving different content to the different personas to better target their emotions and needs. The client liked the idea a lot, so next I tried to figure out how to do serve up different content based on persona.

Sitemap

I decided to create a flexible site structure. So users could get pages of content based on how they felt about their hearing aid needs. Professionals got their own entry point. I worked closely with the designer to brainstorm ways we could have the users self-select. With a plan for the UI, I worked on representing a mutable sitemap.

Sitemap, Self-Selection

Customer personas were used to map out an access path to targeted content based on user need. Here you see part of a combination flowchart and sitemap used to explain the idea to the client.

The ‘Denier’ persona doesn’t believe they have a hearing problem. For example, they may think that loved ones around them mumble.

The ‘Acceptor’ persona understand they have hearing loss, but maintain a stigma about hearing aids.

The ‘Adoptor’ persona understands their need for a hearing aid. They may be looking for their first or a replacement device.

Wireframes

By informally pairing with the visual designer, it was possible to make the wireframes an better representation of what was on each screen and how it would block out. The client was more confident in their approvals and agency deliverables were more polished.

Navigation

Users select a navigation path and that path remained sticky throughout their experience. If they wanted to change their navigation, the other options were available at the bottom.

This let us serve up different content based on what the user identified as their reason for visiting the site. Generically-messaged content was served, if the user came from a direct link with no identifier. Until they interacted with a self-selecting promo or navigation.

Layout Grid & Promo elements

A layout and design system was created and documented to allow new pages or changes to be executed without contracting a designer. Elements like a column grid, fonts, colors, headers, and promo graphics had detailed specs to inform future use.

Clinic Locator

The website was largely marketing content, except for the user tasks of finding a clinic and making an appointment.

Task flows were incorporated into the wireframe deliverables to communicate context to the client of the page location within the site. It reminded everyone of a video game, but it worked well.

PR Blog

The blog was a later addition to the scope of the project. The visual design very closely matched the wireframes. From the rest of the project the layout grid and design specs were applied.

Visual Design

The creative director successfully created a clean and trustworthy look for the whole site. A limited color palette of greys, blues and greens made a welcoming design.

Delivery

The scope of the project increased as the client saw the website take shape. An analytics dashboard and blog were added in a later phase. There was also a great response from the individual franchises and, most importantly, the customers.