Optimizing Cariuma Product Page

Optimizing Cariuma Product Page

Enhancing user experiences on Cariuma's product page.

Enhancing user experiences on Cariuma's product page.

Classification

Classification

CARIUMA

CARIUMA

Year

Year

2022

2022

Skills

Skills

UI/UX Design, Graphic Design, Interaction Design, Conversion Optimization, Information Architecture, Usability Testing, Analytics & Performance, E-commerce Design, Image Editing, A/B Testing, Content Strategy, Brand Consistency

UI/UX Design, Graphic Design, Interaction Design, Conversion Optimization, Information Architecture, Usability Testing, Analytics & Performance, E-commerce Design, Image Editing, A/B Testing, Content Strategy, Brand Consistency

Overview
Overview

The goal of this project was to optimize Cariuma’s product page to improve user engagement and conversions, especially during out-of-stock periods. By refining the communication around product availability and streamlining the process for users to sign up for restock notifications, we aimed to reduce user frustration, encourage repeat visits, and ultimately drive higher sales once products were available again.

The goal of this project was to optimize Cariuma’s product page to improve user engagement and conversions, especially during out-of-stock periods. By refining the communication around product availability and streamlining the process for users to sign up for restock notifications, we aimed to reduce user frustration, encourage repeat visits, and ultimately drive higher sales once products were available again.

Service

Web Design

UI/UX Design

A/B Testing

Content

Duration

8 Weeks

View Prototype

View Prototype

View Prototype

The Challenge
The Challenge

Cariuma faced several key challenges, particularly when high-demand items went out of stock: 1. Communication of Product Availability: Popular products frequently sold out, and it was crucial to communicate this to users in a way that didn’t frustrate them. The previous product page didn’t effectively highlight when an item was out of stock, leading to confusion. 2. Missed Conversion Opportunities: There was no clear way for users to sign up for restock notifications, which meant they often lost interest in products they couldn’t purchase at the moment, resulting in missed sales. 3. User Flow Confusion: The existing product page layout lacked clarity during stock-outs, making it difficult for users to navigate or take action, leading to higher bounce rates.

Cariuma faced several key challenges, particularly when high-demand items went out of stock: 1. Communication of Product Availability: Popular products frequently sold out, and it was crucial to communicate this to users in a way that didn’t frustrate them. The previous product page didn’t effectively highlight when an item was out of stock, leading to confusion. 2. Missed Conversion Opportunities: There was no clear way for users to sign up for restock notifications, which meant they often lost interest in products they couldn’t purchase at the moment, resulting in missed sales. 3. User Flow Confusion: The existing product page layout lacked clarity during stock-outs, making it difficult for users to navigate or take action, leading to higher bounce rates.

Understanding The Problem
Understanding The Problem

NAC Website (Before Redesign)
NAC Website (Before Redesign)
The Solution (After Redesign)
The Solution (After Redesign)

To address these challenges, we focused on optimizing key aspects of the product page:

View Prototype

View Prototype

View Prototype

The “Notify Me” button replaced the “Add to Cart” button when a product was out of stock, ensuring users could immediately see and take action without having to scroll or search. This change made restock alerts more accessible, leading to higher engagement.

We simplified the interaction process, ensuring that users had a clear, intuitive path to take action, even when the product was unavailable.

To determine the most effective way to handle out-of-stock messaging and user engagement, I ran A/B tests focusing on the placement and visibility of the "Notify Me" feature. Version A placed the "Notify Me" button below the product details to avoid having two buttons ("Out of Stock" and "Notify Me") competing for attention in the same space. This approach aimed to maintain a cleaner layout while still offering users a way to sign up for restock alerts. Version B replaced the "Add to Cart" button with "Notify Me" when the product was out of stock, keeping it in the user's direct line of sight.

To determine the most effective way to handle out-of-stock messaging and user engagement, I ran A/B tests focusing on the placement and visibility of the "Notify Me" feature. Version A placed the "Notify Me" button below the product details to avoid having two buttons ("Out of Stock" and "Notify Me") competing for attention in the same space. This approach aimed to maintain a cleaner layout while still offering users a way to sign up for restock alerts. Version B replaced the "Add to Cart" button with "Notify Me" when the product was out of stock, keeping it in the user's direct line of sight.

Clicking the “Notify Me via Email” button triggered a pop-up where users could join the waitlist. This made the sign-up process clear and smooth, keeping users engaged without navigating away. It also reinforced the product’s popularity in a simple, branded way.

Business Impact (Results)
Business Impact (Results)

View Prototype:
View Prototype:

View Prototype

View Prototype

View Prototype

Branding
Branding

Colors
Colors

Typography
Typography

Spacing

Spacing

Corporate Event Portal

Corporate Event Portal

Learnings & Next Steps
Learnings & Next Steps
Learnings & Next Steps

1. Strategic Placement: Placing key features like "Notify Me" near decision-making points significantly boosts engagement. 2. Clear Communication: Clearly and prominently communicating product availability reduces user confusion and frustration, especially during stock-outs. 3. Ongoing Testing: A/B testing helped identify the most effective strategies and informed design changes, leading to better results. By applying these insights, we were able to optimize the product page, improving user engagement and conversions. This project reinforced the importance of continuous iteration, data-driven decisions, and cross-functional collaboration in delivering a superior user experience. Through a combination of strategic feature placement, clear communication, and data-driven design decisions, we were able to significantly enhance the product page's performance. The results were a smoother user experience, higher sign-up rates for restock notifications, and an increase in conversions when the product became available again.

1. Strategic Placement: Placing key features like "Notify Me" near decision-making points significantly boosts engagement. 2. Clear Communication: Clearly and prominently communicating product availability reduces user confusion and frustration, especially during stock-outs. 3. Ongoing Testing: A/B testing helped identify the most effective strategies and informed design changes, leading to better results. By applying these insights, we were able to optimize the product page, improving user engagement and conversions. This project reinforced the importance of continuous iteration, data-driven decisions, and cross-functional collaboration in delivering a superior user experience. Through a combination of strategic feature placement, clear communication, and data-driven design decisions, we were able to significantly enhance the product page's performance. The results were a smoother user experience, higher sign-up rates for restock notifications, and an increase in conversions when the product became available again.

PORTFOLIO

CHECK OUT SOME MORE

CHECK OUT SOME MORE

Furniture Website

Furniture Website

Furniture Website

View Project

View Project

View Project

View Project

View Project

View Project

UI/UX

Web Design

Cozyplace: Booking Made Easy

Cozyplace: Booking Made Easy

Cozyplace: Booking Made Easy

View Project

View Project

View Project

View Project

View Project

View Project

UI/UX

Web Design

Mobile Design