Project Description
Release date: 2017
Role: UX Designer
The Virtual 4D Menu was developed for BragiOS 3.0 and The Dash Pro True Wireless Earphones.
This innovative feature utilizes Kinetic UI, allowing users to control the menu with head movements rather than manual interaction with the earphones.
The Challenge
The Virtual 4D Menu was the first project I worked on at Bragi. The goal was to create a hands-free interaction method for users. Building on earlier software releases—where the earphones could register head nods and shakes to accept or reject calls—we expanded that framework into a comprehensive menu system.
Information Gathering
Building on lessons learned from the previous call accept/reject feature, the 4D Menu introduced a new set of challenges regarding established standards for hands-free interactions. At the time, nothing on the market had attempted what the 4D Menu aimed to achieve.
When tackling these challenges, a systematic approach to designing intuitive, distinct gestures is crucial. Here are some considerations and potential solutions for each question:
- How to design a gesture that the user could use to enter the menu?
- How does the user navigate the menu itself?
- How does the user select a category?
- How does the user exit the menu without having selected a category?
- Which features are appropriate for usage in the menu?
- How does the menu act when connected to the phone?
- Customization?
Design Approach
To address those questions, we began by establishing a set of technical and user-related requirements as a foundational basis for both internal and external testing.
We then held a workshop with various stakeholders to refine these requirements and ensure the product’s viability. From a design perspective, we developed user stories, which helped us derive technical requirements, providing a solid starting point for the project.
Enter The Menu
The initial challenge was to determine a robust, stable gesture for entering the menu—one that wouldn’t be accidentally activated during activities like walking or exercising. To address this, I held several brainstorming sessions with design colleagues to map out potential gestures. Collaborating closely with engineers, we developed various prototypes that were initially tested with a small internal group over 1-3 days. This iterative testing process allowed us to identify and resolve significant issues early on, ultimately revealing which entry gestures offered the best balance of stability and ease of use.
Navigation
After entering the menu, it was essential to provide users with an intuitive way to navigate its structure. We explored both horizontal and vertical layouts, prototyped each approach, and ran short test cycles to refine our ideas. During real-world testing by the design and development teams, an interesting challenge emerged: the menu would sometimes drift during use—such as when a vehicle turned—which made it difficult for users to reliably select functionalities. To address this, we experimented with different numbers of menu entries, ranging from three to six, and focused on ensuring that users could clearly identify the currently selected function.
The original approach used static vectors with voice prompts and subtle noise cues to mark transitions between functions. However, we discovered that minimal head movements caused rapid jumps between functions, leading to an overload of audio cues and straining the earphones' processing power.
To address this, we restructured the design by making the vectors dynamic. With this new approach, as the user transitioned from one vector to another, an overlapping buffer provided smoother control and prevented abrupt shifts. This buffer not only improved user control but also reduced the processing load on the earphones.
Selecting and Exiting
We already had a head gesture in our Kinetic UI to accept calls, so we adapted a slightly modified version for selecting a function. However, we soon realized that this left no option to exit the menu without making a selection, which frustrated both testers and the development team. To address this, we reviewed our existing library of head gestures and decided to implement the familiar head shake gesture for exiting the menu. This choice ensured a seamless experience, as users were already accustomed to that gesture from other parts of the system.
Features and functions
With the menu structure and gestures established, it was time to organize the menu itself around two primary user contexts:
- Connected to the phone
- Not connected to the phone
While connected to their phone, the menu enables users to leverage their preferred voice assistant by replacing one menu item with this functionality. Conversely, when the phone isn’t connected, that menu item is substituted with an offline function, ensuring consistent usability regardless of connectivity.
The features we ended with selecting were:
- Skip to the next song
- Play/Pause
- Activities report
- Voice assistant(Online)/Activities
Customization
Originally planned as a post-release update, the ability to customize the 4D menu—allowing users to organize, rearrange, and switch the layout to suit their preferences—was ultimately not implemented before I left the company.
After releasing the software, we discovered that users felt uncomfortable using the menu in public. For instance, one tester mentioned that people on a train gave him strange looks when he navigated the menu with head movements, while another user was confronted when it appeared he was staring at someone during use.
We also learned that some users mistakenly thought the menu was ideal for use while driving, which raised safety concerns. This feedback made it clear that a warning should be incorporated into the app to discourage use in dangerous situations.
All Images and Videos are subject to © Copyright 2019 Bragi GmbH.
