Datatrics is a Customer Data Platform that allows website owners to create personalized experiences for their users. The product allows users to collect, clean and present customer data in a clear way and use it to personalize websites according to users’ profile.
In 2021, we started for the first time to map all components that are in the current version of the product interfaces. After mapping, we realize the first draft of the Pattern Library using the knowledge from what we explored visually and then a second draft to try and reach a consistent user interface from different angles. Right now, we are monitoring and finalizing the Pattern Library and updating the existing Developers’ Storybook of it, to complete the whole process.
To create this Pattern Library, we had to start from what already existed in the platform itself. For this reason, we analyze all flows of interfaces in order to try and understand better the entire ecosystem and have a more in depth knowledge of all feature. This helped us to make a better inventory and categorize all elements and components.
Thank to the interfaces analysis we were able to define and group all types of components that resulted in a Pattern Inventory. Subsequently, the first step in order to create the Pattern Library was to define the visual identity of the platform in a Style Guidlines. We were able to do so quickly thanks to the existing Pattern Library of Datatrics websites.
We combined the Style Guidlines and the Pattern Inventory in order to design first Atoms, then Molecules and so on (following the Atomic design framework). Eventually, we completed and structured all components and variations using Figma, in order to be ready to use by designers and developers while building interfaces.
