How do you help users find what they need if your app is a mega app with many mini apps (“applets”) housed within it? What if every user needs just a couple of the applets, but each user needs different ones? How do you prioritize and organize them so that users spend more time doing, less time digging?
This is a challenge the Bloomberg Professional mobile app has. Bloomberg’s UX team took an iterative approach to solve it, updating the app’s menu twice in the past few years. We started with a typical springboard, then rolled out a highly editable two-column layout, and finally arrived at a simple list view. This post will explain the story behind this evolution.
What do we know?
Who uses Bloomberg Professional app?
Both clients and Bloomberg employees use the app. The app is an important tool for clients to monitor critical market information. Bloomberg employees use the app to communicate with their colleagues and stay on top of their busy schedules.
How do they use the app?
- The menu is a navigation hub. No content is displayed on this screen.
- Every day, most users of the app use just a few applets that relate to their workflow.
First iteration: Springboard menu – visual but not very useful
App launchers typically use a springboard pattern. Users can rely on the color and established branding logo (Twitter for example) to locate the app they are looking for.
A springboard is typically used in mobile operating systems. Take iOS,for example, where a user can see and launch all the apps they downloaded. It fits a lot of items into a relatively small footprint. It also maximizes the space for the app icons. However, it has one disadvantage: it works well only when these icons can be easily recognized by the users.
Bloomberg Professional Springboard Menu: many of the icons are not universally recognizable. Text labels are very small making it even harder for users to differentiate item from item.
User research shows that, due to the lack of a standard usage, most icons are often reduced to visual noise that hinders users from completing a task. This is the exact challenge the springboard Bloomberg menu has. Most of the applet icons were not standardized icons. They did not help users to make an informed decision easier and faster. To make matters worse, the text labels underneath the icons were also very small so additional cognitive load was required to complete the task.
We learned from qualitative user research that users were frustrated. They also expressed a desire to customize the menu. As more and more applets were added to the mix, this experience became more and more painful. It was time to evolve.
Second iteration: Editable menu – highly customizable but not worth the work
In the second iteration of the menu redesign, the layout was updated to accommodate larger text labels so it relied less on iconography. An customization functionality was also introduced. Via an “Edit” button, users could not only reorder, but also resize, the menu items.
Bloomberg Professional Editable Menu: it put less emphasis on the icons visually.
This iteration solved the springboard issues discussed above by providing a more scannable layout and the ability to prioritize relevant items. It seemed that this design gave users all they asked for. However, the data showed that this design didn’t work: 1) most of the users didn’t discover the Edit functionality, 2) users still spent too much time on the menu (occasionally up to 20 seconds). Considering this screen is a pure navigation hub and users use similar items every day, their time was definitely not well-spent. Qualitative research continued to show that the users were still overwhelmed by the menu. How could this be?
We examined the design and concluded why it failed:
- Too many items, not scannable, not organized. The scannability of the layout improved slightly by changing from a 4-column grid to a 2-column grid. Unfortunately, there were still too many items and it was still hard to parse. In one of the interviews, a user told us, “I sometimes try to find things, but don’t remember where they are.”
- Edit is not discoverable. Based on usability testing with 15 users, only 68% (n=11) of them were able to discover it without any help. This was confirmed by the usage data – less than 10% of the users edited the menu.
- Edit requires too much work. For those who knew about the feature, there was another hurdle to overcome – getting them to actually put in the work. This is the dilemma of customization. It gives users flexibility, but the interaction cost is often too high. In the mobile context, where users’ time is limited and attention is fragmented, the bar for customization is even higher (when was the last time you customized an app you use?). Even though users in the interviews asked for customization, they simply wouldn’t do it when the options were given to them. This reminds us of another classic UX principle – watch what users do, not what they say. Users aren’t great at predicting their own behavior. Past examples of user behavior are much more reliable.
The Editable menu offered a solution that didn’t solve the problem.
Third Iteration: Quick Access menu – simple, relevant, and effective
The editable menu provided all the flexibility, but it relied heavily on the users. It didn’t work. Is there another way to meet a user’s individual need? The answer lies in personalization.
Personalization allows the system to take relevant information to tailor the experience automatically. For example, a weather app shows the local weather by default based on the location of the device. An organization’s intranet provides different feature sets based on an employee’s role. None of these examples requires users to set anything up. They receive the benefits simply by using the services.
When it comes to menus, both Apple and Android use personalization to help users find what they need easier and faster.
Inspired by these examples and the lessons learned from the previous design iterations, we updated the menu in 2019. The changes included:
- Quick Access: give users the things they want the most first with as little effort as possible. A personalized quick access section is introduced. Unlike customization, the app does the work, presenting users with six options most relevant to them based on their past behavior.
- Chucking & List View: if users want to look through the other things, we’ll make it easier for them to do. Hick’s Law says the longer the list, the longer it takes them to reach a decision. However, there are still techniques that can make long menus easy to use. By applying “Chunking” here, items are grouped logically so it’s easier for users to comprehend and remember. A list view also helps users more easily scan the items and decide what to select next.
We released this design and the impact was telling. Metrics on the iOS release in the first month showed:
- The time users spent on the menu was cut in half. Users were getting to places (getting work done) faster than before.
- The spikes were gone. That means users were not spending extra long time on finding an item.
- More than 96% of the selections were from the Quick Access section. It means, most of the time, users could find what they needed without scrolling the screen. What’s relevant to the users has been successfully prioritized for them, automatically.
Final Thoughts
We took an iterative user-centric approach to design the menu, changing it twice in the past few years. During this process, we looked at both quantitative and qualitative data. Each iteration was based on learnings from the previous one. At the end, we applied personalization and chunking techniques. It led to a simpler, but more effective, design — and a much better result.
Is this the end of the menu redesign? Most likely not. Digital design is always in a transitional state, especially in the mobile space. Sometimes it takes a couple of iterations to get it right. And then, what’s right will inevitably be outgrown by users’ needs. The only way to catch up is to go back to the basic user-centric design process: understand the users, test the design, learn from the users, iterate, and then do it all over again!
Are you ready for a new challenge? We’re hiring across all roles on our UX team. Browse our latest openings.
References:
https://www.nngroup.com/articles/icon-usability/
https://www.nngroup.com/articles/customization-personalization/
https://www.nngroup.com/articles/first-rule-of-usability-dont-listen-to-users/