E-Commerce Platform Design
E-Commerce
Platform Design
UX/UI Design • E-Commerce
UX/UI Design •
E-Commerce
Overview
Richkid Digital, a web design agency, decided to expand its in-house CMS platform to support e-commerce capabilities. The goal was to enable clients to sell products directly from their websites, without relying on third-party platforms. The challenge was to create a modular, white-label e-commerce system that could serve a wide range of businesses from small boutique stores to large suppliers, across diverse industries including fashion, food, cosmetics and more. The platform needed to support various product types, customer journeys, and visual identities, while maintaining a consistent, high-performing user experience.
Richkid Digital, a web design agency, decided to expand its in-house CMS platform to support e-commerce capabilities. The goal was to enable clients to sell products directly from their websites, without relying on third-party platforms. The challenge was to create a modular, white-label e-commerce system that could serve a wide range of businesses from small boutique stores to large suppliers, across diverse industries including fashion, food, cosmetics and more. The platform needed to support various product types, customer journeys, and visual identities, while maintaining a consistent, high-performing user experience.
Company
Company
Richkid Digital
Richkid Digital
Role
Role
UX/UI Designer
UX/UI Designer
My Role
I joined the team during the late stages of backend development, as the platform was transitioning from infrastructure to interface. My role was to lead the MVP design of core e-commerce components, including category and product pages, shopping cart, and a customizable checkout flow.
Beyond designing user-facing flows, I also focused on building a flexible component system that could support different use cases across industries. I collaborated closely with developers to ensure seamless integration, and with project managers to understand client needs.
I joined the team during the late stages of backend development, as the platform was transitioning from infrastructure to interface. My role was to lead the MVP design of core e-commerce components, including category and product pages, shopping cart, and a customizable checkout flow.
Beyond designing user-facing flows, I also focused on building a flexible component system that could support different use cases across industries. I collaborated closely with developers to ensure seamless integration, and with project managers to understand client needs.
Design Goals
Based on research insights, I defined the following design goals:
Based on research insights, I defined the following design goals:
01
Build a fully responsive, intuitive interface.
Build a fully responsive, intuitive interface.
02
Prioritize information clarity and visual hierarchy.
Prioritize information clarity and visual hierarchy.
03
Create flexible layouts for various business types.
Create flexible layouts for various business types.
Key UX Challenges & Solutions
Key UX Challenges & Solutions
Designing a system to support a wide variety of businesses required a strong emphasis on flexibility and scalability. Instead of designing fixed layouts, I focused on creating flexible component that could adapt to different product types, inventory structures, and visual identities.
Designing a system to support a wide variety of businesses required a strong emphasis on flexibility and scalability. Instead of designing fixed layouts, I focused on creating flexible component that could adapt to different product types, inventory structures, and visual identities.
Product listing page
Product listing page
Product listing pages were built with flexible card layouts to prioritize clarity and information hierarchy, while also supporting additional elements like item labels, quick add-to-cart, Add to wishlist, etc.
Product listing pages were built with flexible card layouts to prioritize clarity and information hierarchy, while also supporting additional elements like item labels, quick add-to-cart, Add to wishlist, etc.
Item layout variations:
Item layout variations:
Item layout modifications:
Item layout modifications:
Additional elements:
Additional elements:
UI Examples
UI Examples
Product page
Product page
Product pages prioritized clarity and information hierarchy, while also supporting optional modules like specifications, shipping info, or warranty details.
Product pages prioritized clarity and information hierarchy, while also supporting optional modules like specifications, shipping info, or warranty details.
The Basic layout:
The Basic layout:
Additional product
page components:
Additional product page components:
UI Examples
UI Examples
Shopping cart
Shopping cart
The Shopping Cart was designed in two variations- a quick cart and a dedicated shopping cart page.
The Shopping Cart was designed in two variations- a quick cart and a dedicated shopping cart page.
Quick cart:
Quick cart:
Shopping cart:
Shopping cart:
Checkout
Checkout
The checkout flow was designed to strike a balance between flexibility and best-practice UX. Given the platform’s diverse client base, I created a modular form structure that allowed customization to ensure each business could tailor the process to its operational needs.
At the same time, the default checkout experience was intentionally crafted as a user-friendly flow that could work for most clients. This baseline version served as a strong starting point, optimized to reduce friction and cart abandonment, based on established e-commerce patterns.
This approach allowed clients to benefit from a proven, high-converting structure, while retaining the freedom to customize when necessary.
The checkout flow was designed to strike a balance between flexibility and best-practice UX. Given the platform’s diverse client base, I created a modular form structure that allowed customization to ensure each business could tailor the process to its operational needs.
At the same time, the default checkout experience was intentionally crafted as a user-friendly flow that could work for most clients. This baseline version served as a strong starting point, optimized to reduce friction and cart abandonment, based on established e-commerce patterns.
This approach allowed clients to benefit from a proven, high-converting structure, while retaining the freedom to customize when necessary.
User sign in
User sign in
Checkout form
Impact & Takeaways
Impact & Takeaways
Within the first months of the pilot phase, over 20 client websites were launched on the platform, each with its own structure, branding, and product setup, but all built on the same modular system. In the months that followed, sales grew rapidly as the platform proved its flexibility and reliability. The sales team was able to convert leads more effectively by showcasing live, customized e-commerce sites, and e-commerce soon became a central part of the agency’s business model.
This project deepened my understanding of how to design for scale. It taught me to think in systems, anticipate edge cases, and create solutions that are both adaptable and grounded in strong UX principles even when the end use cases aren’t fully known upfront.
Within the first months of the pilot phase, over 20 client websites were launched on the platform, each with its own structure, branding, and product setup, but all built on the same modular system. In the months that followed, sales grew rapidly as the platform proved its flexibility and reliability. The sales team was able to convert leads more effectively by showcasing live, customized e-commerce sites, and e-commerce soon became a central part of the agency’s business model.
This project deepened my understanding of how to design for scale. It taught me to think in systems, anticipate edge cases, and create solutions that are both adaptable and grounded in strong UX principles even when the end use cases aren’t fully known upfront.