Navigation Bar Revamp
My Role
UX/UI Designer
Tools
Adobe XD
Miro
DURATION
1-month Design sprint: Started in January 2020
THE TEAM
1 Project Manager
1 Business analyst
MY KEY CONTRIBUTIONS
• Benchmark of e-commerce navigation
• Definition of personas
• Data analysis
• Concept Ideation
• Design of wireframes / mockups
• Guerrillas Test
Context
Why this project?
The Ubisoft catalog is expanding so it was necessary to restructure the navigation bar to make room for the different sections of the site. Also, new features were in development and needed to be added to the bar.
Finally, it is also a UI redesign to modernize the existing one and improve the usability and the mobile experience which was difficult.
The process
As a UX/UI Designer
Step #1 Research Phase
Card Sorting
Users had to sort cards in order of importance / logical order
They also had the opportunity to rename or make their own cards
It allowed us to learn how users call things and how they imagine things should be sorted.
Step #1
Key Feedbacks
8 users were interviewed on the current navigation bar, here some key feedbacks:
The dropdown menu takes too long to open completely before seeing the games displayed
Some categories are not clicked at all, especially those in the 3rd panel of the dropdown menu
The height of the navbar is too big
They expect an entry point by franchises
Users expect product discounts, this is the most searched category
They want to filter the catalog by platform from the menu
Mockups
Here is the initial UX and some final screens that were delivered
Dropdown menu
A constraint of the project was that a second level of navigation was needed for the NCSA website. The design therefore had to be duplicated for all resolutions.
The old dropdown menu opened one panel after another from left to right in a funnel system, which made a total opening in 4 steps and was very long for the user before seeing the products. I removed this behavior considered problematic by users. In the new version, the dropdown menu is displayed directly which allows instant visibility of the categories.
As a bonus I proposed that the gray area on the right could also feature promotional banners when there are special sales.
Before (WW)
After EMEA (1920px)
After NCSA (1440px)
Tablet & Mobile
New "Brands" tab
One of the user feedback was that they want to enter by franchises to explore the catalog. I addressed this need by creating a new, more immersive tab with clickable visuals for each franchise.
New tab created (1920px)
Tablet & Mobile
Results
Key points
EMEA and NCSA navigation bars are not similar which will create duplicates in future projects that will impact this component
There is no longer a category that has a zero click-through rate
Recent user tests have shown that the "Franchises" tab is very popular
Mobile experience has been improved based on category click analytics