Context
In 2019, I joined Bang & Olufsen app team for 7 months. The team was composed of a product owner, a project manager, 10 developers, 2 designers (including myself), and 2 interns. We worked in close collaboration with B&O hardware developers and designers.
UX Visual Design Transitions +Implementation
High-end luxury Scandinavian electronics company
Who is Bang & Olufsen?
-
Improve the experience of Bang & Olufsen application according to user research insights, update its digital identity, and create a design system.
The Ask
-
Tonetouch
To kick off this project, I made an audit of the application’s home and main feature, called Tonetouch which is the main reason why users download the B&O application.
Tonetouch allows users to tweak and control the sound settings in their B&O products, like an equalizer.
What you see on the view on the right is Tonetouch: A combination of the green chart, where users can drag a dot around to change the sound settings, and atmos, a part of Tonetouch present only in the most complete B&O products, where users can have more advanced sound settings available and they can change it by interacting with it through toggles in addition to the green chart.
Before & After
Although I was invited to create a new digital identity for Bang & Olufsen’s application, it was important to “be honest” about what was already designed and implemented due to B&O’s budget and time constraints and all the work that was already done and the insights it was gathered on the way.
Design Decisions and rationale I
As the gestures of opening and closing the drawer at the bottom and the gesture of dragging the dot around were collapsing, I opted to prioritize Tonetouch by removing the drawer and creating a drop-down menu (view on the right) where users can access different sound modes already saved in the application.
If the user wants to create a new sound setting, they can now easily identify the SAVE button without having to interact with the drawer as in the previous experience.
Design Decisions and rationale II
In the previous experience, the green chart and the toggles were placed in different views that the user could access through the nav bar (before view).
According to user tests, this was causing confusion as users thought the toggles were a different way of visualizing the green chart when actually, the green chart and the toggles complement.
I opted to put both on the same view to make it easy to understand the relationship between both these elements, as any interaction on one will interfere with the other.
Exploring Tonetouch scrolling behavior
For functional and experience purposes, I explored different scrolling behaviors using After Effects. I used these prototypes not only as exploration but also as a way to communicate with the rest of the team.
As Tonetouch is a very important piece of the application, I didn’t think any other component should overlap with it or it shouldn’t be hidden behind anything.
You can see in the explorations below the different behaviors that were explored:
Atmos (the toggles) behaving as a drawer and overlapping Tonetouch;
Tonetouch being hidden behind the navbar;
Small scrollable area for atmos;
Tonetouch shrinks when the user is interacting with Atmos but is still visible on the screen so the user can understand the relation between both settings.
Cards System
Bang & Olufsen offers different kinds of products from a range of accessible to very high-end sound systems such as headphones, TVs, sound bars, and speakers.
The number of features every product offers are based on this range, making the predictability of how every product will be represented on the UI, complex.
A solution I found was to create a card system where every feature has its own card and, all cards follow the new identity, fitting well together. Making this puzzle a lot simpler to solve.
Responsibilities
-
