Case Study

Header & Navigation Redesign

UI/UX Design

 

The Challenge

The Bronto Marketing Platform is about to undergo the first head-to-toe redesign in years. Undertaking such an extensive project means some serious planning. As a team, we decided the best course of action would be to redesign the header and navigation first. This approach would make a big, beneficial impact on our users and also be the foundation for our framework as we move ahead with the rest of the redesign. Some frustrations that our users faced were overall findability, and also awareness of where they are in the platform.

Before
After
 

The Research & Process

The user researcher on the team lead an extensive effort of conducting a card sorting activity with internal stakeholders and a Tree Jack exericise with external users. With the results from these activities, she was able to develop a new structure for ou information architecture. I also developed several iterations of new navigation in a variety of styles and colors.

 
 

Once we felt confident with the IA, I developed a prototype using InVision. The prototype was tested with 8 users in which they were asked to perform a series of 9 tasks. The users successfully completed 8 of the tasks at a rate of 88% or higher. The ninth task was only successful 50% of the time. I went back to the design and iterated to achieve a higher success rate on the final task. I was also able to take some overall feedback and incorporate it into the design, such as better definition in the hierarchy of the navigation.

The Solution

The final design for the new header and navigation takes into account the new IA, and the results and feedback gained in user testing. The navigation items have been renamed and reorganized to make more sense for how our users interact with the product. I also moved the navigation from the top to the left side which enables the platform to shift to a persistent navigation model giving the user insight into where they are in the product at all times. Some improvements made to the header include quicker access to account information, more entry points to find help, and more visibility to platform notifications.