top of page
Aim of This Project
The aim is to advise customers on the selection of products when they are unsure what product they want.
Customers can ask the store assistants for advice when they come to the store.
The educational content should be integrated in a way that helps customers shopping online with this problem.
.
Take-home challenge: Notino
RESPONSIVE WEB APP
Assignment
Integrate educational content into the existing mobile website notino.cz. Suggest how and where it would be useful to display educational content so that the resulting solution fulfils the project's purpose as much as possible. The output should be a final visual design, including the display of the educational content itself.
.
Problem Statement
Customers shopping online do not have the knowledge of a store assistant available, making it difficult for them to select and buy the product.
.
User need
Customers need educational content integrated into the website in a way that makes it easy for them to choose products and buy.
.
Audience Definition
Frequent User’s Characteristics Observations
.
User Journey Map & Mental Model
.
Competitive Analysis Findings
.
LOOK FANTASTIC
This brand integrated educational content through a secondary menu bar in coral colour, articles, and a sliding menu.
_edited.jpg)
_edited.jpg)
SEPHORA
This brand uses educational content in product descriptions, search categories reflecting trends and values, and through the Community channel on desktop, but this is missing from the mobile version.
User Flow - Selecting & purchasing perfume.
SOLUTIONS
1. Educative Banners
Solution
In the perfume section, I created three banners with call-to-action buttons that were displayed as a sliding animation based on timing.
Reasoning
I decided on this variant because, unlike the original marketing content, it tries to advise and bring the user closer to his goal.
It is the user's first contact with the site, therefore we should avoid overwhelming the user and supporting him during the selection process.
2. Try It First at Checkout
Solution
Before ordering the product itself, the user gets the option to tick "Order with tester"
Reasoning
To assure that the users won't risk wasting their money, on a perfume they might not like, I have placed the Order with Tester button before the checkout.
At the same time, it tries to prevent the user from leaving the page.
3. Learning about Fragrances
Solution
The menu is adapted for direct access to educational content because it is one of the first screens a new user comes into contact with. I have reorganized the items into folders through card sorts so that there was also room to transition to the educational content.
Reasoning
The purpose of the different menu is to ensure that the user has a choice between browsing and educational content first and to break down educational content into four categories with different icons to make it easier to absorb.
4. Interactive Fragrances
Solution
Interactive ingredients in the carousel library. Section "Recommended", with a list of products underneath, changes depending on the ingredients selected.
Reasoning
The purpose of this display is to get the user to engage their attention more and at the same time to notice the changing perfumes in the "Recommended" section.
The difficult choice of selecting a perfume becomes fun.
bottom of page