Product Page
Product Page
Product Page
Product Page
Biossance aimed to revamp their product pages to enhance visual appeal, captivate users, simplify scanning, and harmonize with the overall website design.
Biossance aimed to revamp their product pages to enhance visual appeal, captivate users, simplify scanning, and harmonize with the overall website design.
Biossance aimed to revamp their product pages to enhance visual appeal, captivate users, simplify scanning, and harmonize with the overall website design.
Biossance aimed to revamp their product pages to enhance visual appeal, captivate users, simplify scanning, and harmonize with the overall website design.
My Role
I was responsible for the whole design process:
• Gathering data and learnings from previous product page
• Researching best practices
• Competitive analysis
• Sketching, wireframing, prototyping
• Creating the final design structure
• UI / Visual Design
• Handing off / aligning with devs
• Design QA
I was responsible for the whole design process:
• Gathering data and learnings from previous product page
• Researching best practices
• Competitive analysis
• Sketching, wireframing, prototyping
• Creating the final design structure
• UI / Visual Design
• Handing off / aligning with devs
• Design QA
I was responsible for the whole design process:
• Gathering data and learnings from previous product page
• Researching best practices
• Competitive analysis
• Sketching, wireframing, prototyping
• Creating the final design structure
• UI / Visual Design
• Handing off / aligning with devs
• Design QA
I was responsible for the whole design process:
• Gathering data and learnings from previous product page
• Researching best practices
• Competitive analysis
• Sketching, wireframing, prototyping
• Creating the final design structure
• UI / Visual Design
• Handing off / aligning with devs
• Design QA
CLIENT
Biossance
ROLES
Lead Product / Visual Designer
ROLES
Lead Product Designer
Visual Designer
DURATION
Apr–Jun 2023
TOOLS
Figma, Figjam, Procreate
Gathering Data & Learnings
Gathering Data & Learnings
Gathering Data & Learnings
Gathering Data & Learnings
I worked with the Product Manager, the Analytics team and the ADA/Accessibility specialist and gathered information that we should consider before deep diving into the redesign.
Data below was blurred due to proprietary information.
I worked with the Product Manager, the Analytics team and the ADA/Accessibility specialist and gathered information that we should consider before deep diving into the redesign.
Data below was blurred due to proprietary information.
I worked with the Product Manager, the Analytics team and the ADA/Accessibility specialist and gathered information that we should consider before deep diving into the redesign.
Data below was blurred due to proprietary information.
I worked with the Product Manager, the Analytics team and the ADA/Accessibility specialist and gathered information that we should consider before deep diving into the redesign.
Data below was blurred due to proprietary information.
Competitive Analysis
Competitive Analysis
Competitive Analysis
Competitive Analysis
I conducted a product page competitive analysis to understand how competitors present their products online, identify best practices, and improve our own product pages. This research helps enhance user-friendliness, informativeness, and visual appeal, aiming for higher conversions and customer satisfaction.
I conducted a product page competitive analysis to understand how competitors present their products online, identify best practices, and improve our own product pages. This research helps enhance user-friendliness, informativeness, and visual appeal, aiming for higher conversions and customer satisfaction.
I conducted a product page competitive analysis to understand how competitors present their products online, identify best practices, and improve our own product pages. This research helps enhance user-friendliness, informativeness, and visual appeal, aiming for higher conversions and customer satisfaction.
I conducted a product page competitive analysis to understand how competitors present their products online, identify best practices, and improve our own product pages. This research helps enhance user-friendliness, informativeness, and visual appeal, aiming for higher conversions and customer satisfaction.
Previous Page Issues
Previous Page Issues
Previous Page Issues
Previous Page Issues
Too much empty space above the fold
Too much empty space above the fold
Too much empty space above the fold
Too much empty space above the fold
Ribbon covers part of the image
Ribbon covers part of the image
Ribbon covers part of the image
Ribbon covers part of the image
No visual indication it's a carousel besides the dots below the image
No visual indication it's a carousel besides the dots below the image
No visual indication it's a carousel besides the dots below the image
No visual indication it's a carousel besides the dots below the image
Sticky CTA covers product image on smaller devices
Sticky CTA covers product image on smaller devices
Sticky CTA covers product image on smaller devices
Sticky CTA covers product image on smaller devices
Upsell module doesn't explain what the product is
Upsell module doesn't explain what the product is
Upsell module doesn't explain what the product is
Upsell module doesn't explain what the product is
CTA takes user out of the current PDP
CTA takes user out of the current PDP
CTA takes user out of the current PDP
CTA takes user out of the current PDP
Uses tabs instead of accordions
Uses tabs instead of accordions
Uses tabs instead of accordions
Uses tabs instead of accordions
Improvement Goals
Improvement Goals
Improvement Goals
Improvement Goals
With the information we had, I defined a few goals for our redesign.
With the information we had, I defined a few goals for our redesign.
With the information we had, I defined a few goals for our redesign.
With the information we had, I defined a few goals for our redesign.
Make it accessible to everyone
Make it accessible to everyone
Make it accessible to everyone
Make it accessible to everyone
Make it easier to use and find content
Make it easier to use and find content
Make it easier to use and find content
Make it easier to use and find content
Make it easy to scan and view images
Make it easy to scan and view images
Make it easy to scan and view images
Make it easy to scan and view images
Make it visually appealing and interesting
Make it visually appealing and interesting
Make it visually appealing and interesting
Make it visually appealing and interesting
Low-Fidelity Designs
Low-Fidelity Designs
Low-Fidelity Designs
Low-Fidelity Designs
I created sketches and basic wireframes in accordance with our project goals and insights from the gathered data. Through these initial concepts, I've collaborated with the Product Manager, Product Owner, Developers, and brand leaders, adjusting the designs to achieve a better experience for our customers.
I created sketches and basic wireframes in accordance with our project goals and insights from the gathered data. Through these initial concepts, I've collaborated with the Product Manager, Product Owner, Developers, and brand leaders, adjusting the designs to achieve a better experience for our customers.
I created sketches and basic wireframes in accordance with our project goals and insights from the gathered data. Through these initial concepts, I've collaborated with the Product Manager, Product Owner, Developers, and brand leaders, adjusting the designs to achieve a better experience for our customers.
I created sketches and basic wireframes in accordance with our project goals and insights from the gathered data. Through these initial concepts, I've collaborated with the Product Manager, Product Owner, Developers, and brand leaders, adjusting the designs to achieve a better experience for our customers.
Increased collaboration
Increased collaboration
Increased collaboration
Increased collaboration
Adjusted wireframes to optimize experience
Adjusted wireframes to optimize experience
Adjusted wireframes to optimize experience
Adjusted wireframes to optimize experience
Defined the page structure
Defined the page structure
Defined the page structure
Defined the page structure
Roadblocks
Roadblocks
Roadblocks
Roadblocks
The brand had initially requested the combination of the "Before & After" and "Clinical Report" modules. However, as we learned in our research and discovery phase, it is not ethical to showcase images that do not directly correspond to the clinical report results.
For example, if displaying an image that clearly demonstrates an improvement in dark spots, one should refrain from presenting a clinical report in the same module regarding improvements in the appearance of fine lines. The goal here is to maintain the highest level of transparency and avoid misleading the user.
The brand had initially requested the combination of the "Before & After" and "Clinical Report" modules. However, as we learned in our research and discovery phase, it is not ethical to showcase images that do not directly correspond to the clinical report results.
For example, if displaying an image that clearly demonstrates an improvement in dark spots, one should refrain from presenting a clinical report in the same module regarding improvements in the appearance of fine lines. The goal here is to maintain the highest level of transparency and avoid misleading the user.
The brand had initially requested the combination of the "Before & After" and "Clinical Report" modules. However, as we learned in our research and discovery phase, it is not ethical to showcase images that do not directly correspond to the clinical report results.
For example, if displaying an image that clearly demonstrates an improvement in dark spots, one should refrain from presenting a clinical report in the same module regarding improvements in the appearance of fine lines. The goal here is to maintain the highest level of transparency and avoid misleading the user.
The brand had initially requested the combination of the "Before & After" and "Clinical Report" modules. However, as we learned in our research and discovery phase, it is not ethical to showcase images that do not directly correspond to the clinical report results.
For example, if displaying an image that clearly demonstrates an improvement in dark spots, one should refrain from presenting a clinical report in the same module regarding improvements in the appearance of fine lines. The goal here is to maintain the highest level of transparency and avoid misleading the user.
Due to the resource limitations that this module would impose on the brand, and to ensure clarity, I proposed creating two separate modules that would convey the message without deceiving or misleading customers.
Due to the resource limitations that this module would impose on the brand, and to ensure clarity, I proposed creating two separate modules that would convey the message without deceiving or misleading customers.
Due to the resource limitations that this module would impose on the brand, and to ensure clarity, I proposed creating two separate modules that would convey the message without deceiving or misleading customers.
Due to the resource limitations that this module would impose on the brand, and to ensure clarity, I proposed creating two separate modules that would convey the message without deceiving or misleading customers.
Increased clarity for the user
Increased clarity for the user
Increased clarity for the user
Increased clarity for the user
Fewer constraints on brand's resources
Fewer constraints on brand's resources
Fewer constraints on brand's resources
Fewer constraints on brand's resources
Fewer issues for scaling up to newer products
Fewer issues for scaling up
Fewer issues for scaling up
Fewer issues for scaling up to newer products
Final Designs
Final Designs
Final Designs
Final Designs
Building upon the approved wireframes, I crafted high-fidelity designs for our new product page. These designs translate our conceptual ideas into a polished, pixel-perfect representation of the final product, incorporating branding elements, user interface details, and visual aesthetics.
Building upon the approved wireframes, I crafted high-fidelity designs for our new product page. These designs translate our conceptual ideas into a polished, pixel-perfect representation of the final product, incorporating branding elements, user interface details, and visual aesthetics.
Building upon the approved wireframes, I crafted high-fidelity designs for our new product page. These designs translate our conceptual ideas into a polished, pixel-perfect representation of the final product, incorporating branding elements, user interface details, and visual aesthetics.
Building upon the approved wireframes, I crafted high-fidelity designs for our new product page. These designs translate our conceptual ideas into a polished, pixel-perfect representation of the final product, incorporating branding elements, user interface details, and visual aesthetics.
Here's the final mobile design with some notes I wrote for the brand:
Here's the final mobile design with some notes I wrote for the brand:
Here's the final mobile design with some notes I wrote for the brand:
Here's the final mobile design with some notes I wrote for the brand:
Results
Results
Results
Results
The new product page is live, but some of the modules are currently in progress, being developed by the team as I write this paragraph. Although not all modules are live yet, we are already witnessing some initial results:
The new product page is live, but some of the modules are currently in progress, being developed by the team as I write this paragraph. Although not all modules are live yet, we are already witnessing some initial results:
The new product page is live, but some of the modules are currently in progress, being developed by the team as I write this paragraph. Although not all modules are live yet, we are already witnessing some initial results:
The new product page is live, but some of the modules are currently in progress, being developed by the team as I write this paragraph. Although not all modules are live yet, we are already witnessing some initial results:
Users are making their purchase decision quicker
Users are making their purchase decision quicker
Users are making their purchase decision quicker
Users are making their purchase decision quicker
Reduction in customer care tickets related to doubts about the products
Reduction in customer care tickets related to doubts about the products
Reduction in customer care tickets related to doubts about the products
Reduction in customer care tickets related to doubts about the products
Users are scrolling down the page much more than previously
Users are scrolling down the page much more than previously
Users are scrolling down the page much more than previously
Users are scrolling down the page much more than previously
According to Hotjar:
According to Hotjar:
According to Hotjar:
According to Hotjar:
75.2% of mobile users scrolled down to the Customer Reviews area
(vs. 46.7% in the previous design)
75.2% of mobile users scrolled down
to the Customer Reviews area
(vs. 46.7% in the previous design)
75.2% of mobile users scrolled down to the Customer Reviews area (vs. 46.7% in the previous design)
75.2% of mobile users scrolled down to the Customer Reviews area (vs. 46.7% in the previous design)
Previous design
Previous design
Previous design
Previous design
New design
New design
New design
New design
Takeaways
Takeaways
Takeaways
Takeaways
It's important to have clear, defined priorities
It's important to have clear, defined priorities
It's important to have clear, defined priorities
It's important to have clear, defined priorities
Besides improving the user experience, defining business and user priorities ahead of time will positively impact the team's workload and resources. The team will spend time where it matters.
Besides improving the user experience, defining business and user priorities ahead of time will positively impact the team's workload and resources. The team will spend time where it matters.
Besides improving the user experience, defining business and user priorities ahead of time will positively impact the team's workload and resources. The team will spend time where it matters.
Besides improving the user experience, defining business and user priorities ahead of time will positively impact the team's workload and resources. The team will spend time where it matters.
Flexibility is key
Flexibility is key
Flexibility is key
Flexibility is key
Understanding the reason behind a request is crucial. We need to find a solution that addresses the issue without overly limiting the feature's scalability in the future.
Understanding the reason behind a request is crucial. We need to find a solution that addresses the issue without overly limiting the feature's scalability in the future.
Understanding the reason behind a request is crucial. We need to find a solution that addresses the issue without overly limiting the feature's scalability in the future.
Understanding the reason behind a request is crucial. We need to find a solution that addresses the issue without overly limiting the feature's scalability in the future.
Done is better than perfect
Done is better than perfect
Done is better than perfect
Done is better than perfect
Create with iteration in mind! If a project is too big, check again your priorities and align with the team on what's essential for the first iteration.
Create with iteration in mind! If a project is too big, check again your priorities and align with the team on what's essential for the first iteration.
Create with iteration in mind! If a project is too big, check again your priorities and align with the team on what's essential for the first iteration.
Create with iteration in mind! If a project is too big, check again your priorities and align with the team on what's essential for the first iteration.