Context

While working within Shopify’s design system, I identified opportunities to create features that help users discover relevant products more efficiently. My goal was to master working within a team environment that adheres to a design system, resolve inconsistencies, and introduce creative solutions that enhance the overall user experience. I was responsible for all visuals, conducted user research, and designed interactions, animations, and produced a high-fidelity prototype.

My guided gift finder led to 87% of users reporting a more satisfying experience compared to their usual e-commerce journey. 73% users preferred the more structured guidance that the app provided while the seasonal pop-up ads engaged 80% of users. These strong results indicate a significant potential impact on sales, driving higher conversion rates and improved user engagement. With Shopify's 2.1 million daily active users, even a small increase in retention and purchase rates could lead to a substantial boost in overall annual sales across the platform.

Final Design Preview

Problem

• With thousands of products available, Shopify users often experience decision fatigue, leading to feelings of overwhelm and a lack of support. This frustration increases drop-off rates, negatively impacting both user experience and overall sales.

Vision

• Provide guidance and support at every stage of the shopping experience, helping users navigate their decisions with ease.

• Enhance Shopify’s platform by ensuring a smooth and intuitive user journey from discovery to checkout.

• Deliver thoughtful and strategic content to create a more engaging and helpful shopping experience.

  
  

Final Prototype

Research and Analysis

User Preferences for E-commerce Platforms

• Users prefer clear, easy-to-navigate interfaces with consistent styles.

• Guided features (e.g. gift finders and seasonal prompts) drive higher engagement and conversions.

Drop Off Rate Insights

• Based on study by Littledata (June 2022), analyzing 3,824 Shopify sites: average drop off rate of 41.1%.

• Compared to the typical bounce rate range for e-commerce websites (20-45%), Shopify's bounce rate is on the higher end.

• Users face decision fatigue from too many choices or frustrating navigation, leading them to abandon their shopping journey.

Check Out Challenges

To understand why users abandon their carts, I conducted user research and competitive analysis focusing on checkout pain points. This included:

• User Interviews: Gathering insights from online shoppers about their frustrations during checkout.

• Competitive Analysis: Examining how other e-commerce platforms handle checkout issues.

• Data Review: Analyzing reports on checkout abandonment and error handling in Shopify stores.

Key insight emerged:

The most common checkout issue is the lack of error recovery, particularly when a selected product variant (e.g., color, size) becomes unavailable at checkout.

Shopify's Gap: The Need for a Guided Shopping Experience

Why It Matters: A guided shopping experience helps users navigate the platform with ease, reducing decision fatigue and increasing conversions. Competing platforms offer structured guidance through curated recommendations and step-by-step assistance, enhancing user confidence in their purchases.

Key insight emerged:

Shopify lacks robust guided shopping experience, leaving users without intuitive direction when searching for products. This absence makes it harder for users to find suitable items efficiently, leading to frustration and potential drop-offs.

Diagram of E-Commerce User Needs

Design Process

Discovery

• Conducted user testing and identified that many users felt lost when searching for gifts without a clear starting point.

• Studied Shopify's design system to understand its components and ensure alignment with existing designs.

• Compared other e-commerce sites to benchmark best practices for guided and personalized features, navigation, and visual design.

  
  

User Persona

Journey Map

Ideation

• Designed a Gift Finder page with two tabs: search with filters and an interactive quiz to provide guided recommendations.

• Created a Checkout Error Resolution flow that seamlessly redirects users to available product options instead of forcing them to start over.

• Developed seasonal pop-up ads to dynamically suggest relevant products for holidays and special occasions.

Check Out Flow Chart

Validation

• Designed new features, including a Gift Finder page and Seasonal Pop-Up Ads, integrated into Shopify's home page.

• Tested prototypes for usability, ensuring intuitive navigation and seamless interaction.

• Refined prototypes based on user feedback to optimize functionality and improve the new features to ensure intuitive navigation and user engagement.

  
  

Feature #1: The Gift Finder

In order to help users quickly discover relevant products, reducing decision fatigue and enhancing engagement, I designed a personalized gift-finding experience. Users can find a gift with filters or take an interactive quiz to find guided recommendations based on user input.

Comparing Various Explorations of Gift Finder Designs

