iWeb Navigation Redesign

Brief

Stakeholder

Director, UX

Needs

• Improve the usability of the navigation menu;
• Offer a better match between the task, the way users think and make their decisions, and the actual grouping of the information;
• Better direct our users to the appropriate content, thus eventually improving conversion rates and lead generation.

Constraints

• The navigation structure and menu had to be easily integrable in WordPress in order to not slow down the migration from Drupal to WordPress too much.
• Time (about 5 months)

Core Team

• Director, UX
• Content Strategist
• Art Director (left after 2 months in the project)
• Visual Designer — that’s me!
• UI Developer

My Role

Because the Art Director (who also had the role of UX Designer) left after 2 months in the project, I had to take over some of his tasks and responsabilities. Overall, except for the UI Developer, all the members of the core team had an equal amount of work for research and analysis.

Deliverables

Competitor Analysis

At the beginning of the project, it was important to us to benchmark the competition and similar industries to learn how they structure their website and approached their navigation menu. When you are designing a navitation system, it’s important to consider the users’ knowledge and previous experience; When the user arrives on your website, he’s in his discovery phase and probably visited other websites before. Therefore, using a technical language that is familiar to the user is non-negligible.

In total, we analysed more than 20 competitors.

Screenshots of my part of the competitor analysis (PowerPoint) Example of benchmark

Information Architecture

Individually, all members of the core team did a card sorting excercice and presented its own version of the information architecture that made the most sense. Since it was subject that had been already discussed a lot before doing the project and because I alreadu had an idea of what was going to be presented by my collegues, I thought I would present something different just to spark a discussion during my presentation.

After the presentations of each others’ propositions an d arguing on what would be the best IA, the Art Director and the Content Strategist invidually prepared a more polished version of the sitemap. Even if it wasn’t one of my tasks, because I had lot of interest in the project, I decided to do the same excercice on my own.

Ultimately, after many sketches and team discussions, it was the information architecture that I proposed that was chosen and presented to stakeholders.

UI Design

Based on the research and wireframes/prototype made by the UX Director, I designed the UI of the navigation menus.

Old version of the navigation menus Prototype of the new navigation menus (Axure RP) Final UI Design of the navigation menus (designed in Photoshop, prototyped in Marvel)

Because our team also wanted to provide a great mobile experience, we decided to design a mobile (responsive) version of the menu. I was assigned to design the UX/UI.

Overview of the mobile version (designed in Photoshop, prototyped in InVision)

Results

Internally, all stakeholders were quite satisfied with the end result because the products, the services and the solutions were now logically categorized, and because the information artchitecture was more representitive of what customers were looking for.

The Support department was also very glad to see that we integrated a clearer support menu that would be more easily accessible. Moreover, I noticed a 46.55% increase in the proportion of visitors on the Support page coming from the homepage, which could mean that the menu is now more visible and easier to understand.

Finally, I wanted to see if the redesign had other significant effects on our key performance indicators, but considering the fact that we were facing other issues that affected the website (e.g., 50% drop in visits compared to last year’s period) and because the search engine marketing strategy changed (smaller budget and more Unbounce landing pages), the numbers were mostly irrelevant to my analysis.