Information Architecture

Vitl Navigation Bar

Objective: 

Vitl’s navigation bar needed to be re-designed because Vitl wanted to launch more products and the their current nav wasn’t flexible enough to accommodate that. We found some additional UX issues, so we wanted to take the opportunity to address and improve that at the same time. 

My Role:

I was responsible for investigating and researching the problem. And to understand clearly what are the product objectives. I’ve run a workshop with key stakeholders in order to gather all insights from a business perspective. I’ve presented the design exploration and the different ways the navigation could be approached visually, creating wireframes, prototypes, and final design.

The team I worked with:

Product manager, Head of Marketing, Head of Teach and Developers and Copywriters.

Website link:
https://vitl.com/

Discovery

I’ve asked existing users to find products based on their needs on the platform. They were navigating easy but they found the journey quite long.
The purpose of the Navigation Bar is to allow people to navigate easily between products and pages on the platform while ensuring that they are able to retain a good understand of Vitl’s overall proposition.

The problem

User and business issues

● The navigation bar is not flexible enough to add more products to sell as the structure is fixed

● The products are displayed as disconnected, discrete offerings, rather than as part of an integrated ecosystem

● It takes a long time to get to the right product - for example for Essential One from the home page, you have to click: Vitamins -> scroll down -> Find out more -> view the page.

● Within My Vitl, the navigation bar is inconsistent with the page content - this may be an issue

● Take Consultation vs. Start Now vs. Start labeling is not consistent across pages and platforms

● Current CTAs are not appropriately named - e.g. what does ‘DNA’ mean to a new customer in isolation

Open Cards Sorting

Information Architecture Workshop 

Why:

The reason I decided to organise the workshop was that I believe that collaborating and aligning everyone on the same page is essential. This can help us pull out the necessary information and also to hear all different perspectives from across an organization. And also prevent further back and forth later in the project.

How did it go:

All participants contributed and while answering the questions, we were playing with the cards and organising them by user and business needs level of importance. We’ve managed to come up with solid structure and analysing which products are priorities.

How: 

Creating a clear structure and goal. And articulating it clearly at the beginning of the workshop.  I’ve brought all key stakeholders who represent different teams from the business to play the Open Cards Sorting to solve and understand the problems listed in brief. We look at all research and findings from the past, and I’ve asked them key questions that could help us organise the information structure from the user and the business needs.

Outcome

At the end of the workshop, we’ve gathered much more clarity and a better vision of how to measure the success of this project. I had a clear idea of how to tackle the challenge and how to prioritise and structure the overall structure

Ideation

Sometimes I prefer to sketch directly digitally because it helps me to organise my thought faster and ideas.

I’ve explore 2 different mega menus. From more simple and concise listing style, that will give the product flexibility to add as many products in the future and another version with more visual approach.

The Design

The final design is using flexible visual components that will allow customers to get a quick understanding of what the products are about. Under each listed product I’ve decided to keep a very short summary about the product so people can get a quick understanding of what the product is about. The new structure allows for expanding the overall site, if necessary. And allows customers to navigate easily and understand what the overall product proposition is.

Visit the Site →

UI Design - Romina Nikolova
Content writer - Jessica Simms
Project Lead - Josefina Garat
Front End Development - Bogdan Prigorie

Previous
Previous

Vitl Homepage