Long-term project to create and curate a Design System that provides support up to 5 different e-commerce sites.
1. Design challenge
Create a Design System that gathers components coming from different e-commerce sites, to create a consistent and common design language.
2. User research
We have here various sources to get user feedback. On the one hand, the client owns a User Lab to test with users regularly, and on the other hand they also gather user data from Google Analytics.
The combination of qualitative and quantitative data makes easier to find out what the users need, and where to implement it.
Although we don’t have full access to all this information, basically because they are huge company, we collaborate enough close to have the possibility of understand their users and prioritize their needs. We took those insights, for instance to dismiss some components and to keep others.
3. Ideation
The first step was to analyze the existing shops, in order to figure out which components were duplicated. We use an interface inventory, that allowed us to categorize them into groups to have a better overview of the system.
Due to the complexity of our project, we decided to adopt the “atomic design” methodology invented by Brad Frost, but with a difference: we dismiss the ”pages” because we didn’t really focus on content, but on the system itself.
Our tool to build the system as a designer was Sketch, but because we had to document everything and curate it too, our developers conceived an online pattern library. They put there all the components. as well as all relevant information related to the system. As of today, we keep the site quite well and it’s very helpful when looking for some components to build others.
4. Design
The next step was to create a white label that contains all the components that we have previously selected to be part of the system. We standardize with that all the elements that are needed for an e-commerce site, taking into account the needs of its users, and the commercial vision of the customer.
Once the pattern library was done, we had to style each shop to provide them with a customized personality and tone. We did that through some basic elements, such as fonts, colors, etc.
5. Testing
At first it’s difficult to measure the success of a task like this, so we choose to carry out a retrospective with the customers to know the level of satisfaction of all parties. Among the conclusions, we can say that the most valued point was the speed with which we can currently implement new features. In fact, after a few months, a new e-commerce site has been launched within two weeks, simply by defining new styles for that shop.
Obviously, this can be translated into a substantial reduction in the production costs of a new product, and therefore an increase in profits for the customer.