The project
One of my first projects was to review the menu and structure of the iOS and Android apps. At the time I started, the number of people working in the apps had been gradually increasing. As a result, the content had also grown. What was once an elegant flat information structure had become more complex, with cross-links and deep structures. The problem was that a hamburger menu no longer worked.
The menu's placement, in the upper left corner, clashed in with the back button in iOS. This meant that the menu was only available on the home pages, and so users got stuck in silos. Furthermore, the hamburger menu did not show off the app's content effectively.
My role
In my role as a UX designer, I led the design process in the team, held workshops and performed user tests. I collaborated with an art director to develop a hi-fidelity design.
Setting goal with my team
The first thing I did was to holding a workshop with my team to unite on goals. We agreed upon:
- A menu that was better suited to the content
- The menu must entice users to explore
- A more visible menu that is clear to the user
- The menu should make it easier to experiment and test new content.
In cooperation with the analyst and my product owner I then created an impact map and the analyst set up KPIs.
Design Studio
To gather many ideas I held a design studio with participants from both mine and other teams. The goal was to explore solutions, but also internal anchoring.
In the design studio participants:
- watching film clips from user tests and looked at statistics to understand the problem.
- Explored various navigation patterns
- Sketched solutions both individually and in groups
Towards the end of the design studio, we had reached a consensus on a direction, with navigation at the bottom with different details to explore further.
New information structure and terminology
Some members of the team were initially unsure if navigation at the bottom of the screen would work in our android app. We agreed on the hypothesis that this pattern had become a generally accepted solution and I made sure to validate this during the process.
In order to get eleven menyitems down to four (the max amount in bottom menus) I looked at the design studio's results and analytics data in order to understand which pages should stay high up in the structure. Some pages were merged, while others were moved.
Test & iterate
Card sorting & Icon testing
I performed sorting exercises, where participants were allowed to organise content under suggested sections. This to ensure that the new information structure was logical. I also conducted icon tests with the participants.
Prototypes & usability testing
The art director and I developed clickable prototypes in Principal.
I performed usabillity tests on the prototypes and compare the results with those of the production apps.
Things we learned during the test phase:
- We saw that more of the users started to interact more with the content in the prototypes.
- Excessively abstract icons and terms resulted in poorer usability and more sprawling interpretations.
- A search icon in the upper right corner was perceived by several users to be an internal page search.
- When "Settings" was placed as an icon in the upper right corner, it became harder to find. So we went further, putting the settings view and all personal functions into a new section that we called My Page.
- A few experienced users did not see the bottom menu at all. We therefore chose to include an explanatory splash screen when the page was launched.
Final version
Beta release
We started by releasing the new menu to our beta groups. During the beta testing, I followed up the experience with surveys.
The beta testers could also get in touch with feedback directly via the app. I answered questions and suggestions from test participants.
Results
- The app's features got a clear boost
- We saw increased movement between the different parts of the app. We also saw that more people started listening to both live radio and podcasts.
- The new menu did not affect the overall conversion rate. One reason for that may have been that it was not easier to understand, but was easier to use and thus attracted more exploration.