👨🏼💻 Work Project
👨🏼💻 Work Project
👨🏼💻 Work Project
Improving Nove25's e-commerce product details page
Improving Nove25's e-commerce product details page
Improving Nove25's e-commerce product details page
Improving Nove25's e-commerce product details page
See live website
Client
Nove25
Role
UI/UX Designer
Tools
Figma
Notion
Adobe Creative Cloud
Contentsquare
Typeform
Industry
E-commerce platform
Year
2022
Team
UX Designer
Product Manager
Front & End developer
Company Overview
Company Overview
Company Overview
Nove25 is an Italian jewelry brand with 18 European stores and a custom e-commerce platform. The entire platform was developed in-house using Prestashop, Elementor, and custom code.
Nove25 is an Italian jewelry brand with 18 European stores and a custom e-commerce platform. The entire platform was developed in-house using Prestashop, Elementor, and custom code.
Nove25 is an Italian jewelry brand with 18 European stores and a custom e-commerce platform. The entire platform was developed in-house using Prestashop, Elementor, and custom code.
⚠️ Problem Statement
⚠️ Problem Statement
⚠️ Problem Statement
How might we display Nove25's product offerings to increase customer understanding and conversion rates?
How might we display Nove25's product offerings to increase customer understanding and conversion rates?
How might we display Nove25's product offerings to increase customer understanding and conversion rates?
Key objectives:
Key objectives:
Expense Tracking
Expense Tracking
Expense Tracking
Expense Tracking
Design a way to record and categorize expenses.
Design a way to record and categorize expenses.
Design a way to record and categorize expenses.
Budget Management
Budget Management
Budget Management
Budget Management
Develop a feature for users to set and monitor budgets.
Develop a feature for users to set and monitor budgets.
Develop a feature for users to set and monitor budgets.
Goal Visualisation
Goal Visualisation
Goal Visualisation
Goal Visualisation
Include visualizations that show progress towards financial goals.
Include visualizations that show progress towards financial goals.
Include visualizations that show progress towards financial goals.
Resources
Resources
Resources
Resources
Help users manage their finances better, by showing tips and tricks or articles.
Help users manage their finances better, by showing tips and tricks or articles.
Help users manage their finances better, by showing tips and tricks or articles.
Site audit
Site audit
Site audit
Analyzing our product details page to find opportunities to improve
Analyzing our product details page to find opportunities to improve
Analyzing our product details page to find opportunities to improve
In order to understand how I might help the team achieve its goals, I decided to do a first-site audit analysis in order to learn the main pain points of the actual website. I was able to get multiple insights not just from what I could see but also I wanted to ask for feedback also to my team to have a different perspective.
In order to understand how I might help the team achieve its goals, I decided to do a first-site audit analysis in order to learn the main pain points of the actual website. I was able to get multiple insights not just from what I could see but also I wanted to ask for feedback also to my team to have a different perspective.
In order to understand how I might help the team achieve its goals, I decided to do a first-site audit analysis in order to learn the main pain points of the actual website. I was able to get multiple insights not just from what I could see but also I wanted to ask for feedback also to my team to have a different perspective.
Competitors
Competitors
Competitors
Analyzing our product details page to find opportunities to improve
Analyzing our product details page to find opportunities to improve
Analyzing our product details page to find opportunities to improve
In order to understand how I might help the team achieve its goals, I decided to do a first-site audit analysis in order to learn the main pain points of the actual website. I was able to get multiple insights not just from what I could see but also I wanted to ask for feedback also to my team to have a different perspective.
In order to understand how I might help the team achieve its goals, I decided to do a first-site audit analysis in order to learn the main pain points of the actual website. I was able to get multiple insights not just from what I could see but also I wanted to ask for feedback also to my team to have a different perspective.
In order to understand how I might help the team achieve its goals, I decided to do a first-site audit analysis in order to learn the main pain points of the actual website. I was able to get multiple insights not just from what I could see but also I wanted to ask for feedback also to my team to have a different perspective.
Saturation in the Tour Agency Sector
Saturation in the Tour Agency Sector
Saturation in the Tour Agency Sector
The industry is saturated with companies specializing in itinerary planning and local experience curation.
The industry is saturated with companies specializing in itinerary planning and local experience curation.
The industry is saturated with companies specializing in itinerary planning and local experience curation.
The industry is saturated with companies specializing in itinerary planning and local experience curation.
Missed Sales Opportunities
Missed Sales Opportunities
Missed Sales Opportunities
Despite their expertise in crafting engaging experiences, these companies struggle to effectively sell their services due to obsolete online platforms.
Despite their expertise in crafting engaging experiences, these companies struggle to effectively sell their services due to obsolete online platforms.
Despite their expertise in crafting engaging experiences, these companies struggle to effectively sell their services due to obsolete online platforms.
Despite their expertise in crafting engaging experiences, these companies struggle to effectively sell their services due to obsolete online platforms.
Technological Disparity
Technological Disparity
Technological Disparity
A substantial 70% of these companies exhibit proficiency in creating outstanding travel plans but lack contemporary technology, especially in their outdated website and booking platform designs.
A substantial 70% of these companies exhibit proficiency in creating outstanding travel plans but lack contemporary technology, especially in their outdated website and booking platform designs.
A substantial 70% of these companies exhibit proficiency in creating outstanding travel plans but lack contemporary technology, especially in their outdated website and booking platform designs.
A substantial 70% of these companies exhibit proficiency in creating outstanding travel plans but lack contemporary technology, especially in their outdated website and booking platform designs.
Potential for Technological Innovation
Potential for Technological Innovation
Potential for Technological Innovation
There is a clear opportunity to introduce technological advancements and modernize online platforms within the tour agency sector, thereby capitalizing on the gap identified.
There is a clear opportunity to introduce technological advancements and modernize online platforms within the tour agency sector, thereby capitalizing on the gap identified.
There is a clear opportunity to introduce technological advancements and modernize online platforms within the tour agency sector, thereby capitalizing on the gap identified.
There is a clear opportunity to introduce technological advancements and modernize online platforms within the tour agency sector, thereby capitalizing on the gap identified.
Competitors Analysis
Competitors Analysis
Competitors Analysis
How do other companies structure their product details page?
How do other companies structure their product details page?
How do other companies structure their product details page?
I decided to analyze product detail pages from different industries and e-commerce sites to learn how they manage information and what type of information they are sharing.
I decided to analyze product detail pages from different industries and e-commerce sites to learn how they manage information and what type of information they are sharing.
I decided to analyze product detail pages from different industries and e-commerce sites to learn how they manage information and what type of information they are sharing.
Area of improvment
Area of improvment
Area of improvment
Lacking key product information
Lacking key product information
Lacking key product information
In comparison, the Nove25 page is missing key information that most competitors are including, such as available sizes, services and reviews, which are valuable to the user in the purchasing decision process.
In comparison, the Nove25 page is missing key information that most competitors are including, such as available sizes, services and reviews, which are valuable to the user in the purchasing decision process.
In comparison, the Nove25 page is missing key information that most competitors are including, such as available sizes, services and reviews, which are valuable to the user in the purchasing decision process.
In comparison, the Nove25 page is missing key information that most competitors are including, such as available sizes, services and reviews, which are valuable to the user in the purchasing decision process.
Size selection and add to cart
Size selection and add to cart
Size selection and add to cart
The size selection and principal CTAs are not grouped together, like on other competitor pages, leading to confusion for users as to where to select sizes and how to add their size to cart.
The size selection and principal CTAs are not grouped together, like on other competitor pages, leading to confusion for users as to where to select sizes and how to add their size to cart.
The size selection and principal CTAs are not grouped together, like on other competitor pages, leading to confusion for users as to where to select sizes and how to add their size to cart.
The size selection and principal CTAs are not grouped together, like on other competitor pages, leading to confusion for users as to where to select sizes and how to add their size to cart.
Connect the product to brand
Connect the product to brand
Connect the product to brand
Unlike its competitors, Nove25 isn't highlighting the stories behind the products and the brand. Explaining how each piece is crafted in Italy and the story behind Nove25 adds value to the products and builds awareness and affinity to the brand.
Unlike its competitors, Nove25 isn't highlighting the stories behind the products and the brand. Explaining how each piece is crafted in Italy and the story behind Nove25 adds value to the products and builds awareness and affinity to the brand.
Unlike its competitors, Nove25 isn't highlighting the stories behind the products and the brand. Explaining how each piece is crafted in Italy and the story behind Nove25 adds value to the products and builds awareness and affinity to the brand.
Unlike its competitors, Nove25 isn't highlighting the stories behind the products and the brand. Explaining how each piece is crafted in Italy and the story behind Nove25 adds value to the products and builds awareness and affinity to the brand.
Information Architecture
Information Architecture
Information Architecture
How could we merge all the insights onto our product details page?
How could we merge all the insights onto our product details page?
How could we merge all the insights onto our product details page?
To understand how to merge and meet the client's needs, I created an information architecture to layout the hierarchy of the page. I brainstormed together with the design and marketing team to gather their input.
To understand how to merge and meet the client's needs, I created an information architecture to layout the hierarchy of the page. I brainstormed together with the design and marketing team to gather their input.
To understand how to merge and meet the client's needs, I created an information architecture to layout the hierarchy of the page. I brainstormed together with the design and marketing team to gather their input.
Wireflow
Wireflow
Wireflow
Designing the purchase consideration flow
Designing the purchase consideration flow
Designing the purchase consideration flow
After conducting a competitor analysis and creating a new information architecture, I began designing layouts for the new product details page and creating user flows for the product consideration and purchase journey.
After conducting a competitor analysis and creating a new information architecture, I began designing layouts for the new product details page and creating user flows for the product consideration and purchase journey.
After conducting a competitor analysis and creating a new information architecture, I began designing layouts for the new product details page and creating user flows for the product consideration and purchase journey.
User testing
User testing
User testing
Adjusting my design based on user feedback
Adjusting my design based on user feedback
Adjusting my design based on user feedback
Throughout prototyping, I tested my designs with 15 participants, checking for understandability, ease of use and navigation. I specifically evaluated the ease of adding products to the cart, finding specific product information, and product size selection.
Throughout prototyping, I tested my designs with 15 participants, checking for understandability, ease of use and navigation. I specifically evaluated the ease of adding products to the cart, finding specific product information, and product size selection.
Throughout prototyping, I tested my designs with 15 participants, checking for understandability, ease of use and navigation. I specifically evaluated the ease of adding products to the cart, finding specific product information, and product size selection.
Showing users how to measure their size
Showing users how to measure their size
Showing users how to measure their size
Some users found it hard to understand how they should measure sizes so I decided to add a short video to guide the user in understanding how to measure their size.
Some users found it hard to understand how they should measure sizes so I decided to add a short video to guide the user in understanding how to measure their size.
Some users found it hard to understand how they should measure sizes so I decided to add a short video to guide the user in understanding how to measure their size.
Some users found it hard to understand how they should measure sizes so I decided to add a short video to guide the user in understanding how to measure their size.
Making size selection more obvious
Making size selection more obvious
Making size selection more obvious
Some users had difficulty distinguishing between selected, unavailable, and non-selected sizes so I increased the contrast between the different states through opacity and weight of the typeface.
Some users had difficulty distinguishing between selected, unavailable, and non-selected sizes so I increased the contrast between the different states through opacity and weight of the typeface.
Some users had difficulty distinguishing between selected, unavailable, and non-selected sizes so I increased the contrast between the different states through opacity and weight of the typeface.
Some users had difficulty distinguishing between selected, unavailable, and non-selected sizes so I increased the contrast between the different states through opacity and weight of the typeface.
3D view layout
3D view layout
3D view layout
Some users found it frustrating to leave the product detail page when viewing the 3D mockup, as it navigating back to purchase harder. To fix this, I worked with developers to embed the 3D view in an in-page overlay so users weren't directed to a new page.
Some users found it frustrating to leave the product detail page when viewing the 3D mockup, as it navigating back to purchase harder. To fix this, I worked with developers to embed the 3D view in an in-page overlay so users weren't directed to a new page.
Some users found it frustrating to leave the product detail page when viewing the 3D mockup, as it navigating back to purchase harder. To fix this, I worked with developers to embed the 3D view in an in-page overlay so users weren't directed to a new page.
Some users found it frustrating to leave the product detail page when viewing the 3D mockup, as it navigating back to purchase harder. To fix this, I worked with developers to embed the 3D view in an in-page overlay so users weren't directed to a new page.
Figma Components
Figma Components
Figma Components
Building the style guide
Building the style guide
Building the style guide
After I finalized the visual direction that I wanted to pursue, I began constructing the high-fidelity mockup alongside developing developer-ready components in Figma. Codifying elements into components helped to optimize my workflow, reduce the completion time for the project and ensure a smooth developer handoff.
After I finalized the visual direction that I wanted to pursue, I began constructing the high-fidelity mockup alongside developing developer-ready components in Figma. Codifying elements into components helped to optimize my workflow, reduce the completion time for the project and ensure a smooth developer handoff.
After I finalized the visual direction that I wanted to pursue, I began constructing the high-fidelity mockup alongside developing developer-ready components in Figma. Codifying elements into components helped to optimize my workflow, reduce the completion time for the project and ensure a smooth developer handoff.
Final Design
Final Design
Final Design