Enterprise Ecommerce: A Mobile-First UX Transformation
Enterprise Ecommerce: A Mobile-First UX Transformation
Embedded Files
The primary goal was to research, design, and implement an improved browser-based experience for ecommerce customers.
The primary goal was to research, design, and implement an improved browser-based experience for ecommerce customers.
This project involved modernizing a legacy webstore frontend that supports millions of annual users. By combining a backlog of user requests with rigorous competitor analysis and usability studies, I delivered a refreshed interface that prioritizes critical components above the fold and significantly increases product visibility. The redesign streamlined add-to-cart flows and introduced high-impact UI optimizations for mobile shoppers, ensuring a modern experience while maintaining all original functionality for a seamless transition.
This project involved modernizing a legacy webstore frontend that supports millions of annual users. By combining a backlog of user requests with rigorous competitor analysis and usability studies, I delivered a refreshed interface that prioritizes critical components above the fold and significantly increases product visibility. The redesign streamlined add-to-cart flows and introduced high-impact UI optimizations for mobile shoppers, ensuring a modern experience while maintaining all original functionality for a seamless transition.
Mobile - Shop Product Cards, New
Desktop - Shop Product Cards, New
Timeline
Timeline
Q4 2025
Q4 2025
Role
Role
UX Manager
UX Manager
Company
Company
Delivery Biz Pro
Delivery Biz Pro
Delivered
Delivered
Reactive modern layouts for browser-based ecommerce. Advanced & performance tracking.
Reactive modern layouts for browser-based ecommerce. Advanced & performance tracking.
Desktop - Product Detailed Page, New
My Role
My Role
As the UX Manager, I oversaw the end-to-end delivery of the project, balancing strategic leadership with hands-on design. I spearheaded the research and discovery phase to define core problem statements and managed cross-functional design and development teams. My contributions included creating wireframes and prototypes while mentoring the team through iterative feedback. To ensure measurable success, I led the implementation of GA4 and Clarity, using the resulting data to synthesize insights and report key performance metrics to stakeholders.
As the UX Manager, I oversaw the end-to-end delivery of the project, balancing strategic leadership with hands-on design. I spearheaded the research and discovery phase to define core problem statements and managed cross-functional design and development teams. My contributions included creating wireframes and prototypes while mentoring the team through iterative feedback. To ensure measurable success, I led the implementation of GA4 and Clarity, using the resulting data to synthesize insights and report key performance metrics to stakeholders.
My Process
My Process
- Research & Discovery: This initial phase involved a deep dive into user experience research, analyzing existing feedback and competitor apps to inform design decisions and identify key areas for improvement.
- Problem Specification: Based on the research findings, a clear problem statement was defined to outline the specific needs and pain points the new app needed to address, ensuring a focused design strategy.
- Design & Development: This phase focused on the creative work, beginning with ideation through early-stage sketches and progressing to detailed wireframes and prototypes that mapped out the user flow through each part of the app.
- Performance Evaluation: The final phase involved implementing Google Analytics 4 and Microsoft Clarity on key tester environments, which allowed for a comparison of performance and click heat mapping before and after the release of the updates.
Understanding the Legacy
Understanding the Legacy
I began by auditing the existing shop layout to map user journeys and functionality. I then analyzed user surveys, support channels, and recorded interviews to pinpoint friction. This research revealed that users struggled with the mobile experience, store navigation, and large product categories. Furthermore, users found the ordering process and subscription management confusing, which informed my strategy for the redesign.
Mobile - Product Tiles, Legacy
Desktop - Product Tiles, Legacy
Desktop - Product Detailed Page, Legacy
Mobile - Product Detailed Page, Legacy
Mobile - Product Tiles 1x1, Legacy
Mobile - Add-to-Cart Flow, Legacy
Making the Most Impact
Making the Most Impact
Drawing from our discovery research, we rapidly iterated through sketches, wireframes, and prototypes to gather early testing data. By utilizing System Usability Scale (SUS) surveys, we established a repeatable framework to measure the impact of the design changes. This approach enabled us to test and refine the UX cost-effectively before moving into the development phase.
Mobile - Product Category Carousel & 2x2 Product Tiles
Mobile - Load More Button
Mobile - Optimized Product Detailed Page
Desktop - Smaller Tiles with Clearer CTAs
Desktop - Optimized Product Detailed Page
Simpler purchase options
Simpler purchase options
One time replaces three previous options while allowing the same flexibility for customers and admins.
Less decision fatigue
Less decision fatigue
Radios allow users to filter by frequency preference before seeing purchase options. Preventing information overload.
Continuous Improvement
Continuous Improvement
Two weeks after the initial launch, I led a targeted revision phase driven by a synthesis of qualitative user feedback and quantitative ecommerce analytics. To address diverse layout preferences, we designed a super-admin dashboard for granular control over appearance behaviors, successfully balancing the complex needs of a large and diverse user base.
Shop Appearance Dashboard - Low-Fidelity Wireframes (Chris Harman)
Shop Appearance Dashboard - High-Fidelity Wireframes (Chris Harman)
Easier Edits to Recurring Items
Easier Edits to Recurring Items
Beyond administrative controls, we used click-tracking data to refine order editing and subscription flows, adding direct recurring links and item-type modals to clarify the cart experience.
Added Links in Cart to Manage Recurring Items
Learning From Experience
Learning From Experience
A critical pivot occurred when analytics revealed that moving quantity controls to the cart, intended to save space, actually decreased efficiency. Our beta users and early data missed this during the usability testing. Still, we promptly reintegrated these controls into the primary add-to-cart flow, a move that points to thorough A/B testing as our standard for balancing design intuition with measurable user performance.
Left to Right: Desktop & Mobile Add to Cart Flows - V2
What's Next? Self-Service Roadmap
What's Next? Self-Service Roadmap
Our upcoming roadmap centers on transforming the Account and Settings architecture into a high-utility hub that empowers users to manage their own data with minimal friction. We are rationalizing the placement of delivery preferences, order history, and payment management to create a more intuitive navigation structure that reduces user error and cognitive load. We will specifically optimize the mobile experience by optimizing the existing reactive design architecture. Ultimately, enhancing these self-service capabilities is designed to provide a smoother journey for shoppers while lowering the volume of manual support requests for client administrators.
Project Outcome & Impact
Project Outcome & Impact
Quantitative and qualitative data confirm widespread approval of the revamped shop layout. We effectively scaled the platform for millions of annual users, bolstered by a mobile-first strategy, which dramatically optimized the UI for over 70% of the active customer base. By rapidly iterating on initial friction points within the add-to-cart and recurring order flows, we sustained development momentum while driving measurable growth in average session duration, product engagement, and average order value (AOV).
Quantitative and qualitative data confirm widespread approval of the revamped shop layout. We effectively scaled the platform for millions of annual users, bolstered by a mobile-first strategy, which dramatically optimized the UI for over 70% of the active customer base. By rapidly iterating on initial friction points within the add-to-cart and recurring order flows, we sustained development momentum while driving measurable growth in average session duration, product engagement, and average order value (AOV).
Page updated
Google Sites
Report abuse