Helping customers find care and reach booking

The challenge

The website needed to help people understand their hearing-care options and move towards the right service. Important content, stores, and appointment routes were difficult to find. Varied content was also creating pressure for more page layouts and one-off interaction choices.

The design direction was to make high-intent routes more prominent, give each page a clearer next action, and support the experience with reusable patterns.

I focused on three connected decisions:

1. Use customer behaviour to prioritise routes.
2. Build clearer paths with flexible components.
3. Use interaction to support the next action.

1. Using customer behaviour to prioritise routes

I worked with the wider team to use analytics to identify the routes customers used most. Instead of treating every page and piece of content equally, we gave more prominence to the paths that helped people find care, locate a store, or reach an appointment.

Key decisionPrioritise routes by customer behaviour, not content volume

2. Building clearer paths with flexible components

We broke long content into smaller sections and gave each page a clearer next action. I led the interface and component design, creating flexible patterns that supported different content without introducing a new layout for every page.

This kept the journey consistent as customers moved between learning about hearing care, finding a store, and booking an appointment. It also consolidated repeated page patterns into reusable parts.

Key decisionUse flexible components to clarify the journey, not multiply layouts

Reusable components support varied content while keeping routes and actions consistent.

3. Using interaction to support the next action

I turned the Miracle-Ear tone of voice into motion principles that the wider team could apply consistently. The intensity changed with the purpose of each interaction, helping important actions stand out while keeping routine navigation calm and accessible.

Key decisionMatch motion intensity to the importance of the action

The principles translated the brand voice into repeatable motion behaviours.

I then created a loader inspired by the brand logo for the appointment booking journey.

The branded loader gives feedback while appointment information loads.

I applied the same principles at a smaller scale. Button motion confirmed direct actions quickly, so it stayed subtle and did not delay the response.

Buttons use motion to confirm interaction.

The store finder needed to draw more attention to the next step. I used a more energetic treatment while keeping its timing and movement connected to the same rules.

The store finder uses a more energetic expression of the same principles.

At page level, the motion became quieter again. Small reveals connected sections without making routine navigation feel theatrical.

Subtle reveals create continuity between page sections.

What changed

• Stores, appointments, and other high-intent routes became more prominent.
• Content was organised around clearer actions.
• Repeated layouts became flexible components.
• Interaction feedback became reusable behaviour rather than a collection of one-off effects.

The redesign made routes to care clearer while giving teams a more consistent way to create and improve the web experience. Components and motion supported that goal rather than becoming the goal themselves.