Simpler and more intuitive navigation
Starred
Starred asked me to research and design a new navigation system. The old navigation had served well but was feeling outdated and leading to mixed results. I came up with a new system that allows more flexibility while making user routing more friendly.
Background
Starred has actually been around forever. The company started in 2012 as a feedback solution, aimed at creating feedback surveys for respondents. The tool was really well adopted, especially by business-to-business customers.
Fast forward 10 years and the focus has been dramatically changed towards helping recruitment teams understand candidate feedback. Sadly the navigation system that they used since the beginning had seen barely any changes.
Research
My research consisted of a couple different steps. Firstly I talked to internal users to see how they navigated through the platform. Since they were the power users I figured I would understand very quickly what the most taken routes were. This helped to understand the first layer of navigation.
After this I created an information architecture diagram. This is a technique to visualise all navigation elements of a webapp. It helps to quickly identify what routes are possible and how many layers of navigation there are. When I saw the diagram for the first time, I realised there was a lot of work to do.
Now that I knew what the main navigational items were and how they were linked together, I did some research into how often users went through certain parts of the diagram. What turns out? 80 percent of users only used 20 percent of the first layer of navigation.
Now that I knew what the main navigational items were and how they were linked together, I did some research into how often users went through certain parts of the diagram. What turns out? 80 percent of users only used 20 percent of the first layer of navigation.
Ideate
Now that I fully understood the challenge Starred was facing, I started drawing away. I came up with over 10 different options for a new navigational system, spreading equally between vertical and horizontal navigation. Some of the options are shown below here. I came up with multiple different interactions for covering subnavigation.
The discussions that followed were interesting. We couldn’t agree on which was better, vertical or horizontal navigation. Vertical navigation is all the rage in SaaS but horizontal navigation is often times more space effective. To solve this, I re-created the two favorite options into prototypes, one prototype for vertical and one for horizontal navigation.
Eventually we landed on vertical navigation, mainly due to the fact it aligned more with our mission: accessible, actionable insights. By laying out our navigation along the left side, we created more space for more navigation items and thus for more dashboards.
Test
The proof is in the pudding. I created multiple prototypes and tested these with customers. Using a rainbow sheet I was able to write down all my observations. Following a simple logic we concluded the most important issues and addressed them in next prototypes.
Development
The implementation of navigation is always hard and tiring. Since it touches literally every part of the platform, the development and testing was difficult. I was involved all the time with the front-end development team to help and assist them wherever.
Conclusion & Takeaways
Simplying the information architecture is a great feet. Not just from a technical perspective did we decrease technical debt but most importantly was the UX improvement we created. I’ve redrawn the most frequently taken routes and users seem to approve.
In a user survey we’ve noticed a 5% uptick in a general user experience question since implementing. Specifically, there have been multiple comments praising the new system marking the accessible dashboards as a big plus.
Also in qualititative feedback have we seen great praise.
Personally I feel like navigation projects are on of the hardest to do well in UX. Literally everyone has a opinion about navigation and it touches every single feature and part of the platform.
Niels Joop Rozemijer, 2023
