E-commerce Platform Redesign
- Duration: 5 months
- Year: 2022
- Role: UX Designer/Web developer
- Tools: Figma, Adobe XD
Project Overview
Our client’s proprietary e-commerce platform, serving over 1,000 retailers in industries like fashion, beauty, pharmaceuticals, electronics, and manufacturing, struggled to meet modern user expectations due to its legacy technology. We reimagined the entire frontend to enhance usability, visual appeal, and interaction flow while streamlining customization. This user-centered redesign transformed the platform into an intuitive, engaging solution for today’s digital shoppers.
Leveraging Past Insights & UX Best Practices
Due to time and resource constraints, our research phase relied on a practical blend of over 300 previous client project insights and secondary research. We reviewed feedback and user behaviors from past engagements to identify recurring pain points—such as cumbersome checkouts and non-responsive layouts—and complemented these findings with established UX best practices from sources like Nielsen Norman Group and Material Design Guidelines.
By synthesizing this data, we set clear design goals (e.g., reducing form fields, optimizing mobile navigation) and iteratively refined our approach through internal testing and post-launch feedback, demonstrating a resourceful and pragmatic strategy for informed design decisions.
Problem
The legacy platform was difficult to customize, non-responsive, and fragmented in navigation. Users struggled with a cumbersome checkout process and inconsistent account access, leading to frustration and low conversion rates.
Goal
Modernize the platform by implementing a user-centric design that enables users to navigate effortlessly on both desktop and mobile devices, and have a seamless shopping experience.
My role
In my role as UX Designer & Web Developer, I crafted key user journey pages to deliver a responsive, intuitive experience, collaborating with UI designers and product managers to align user needs with business goals.
Barriers to a Smooth Shopping Experience
Fragmented Checkout Process – Essential details like product lists, shipping, payment, and order summaries scattered across the page. Users were forced to navigate away from their current view to add items, further disrupting their shopping flow and increasing friction.
Hidden Account Access – The log in and sign up option was not easily accessible. This forced users to navigate through multiple layers, making the process of signing in unnecessarily cumbersome and time-consuming.
Confusing Navigation & Poor Responsiveness – Lack of an intuitive side menu, breadcrumb trails, and a persistent header made it difficult for users to stay oriented and quickly access key features across devices.
Lack of Interactive Product Previews – Static product images without hover-to-preview functionality slowed down engagement by requiring extra clicks for more details.
Ambiguous Product Review Display – The absence of interactive star ratings and aggregated review scores left users without a clear understanding of overall product quality.
Competitive analysis
| Competitor | Strengths | Weaknesses |
|---|---|---|
| Direct competitor |
Standard multi-step checkout Established brand presence |
Fragmented checkout flow Buried login options Basic mobile navigation Lacks interactive product previews Ambiguous review display |
| Indirect competitor |
Robust checkout process Generally accessible account features Aggregates user reviews |
Overwhelming checkout interface Cluttered mobile navigation Minimal product preview interactivity Confusing review presentation |
Gaps & Opportunities
Unified Checkout Experience: Consolidate key checkout information into a single, clear view.
Enhanced Account Accessibility: Ensure login and account features are prominently visible.
Optimized Mobile Navigation: Implement an intuitive side menu, persistent header, and clear breadcrumb trails.
Interactive Product Previews: Introduce hover-to-preview functionality for quick access to additional product images.
Clear Review Presentation: Develop an aggregated review system with interactive star ratings and progress bars.
This analysis reveals key areas where our platform can excel by addressing the common shortcomings observed among competitors while leveraging their strengths as benchmarks.
Key Pages Redesign
Product reviews
The redesigned product review section features interactive star ratings and aggregated scores, giving users immediate insights into product quality and enhancing trust for informed purchasing decisions.
Checkout
The redesigned checkout page streamlines the purchase process by unifying shipping, payment, and order details into a single, intuitive flow, enabling users to complete transactions seamlessly.
Order details
The redesigned order details page organizes essential transaction information into clearly defined sections, enabling users to effortlessly track order status, review payment and shipping details, and manage their post-purchase experience.
Final design solutions
User account
The dropdown menu for the user account allows users to sign in without leaving their current page. This enhances efficiency, reduces navigation friction, and provides a seamless experience for returning shoppers.
Cart dropdown
Users can quickly review, remove, or proceed to checkout without leaving their current view, streamlining the shopping experience and minimizing disruptions.
Updated checkout
The updated checkout consolidates shipping, payment, and order details into one organized layout. Users can verify addresses, select delivery, choose payment, and see their total in a single flow, reducing friction and speeding up completion.
Responsive layout
The updated responsive layout directly addresses earlier issues of confusing navigation and limited accessibility. By incorporating a sliding side menu, a persistent header, and clearly segmented content, the design ensures that essential functions are easily accessible on smaller screens. This streamlined approach enables users to navigate intuitively and complete tasks seamlessly, resulting in a significantly improved mobile experience.
Hover-to-preview carousel
The hover-to-preview carousel directly addresses the previously noted issue of limited product previews. By allowing users to view multiple angles or details simply by hovering, it provides an immediate, interactive experience that reduces extra clicks and helps shoppers make faster, more confident decisions.
Product reviews
The combined star rating and aggregated product score solve the previously identified ambiguity around product quality by clearly displaying both an overall score and detailed breakdowns. This quick visual reference helps users gauge a product’s reputation at a glance, enabling more confident purchase decisions.
Takeaways
Impact
The redesign effectively streamlined key user interactions by consolidating the checkout process, enhancing account accessibility, and refining mobile navigation. Early feedback has shown that these improvements reduce friction and boost user satisfaction, leading to higher conversion rates and an overall better shopping experience.
What I Learned
Working within a small team taught me to leverage existing data and industry best practices for rapid, iterative design improvements. Balancing technical constraints with a user-centered approach was essential to deliver practical solutions that align with both business goals and customer expectations.
Let’s Connect!
Thank you for reviewing my work. I’d love to discuss how my expertise in UX design and front-end development can bring value to your team. Please reach out at [email protected] or explore more of my portfolio on this site.
Live projects using this platform
