eCommerce Component Library
Task
Holistic product strategy and design for a comprehensive eCommerce component library. From research to delivery and support we've done it all.
Beautiful Ecommerce UI Components
Designing components is exciting. Designing an extensive eCommerce design system with multiple variations to each component and multiple themed systems is a more significant yet exciting challenge. A project with a proper strategy, plenty of research, and a chance to explore our UI team’s skills is the gold standard of learning for the entire team. The key thing we focused on, besides the design, was to make sure the User Experience was driven towards performance. The end goal of building the system is to help in performance commerce.
Designing the System: Idea, Research and Strategy
The idea to strategise and design a complete eCommerce design system was born when we were tasked to provide fresh design perspectives to a couple of eCommerce clients. While working on these projects, we noticed similar patterns in all these sites. We 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 we could. We hunted websites of different types of stores for the research – including popular fashion brand stores, food and beverage stores, camera stores, automobile stores and more. 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.
From the endless research of as many e-commerce sites as we could, we made a preliminary list of standard UI components, some of which were –
- Product Listings
- Product details
- Mega Menus
- Shopping cart
- Reviews
- Order details
- Checkout
- Profile pages
- Product Landing pages
and more!
Identifying the components needed to build this system was vital. We reviewed our preliminary list constantly to ensure we didn’t miss any necessary elements. With the research in place, it was onwards to design – wireframes, defining the design system and bringing the components and pages to life.
Defining the system and designing the components and themes
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 defined a design system (or we call it 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.
Finally, we gave the entire system a look-through to check if we missed anything. We realize that a perfect system can’t be built at the first shot – there is constant iteration and improvement – the process is never straightforward. Wherever we noticed there was a less number of ideas, we worked on adding a few more. We added more layouts that we felt were needed to complete the systems. Working with multiple themes and skins, there was bound to be some components that were needed for one and not necessary for the other theme. So we went back to our design phase and reworked the designs so they would work with the themes.
This project is still in progress and is constantly evolving. We’re working on adding new components, exploring other skins and themes to add to the growing repository and improving the design on a few that we think could be better. Working on a product is a long, learning process, but we definitely enjoy the challenge of doing things that help us improve our skills as designers.