Datatrics is a Customer Data Platform that allows website owners to create personalized experiences for their users. With a free trial approach, the website has the goal to explain the product and to persuade users to sign up for the trial.
Back in 2020, we started mapping all the existing components in the website in order to create a Pattern Inventory. From this, we made choices to create a consistent user interface. Right now, we have a tested Pattern Library for the Datatrics designers and we are working on bringing it in a Storybook, to complete the whole process.
To create this pattern library, we started from the basic elements that compose the User Interface: colors, fonts, grids, the icon set and how the logo and brand should behave according different context.
When the foundations was ready and solid, we defined all the atoms that make up the user interface: buttons, navigation elements like tabs and filters, input fields and cards.
Atoms have been used to make up complex structures, the components. Those that are going to be used to create the page templates. We structured the components that are fully usable with Figma variables, so to reduce designers effort when adopting them.
