UX-Centered Design System for E-Commerce PWA platform
Task
Holistic product strategy and design for a comprehensive PWA eCommerce component library. From research to delivery and support we've done it all.
Overview
This case study outlines the creation of an e-commerce component library designed to streamline the design process for brands building e-commerce websites on the Magento platform.
Challenge
The client needed a platform with both default and customizable themes, complete with all e-commerce components like Product Detail Page (PDP), Product Listing Page (PLP), and cart, ensuring easy and consistent design integration for various brands.
Our Process
Discovery
We conducted extensive research to understand the specific needs of brands and the challenges in designing e-commerce components. We also organized multiple collaborative brainstorming sessions with the team and clients to outline the features of the platform.
Strategy
We defined a clear UX strategy, balancing both default and customizable options for various needs. This approach prioritized integrating essential e-commerce components like PDP, PLP, and the checkout pages, ensuring a smooth and efficient process and experience.
Design
We created detailed wireframes and mockups for the component library platform, which laid the groundwork for our design. To guarantee an optimal user experience, we made sure the UI was responsive and interactive, allowing for easy navigation and effortless customization.
The idea to strategise and design a complete eCommerce design system came up when we were asked to provide fresh design experiences to a few eCommerce clients. While working on these projects, we noticed similar patterns in all these sites. We noticed there were repeated identical elements and patterns across multiple designs, prompting us to think about designing a holistic, comprehensive design system dedicated to eCommerce.
The first step was research. And lots of it.
We started by analysing as many eCommerce sites as possible. We researched websites of different brands and domains for the research – including popular fashion brand stores, food and beverage stores, camera stores, automobile stores and more to get an idea of the various layouts, components, and patterns of each eCommerce platform.
We didn’t want to focus only on a specific domain and constrain ourselves. The bonus of studying multiple domains was that it helped us in many ways to identify components and patterns that were universal to these sites and how different concepts could fit into these patterns in other websites.
Defining and designing the components
With the elements in place, the team worked on wireframes for the components along with the entire pages. Once the wireframes were in place, each component was designed, keeping in mind the base design system defined.
While this was in progress, we set the skins for each theme – be it fashion, automobile, groceries, etc. With the colours, fonts, and styles defined, it boiled down to applying these skins to our components and pages. We added different styles to each component too.
For example, A simple mega menu – with style in place, we designed multiple variations of the same menu. Presenting various options in the same skin allows one to select the best fit for the design.
Final Steps
In the final review of the project, we carefully examined the entire system to ensure no element was overlooked.
Acknowledging that perfection is an iterative process, not a one-time achievement, we embraced a philosophy of continuous enhancement and agile adaptation throughout development.
In areas where ideation was sparse, we infused additional creative concepts to enrich the user experience and functionality.
Furthermore, we expanded our layout offerings to ensure a comprehensive and cohesive system. Given the incorporation of multiple themes and skins, we identified and addressed the unique component requirements of each, revisiting our design phase to ensure harmonious integration across all themes.
Expected Outcomes
With this streamlined approach, we anticipate a significant acceleration in development. Developers would be able to utilize pre-made, thoroughly tested components, minimizing potential issues and ensuring robust output. Even less experienced developers can efficiently complete projects, enhancing overall profitability. The reduction in design problems will lead to increased client satisfaction, further solidifying our position in the market.
Conclusion
In wrapping up this case study, this project underscores our unwavering commitment to offering bespoke UX solutions that resonate with our clients’ distinctive needs. We’re not just meeting expectations; we’re exceeding them and making a substantial positive impact on the e-commerce design landscape. This endeavor is a testament to our innovative approach, and the results will undoubtedly speak volumes, echoing our dedication and expertise in delivering excellence in UX design.