INTRO

Surround sound feature redesign for Logitech G software, G HUB.


Goal

Elevate the experience for the Surround Sound configuration.


Insights

Accessibility

It was not accessible for users who were not able to use mice. They cannot change the values by pressing the keyboards.

Usability

Gamers would like to adjust the sound channels to better support their gaming experience. But they had to manually adjust each sound channel to achieve a simple sound experience which made the experience cumbersome.

Consistency

The UI was built with dated components which was inconsistent with the other parts of the software.

Screenshot of the original Surround Sound Config Design.


Opportunities

Accessible UI

Design with accessible UI components that help users with disability.

Intuitive Interaction Model

Help users configure surround sound via a simplified and intuitive interaction model.

Right Visual Language

Refresh the UI to keep it consistent with G HUB’s visual language.




EXPERIENCE DESIGN



Learning

I learned why users configured their surround sound:

Hear Their Families

Users wanted to hear their families when gaming. They made their backs or sides more open so they could hear when others called them. (A use case. They have a baby in the crib beside them when playing games.)

Hear Footsteps

  • Users wanted to hear the footsteps clearer on their backs (as they cannot see their backs) when playing First Person Shooting (FPS) games. So they would tune up the volume at their back.

  • Some users only wanted to hear the footsteps so they could know if someone was close by. To achieve that, they would mute the side sound channels and only leave the front and back channels on.

Solutions

Based on the understanding of our users, I came up with this design.

NEW INTERACTION MODEL: Drag and Reposition the Circle

  • To amplify the sound of footsteps, rather than allowing users to adjust each channel individually, they can simply drag and reposition the circle to their back, emphasizing and amplifying the footsteps' sound behind them.

  • To hear their families better, users can reposition the circle to leave their sides or backs empty, reducing the volume from the games. This helps them better hear their families when they call out.

EASY FINE TUNING through a More Accessible UI

  • To help users ONLY hear the footsteps nearby, I preserved the previous interaction model within the updated visual language and accessible UI components. As a result, users can fine-tune the side channels to isolate and hear only the footsteps by entering values in the text fields. And users could switch between the 2 modes.

To make the UI more delightful, I added some visual spice. When click the Test Surround Sound button, ripples show up. This allows users not only to hear the sound but also to visually experience it. ↓

Here are the screenshots of the full screens. (Click them to zoom in.) ↓

VALIDATION

After internal reviews and iterations, we brought our first final version for user testing.

Learning

  • The 2 UI models worked well generally speaking.

  • Users loved the new interaction model. And they mentioned that they would prefer to use the new design. It was more intuitive for them.

  • Initially, users didn't recognize that the icon was for muting the sound channel. However, they figured it out on their own while exploring the interface.

Final Version

We didn’t change much as the feedback was very positive. The only update was the MUTE feature.

Some users expressed doubts about their likelihood of using the MUTE feature. They suggested that if they wanted to mute a channel, they would simply enter "0" in the text field.

That was why there was no MUTE feature in the final version.

THANK YOU ;)

Cover image by Susan Wilkinson, from unsplash.com