UX         INFORMATION ARCHITECTURE

Symrise and how users navigate in their website

The project was to design, test and validate the best possible way to help users find content in an easier mega menu.

wire 2 copy

Project overview

What the expectations to accomplish.

Symrise is updating their digital content, this brought new pages and new structure to the website. Needing then a validation of how users can find relevant content fast.

Symrise is a global supplier of fragrances, flavorings, cosmetic base materials and substances as well as functional ingredients. Symrise is one of the world's top suppliers in the F&F market. The nearly 30,000 products are mainly produced on the basis of natural raw materials. The customers include manufacturers of perfumes, cosmetics and foods, the pharmaceutical industry and producers of nutritional supplements, pet food and baby food.

Goals

What I was expecting to accomplish.

Mega menu

This trend idea of mega menus are used when clients have a large amount of content and pages.

Easy to navigate

Help users navigate is important to keep them engaged with the website. Easy menus help users to keep browsing content.

Content with 1 click

Research andtesting with card sorting generated a new IA. I designed a menu that suits all items in the same visual level.

The problem

And why it's relevant.

And why it's relevant.

The number of main pages made me test even more several design ideas, as 12 items were principal links and 60+ internal pages need to be displayed in the navigation. 

Using their analytics I could see that we had two main screen sizes to make it perfect, small desktops and tablet. Previous navigation didn't have the idea of mouse resting and positive areas, this had to be designed, tested and developed. Another issue found was mouse states, when breadcrumbs are displayed hover on main items block breadcrumbs view.

ezgif-3-c7c711a281d1opt

The solution

It's time to get real.

For all screens, the main idea was to display all pages in the same level using visual hierarchy as the differentiator factor.

I've started wireframing 4 ideas of megamenu, testing them with designers and users, until I reached the correct solution. Stakeholders then added a "feature content" story to be added in the navigation. A challenge started to take place, and I have delivered them the "perfect" state navigation with an additional Nielsen Norman idea of positive and negative areas of mouse resting.

symrise-wireframes
desktop-non-interactive
Mobile
Mobile scent-open
Mobile investor-open

What I've learned?

Reflecting back on the project.

Navigation can be a good exercise to see how users actually find content on a website, and help them with this task.

"Content is King." When you position yourself as a designer in the users' place and you feel their pain, you will do great findings to help them. What I could have done differently are interactions and language selection. Clients need users to navigate is important in all spheres of the business, so an easier way to navigate is completely necessary and ideal.

Other projects

© Copyright 2018. Apparicio Junior - UX/UI Designer
© Copyright 2018. All Rights Reserved.