Back to Projects

UX Strategy & Design · Front-end Development · AI Integration

Modernizing a Legacy
Ecommerce Experience

2-4 minute read

Redesigned a legacy Shopify storefront by improving product navigation, embedding business logic into the user experience, and introducing AI-driven features to support operational growth.

Role

Web Developer · Co-op -> Freelance

Timeline

May 2024 - Dec 2025

Tools

Shopify · HTML · CSS · JS · GA4 · GPT-4o

Project hero image

Project Overview

The Challenge

Bio Sculpture was scaling its digital operations while its storefront remained on Shopify's legacy Debut theme. The platform lacked support for modern UX components, dynamic responsiveness, and AI-driven features, creating friction across the customer journey.

Examples of these challenges:

Customers could complete purchases for regionally restricted products, resulting in manual order cancellations and follow-ups.
Product organization made discovery unintuitive and inefficient for new users, contributing to high bounce rates on collection pages.
Business policies were not reflected in the digital interface, requiring manual checks and workarounds by customer service.

Project Objectives

Modernize Shopify legacy theme infrastructure to enable responsive, scalable, and maintaiable digital operations.
Improve product organization, filtering, and collection navigation to make discovery intuitive for all users.
Embed organizational policies directly into the digital interface to reduce operational friction and manual intervention.
Implement AI and data-driven features to enhance user support and streamline customer interactions.

Process

How we got there

1. System Analysis

Understanding Constraints & User Flows

Mapped end-to-end customer journeys from discovery to checkout to identify key friction points. Analyzed where the user experience broke down due to misalignment with backend constraints and operational workflows.

2. Logic Definition

Structuring Rules into Solutions

Translated business policies and operational rules into structured logic and system flows. Prioritized features based on business impact, user value, technical feasibility, and risk reduction.

3. Design & Development

Building the Experience

Developed custom web and mobile components using HTML, CSS, and JavaScript to extend beyond Shopify's legacy theme limitations. Introduced dynamic-response functionality, geo-restriction logic, and a collection-based filtering architecture.

4. Iteration

Refining & Optimzing

Implemented GA4 and Meta Pixel tracking to capture user behavior across the storefront and social platforms. Used insights from navigation patterns and drop-off points to inform continuous improvements.

Outcomes

Impact & Results

Operational Alignment

Embedded business & organizational policies directly into e-commerce interface, ensuring customers could no longer complete invalid purchases. This improved order processing consistency and reduced reliance on manual intervention.

Improved User Experience

Reduced user friction by designing clear system feedback, collection-based navigation, and dynamic filtering, simplifying the browsing experience and making discovery more intuitive for over 1,700 products.

Data-Driven Decision Making

Shifted digital updates from assumption-based changes to analytics-informed with GA4 and Meta Pixel tracking, providing visibility into over 18,000 monthly user interactions to support targeted and more effective optimizations.

Scalable Platform Expansion

Enabled the launch of 4 global partner brands by adapting the storefront to support multiple product collections while ensuring a consistent digital experience across all brand and customer touchpoints.

All Projects