The tarte design system is a library of customizable UI elements, design components, and guidelines created for all digital experiences living across tarte.com. The design system was built to improve the consistency and quality of our e-comm site and the user shopping experience.
“I struggle to find the most up to date version of a component, along with updated design solutions from recent A/B tests that most likely will affect the layout of a page.” - Designer
“It would be awesome to update styles in one place, rather than altering design styles slightly for each feature we build out” - Developer
During my time at tarte, I watched our online business grow immensely, resulting in an increase in team resources and roadmap initiatives. In order to keep up with the compounding site enhancements and new feature initiatives, it became crucial to implement a design system to ensure productivity amongst the designers, efficiency for developers, along with consistency across our digital product experience for our consumers.
My first step was to gather current site guidelines along with newer style updates the team had been implementing. I pulled these styles from previous high fidelity prototypes, live site experiences, google docs, brand guidelines, and other miscellaneous digital design files. Next, I began to catalog these design elements using Brad Frost’s atomic design system model of: atoms, molecules, organisms, templates and pages. During this process I was sure to build strong, consistent design components that could be leveraged for rapid prototyping and easily updated at a large scale if changes are made. Additionally, I confirmed and updated all design elements to meet accessibility standards.
Once all design components were created and archived accordingly, I renamed the atomic design categories to universal language already used amongst the designers at tarte. This updated terminology aided their ability to quickly find design elements while prototyping. In addition, each page within the design system outlines clear directions of search terms to use when locating each asset in the component library. The documentation will not only support the current team, but it guarantees an easier onboarding process for new team members, and a streamlined pass-off when outsourcing agency resources.
Tarte’s new design system successfully organized all UI elements, components and brand styles. The new system ensures a consistent design pass off to our developers, increased productivity for our designers, and a harmonious shopping experience for our users.