Version A: Initially, I divided the Gift Finder feature into two tabs: a search with filters and a search via an interactive quiz. Users were unclear about the purpose of the page due to the lack of navigation or guidance, leading to confusion.

Version B: While navigation was intuitive, users found the combination of two top tabs and multiple filters overwhelming.

Version C: To improve clarity and usability, I removed the Quiz tab and instead integrated a quiz card into the main content, ensuring a seamless user flow. Additionally, I highlighted the search functionality with a search icon in the bottom navigation, making it clear that the Gift Finder is part of the search experience.

Gift Finder User Flow

The filter option lets users refine their search by categories such as occasion, price, and age, while the quiz provides personalized gift suggestions based on user input. Integrated into the search page, it ensures an engaging and accessible shopping experience.

Gift Finder With Quiz

Feature #2: Check Out Flow

A seamless checkout experience is essential for maintaining user trust and reducing drop-off rates. To enhance Shopify’s checkout flow, I focused on minimizing friction, improving consistency, and proactively addressing potential frustrations.

By improving both the happy path and edge cases, I reduced checkout friction and ensured that users feel supported, increasing engagement and minimizing drop-off rates.

Beyond error handling, I also refined UI inconsistencies across headers, footers, and layers, enhancing layout cohesion and usability. By optimizing padding and auto-layouts, I created a cleaner, more intuitive interface that allows users to navigate effortlessly.

Check Out User Flow

A key issue users faced was encountering an error at the final step, i.e. after selecting an item, they were suddenly informed that it was no longer available. This unexpected disruption caused frustration and uncertainty, leading to abandoned purchases. To create a more positive user experience, I designed a solution that smoothly redirects users to available alternatives instead of leaving them stuck with an error. This ensures a frustration-free, uninterrupted checkout process.

I explored possible solutions to the checkout error by evaluating four distinct approaches. Each option considers user frustration and business goals. Below are the four proposed solutions, reflecting the results of my brainstorming process.

Through iterative design and testing, I refined these solutions to enhance the checkout experience, minimizing friction and improving user confidence. I ultimately decided to design a combination of #3 and #4 because to provide users with both immediacy and flexibility.

Selecting from available colors (#3) ensures a seamless checkout experience, allowing users to select an available color without restarting the process, which minimizes frustration and improves conversion rates. At the same time, offering an email notification for their originally chosen color ensures that users who are set on a specific option can still get it in the future, increasing customer satisfaction and retention. This combination balances user needs for efficiency and choice, reducing friction while keeping them engaged.

Solution to Error Prototype

Feature #3: Seasonal Ads for Curated Shopping

• Introduced dynamic seasonal pop-ups on the homepage, offering curated gift suggestions for holidays and special occasions.

• Provides a context-aware shopping experience, surfacing relevant items at the right time, grabbing user attention.

• Helps users make faster, more confident purchasing decisions, leading to higher engagement and conversions.

Seasonal Ad Exploration

Version A: The design did not seamlessly integrate with Shopify’s shopping experience. This lack of alignment created inconsistencies in user experience and reduced the sense of trust and familiarity.

Version B: Visually compelling but the image occupied excessive space without adding functional value. While aesthetically appealing, the large image disrupted the visual hierarchy, making key content less accessible.

Version C: I refined the layout by incorporating a gradient blur over the image, enhancing text legibility and accessibility. This adjustment ensured that the visual remained engaging while serving a functional purpose, striking the right balance between aesthetics and usability.

Results

• By optimizing layouts, seamless navigation, and a frictionless checkout experience, I contributed to higher conversion rates and reduced decision fatigue, in addition to an increase in retention rates due to enhanced personalization and engagement.

Next Steps

• Test its impact on user engagement and conversion rates to evaluate the effectiveness of the seasonal pop-up feature.

• Further personalization will be explored by incorporating individual user preferences into seasonal recommendations.

• Analytics will be developed to measure the contribution of these features to overall sales performance.

Learnings

• Personalization features make shopping experiences feel more tailored and engaging, addressing a significant gap in user needs.

• Familiarity with design systems is crucial for efficient workflows and consistency.

• Addressing platform-specific differences early prevents rework later in the process.

This exploration enhanced my understanding of working within established frameworks while adding meaningful design contributions. It reinforced my ability to adapt, resolve inconsistencies, and innovate within constraints to create cohesive, user-centric designs.