Vitl Homepage
PRODUCT UI
Vitl’s homepage needed to be updated to reflect their current product offering and communicate their value proposition of ‘Personalised Nutrition’.
RESPONSIBILITIES
UI and Art Direction
Observing the user research, to ideating, wireframing and prototyping the visual solution and content structure. But also presenting it to the main stakeholders and gathering feedback. Designing final homepage visual solution, Art direction creation and briefing external agency on shooting assets. Reviewing the final outcomes with the team.
TEAM I WORKED WITH:
Project Manager, Marketing lead, Copywriter, Content Creators, Front-end developers, Photographers, External agency
HOME PAGE ANALYSIS
It’s all based on some data provided from the tech team and also analysis from my side.
RESEARCH DATA
The tech team provided me some insights from previous user interviews of how people are interacting and finding the information on the site. Many people were saying that they find confusing the homepage, the product offering, and the imagery on the header.
Problem understanding
FINDINGS
the homepage is not communicating what is their full offering of products and the whole structure is around the personalised package.
not clearly describing how the product’s ecosystem works.
not using correct CTA wording for a smooth experience.
There were also some UI problems such as CTAs which looked like inactive buttons.
The rotating header component with happy people giving a misunderstanding of what is the platform about.
Findings
the homepage is not communicating what is their full offering of products and the whole structure is around the personalised package.
not clearly describing how the product’s ecosystem works.
not using correct CTA wording for a smooth experience.
There were also some UI problems such as CTAs which looked like inactive buttons.
The rotating header component with happy people giving a misunderstanding of what is the platform about.
Ideation & Design evolving
IDEATING, SKETCHING & EXPLORING | WIREFRAMING
Taking into account all the insights and finds from the research the next stage was to sketch and wireframe the initial ideas of possible structure in a storytelling narrative giving overview information of what VITL is about. Starting with the Mission statement combined with clearly displayed products and communicating how it works step by step. The layout structure is including some of the existing modules such as testimonials and the experts which help for the credibility and trustworthiness of the products.
WHY
Since we knew people are not clearly understanding what is VITL about I needed to include in the hero section an aspirational product display vs a lifestyle option (to test later). As well as ecosystem module on the 3ed scroll of the page after how it works to achieve a storytelling narrative. In this component, people can easily navigate to the product they might be interested in.
CHALLANGES
To find a way to present all of the products in a way that Vitl’s customers will clearly understand how the ecosystem works
Design evolving &
Art direction
RESPONSIVE IMAGES - PRODUCTS DISPLAY
Exploring how to showcase the products as responsive components
The aim is to translate the brand values through two different concepts:
CONCEPT TWO
Displaying real people in their everyday life. Using Vitl’s user’s personas and their healthy routine.
CONCEPT ONE
Showing how all Vitl products are compelling each other with lifestyle touch adding lemons and fruits which are associated with a healthy lifestyle.
Design evolving & Art direction
The homepage is design to displays all current products, as well as relevant lifestyle components, but also to inform the scientific approach.
The Design
UI OVERVIEW
The homepage is designed with a user-friendly approach, showcasing what Vitl is about. As well as the products you can browse and buy on the platform.
The design was created following the product component library and improving details such as increasing the body text size on mobile. However, I introduced new modules for responsive product display. Consumers can now compare and browse the products at the same time.
The product display component works fully responsive. The way I achieved this was by creating the mobile component as a carousel and we had to photograph the products in two different compositions. As well as working very closely with developers to ensure that the layout can be easily translated and developed and to ensure we won’t have any technical issues implementing it later on.
UI Oveview
A/B testing
We’ve run A/B testing on the hero section of the homepage, to find out which type of product display will engage better with their customers.
We measured the success based on the increased number of taken consultations.
The one that performs the best was the aesthetic flat layout product display.
Learning
I wish we could run more tests and research. Such as a better discovery process, and testing the prototypes before heading it for development.
Visit the Site →
UI Design - Romina Nikolova
Art Direction - Romina Nikolova
Product Shooting - Alina Nelson
Content writer - Jessica Simms
Photo retouching - VEO agency
Project Lead - Micha Patel & Josefina Garat
Front End Development - Bogdan Prigorie