Hear.com app prototype User test clickmap User test heatmap User test clickmap User test heatmap

Above: prototype of the hearing coach feature redesign and some heatmaps from the usability tests performed for the redesign process.

Context

We were requested adding current day wearing time tracking to the hearing coach feature.

There was no documented user research or validation avilable for this feature.

Though through our customer consultants we learned that customers had problems understanding how the feature worked.

The design of the feature did not align well with the overall design of the application, resulting in visual and functional inconsistencies.

Actions taken

Identifying and documenting the main user pain points through surveys and usability tests.

Enhancing the information layout to reduce the cognitive load for users and clarify the feature's objectives.

Current day wearing time tracking was added.

Aligning the visual design of the feature with the app and with the brand.

First results then reading?

Jump to play with a prototype
Redesign process

Above: overview of the redesign process over the double diamond model.

1. Research and exploration

As part of a bigger effort to have an updated snapshot of the applications, we took screenshots of every screen from this feature and documented them in a Figma file. In that same file we arranged the screenshots to follow the flows and user journeys in the feature.

We then proceeded to ran a 20-second variant of a 5-second test with testers of our target group (english speaking 60+ y/o) to gather insights on the visual communication. We learned the information was laid out in an uncomfortable reading order and the minimal wording made it difficult to understand.

Afterwards, we setup one usability test where we would learn also that in smaller phone sizes the controls of the feature seemed to not work because the controlled area was out of sight.

First day of coaching screen

First usability test flowchart: users were tasked to find the article titled "The sound of your own voice". Underneath the summary report from maze.co.

Version 1 tested flowchart

2. Definition of pain points

The tests results and analyses were documented on confluence, shared and discussed with the team. The answers from the testers were placed also on a miro board and an affinity map created, making it easier to identify recurring themes in the responses.

Upon discussing the results with the team we identified the main issues our customers are facing and agreed on which ones to address next. Despite the confusion about the functionality of the feature, we discovered that some visual elements were still understood with ease, like the tracking bar visual or the achieved wearing time.

  • Testers tend to believe the displayed wearing time belongs to the current day and not the previous day.
  • Hearing goals are not recognized as goals by the testers.
  • There is no visual and conceptual separation of two sections in the feature, leading to confusing controls.

3. Drafting and testing

After identifying the main pain points, we came up with very defined ideas on how to improve, so it felt easier to explore them directly on mid to high-fidelity mockups.

The visual exploration took different directions, but the main points for design to follow besides adding today's wearing time were: keep the tracking bar element, keep the card layout, and keep the achieved time close its corresponding bar.

We ran a preliminary usability test similar to the one done in the first step, and we happily discovered our first design iteration was easier to understand for our testers. The completion rate and average time spent in the task were our main performance indicators.

We ran then a second more extensive usability test on both the implemented design and the redesign. We wanted to test the changes done after the last test, but also we wanted to get direct comparison between designs by the testers.

Final usability test flowchart: users were tasked with refreshing their Wear Time and finding the article titled "Itchy ears". They could finish the tasks in any order. Underneath the summary report from maze.co.

Version 2 tested flowchart

Current implementation: 5 testers out of 10 completed the task. They averaged 226 seconds to do so.

Tested redesign: 8 testers out of 10 completed the task. They averaged 81 seconds to do so.

Our testers vocally praised the new design :)

4. Delivering a user-centered solution

At this point of the process the new design has been proven to be an improvement compared to the implemented one.

We have a winning solution!

However, we went in for a last interface adjustment to really push the design's quality. This last change strengthened the multimodal relationship between the worn time, the goal time, and the progress bar.

We ran a 20-second comparative test with this last version to make sure our intentions did not ruin the success we had so far. Fortunately, it worked just as intended, and testers preferred the latest design.

Phone at the left showcase the design that had been tested so far. The phone at the right displays the last round of changes, and the final design.

Comparison between the two last versions of the redesign

Test the prototype youself:

Hearing Coach redesign

Overview

The Hearing Coach feature was added to the audibene hearing care apps to assist new users during their hearing aid trial period, functioning as both an interactive tracker for wearing time and a digital coach.

Highlights

  • Addition of the current day wearing time tracking
  • Adoption of the double diamond model as a workflow methodology
  • Integration of the feature to our design system
  • Improvement of the visual design and brand alignment
Product Design
Material Design
Human Interface Guidelines
UI
UX