F5 is a leading application services company that focuses on the delivery, security, performance, and availability of web applications. Previous research showed that F5’s current navigation schema was not intuitive for their key personas. Their goal was to redesign the navigation, addressing hierarchy, consistency and layout to improve the customer experience.
Making Complex Products and Solutions Simpler To Find
Previous research at F5 showed gaps in their current navigation design as users struggled to complete tasks across pre-purchase and post-purchase stages. F5 brought this usability issue to UpTop because they wanted to take a user-centered approach to reimagine their navigation and site structure. Working with key F5 stakeholders, UpTop performed card sort, tree test, and usability testing exercises to learn how users perceive, organize, and look for items under the F5 navigation. The results enabled UpTop to incorporate user feedback into the navigation architecture so that it is categorized and labeled in a way that makes sense to their core audience.
We began by performing a card sort exercise on prospective customers to learn How users perceive and organize items under the F5 navigation. From our analysis, we grouped the cards based on participants most common sorting patterns and proposed labels. We analyzed the groupings against further data analysis and UX best practices to create a proposed site map. Next we performed a tree test with the new navigation schema to learn if users could find the location by completing top user tasks across the customer journey stages. Results from the tree test showed tasks that were more successful compared to others that had difficulty. This allowed us to further refine the site architecture and elevate items that needed to be more discoverable for F5’s audience. We also proposed adding headers and descriptions to the navigation to make F5’s offerings more accessible to new users, as well as a Quick Links section to cross-link items in the navigation that had high affinities to multiple locations. Pulling together the learnings from the card sort and tree test, we created a high-fidelity prototype to test the new navigation schema using key user tasks that covered different aspects of the navigation. The usability tests were moderated by UpTop via zoom, and each task was analyzed to reveal patterns across the data.
“The UpTop team is great. They’ve been flexible…and…I really appreciate the transparency when we are working together.”- Director of Digital Marketing, F5 Networks
The first round of usability testing provided key insights into how to improve the visual hierarchy of the UI as well as the organization of the Solutions & Products section of the navigation. By the second round of testing, users were able to complete tasks quickly and had a positive reaction to the UI, noting that they liked the clean design.
Key Design Elements
- Descriptions and headers in the navigation make F5’s complex product offering more accessible and iconography provides visual context.
- Use of side bar navigation provides visual hierarchy and organization of associated categories.
- Quick Links increase discoverability by cross linking items that have high affinities to multiple locations.
- Combining Solutions & Products in the navigation allows users to easily discover F5’s offerings.