Design System
In order to comply with my confidentiality agreement, I have omitted confidential information. All information is my own and does not necessarily reflect the views of Club Premier.
The Context
After spending a few weeks familiarizing myself with the newly created Customer Experience team and their work, I came to realize that there was a lack of clear design guidance, no visible components, and a dearth of reusable code and design files. The website's design elements were created at different times by different designers in different contexts, resulting in consistency issues.
Many pages, products, features, and components lacked alignment with UI and UX standards. This became more evident when designing new pages, products, or features due to the lack of design principles. The lack of standards led to significant time spent on design decisions.
The Solution
This was the foundation for the design of a comprehensive design system, which aimed to establish a unified language across Club Premier's digital products. Furthermore, it presented an opportunity to reconsider the design of the website.
I began by auditing the site, which at the time was over 250 pages long, and all existing styles and components to document their usage and purpose. The use of copy-and-paste for design and development led to the creation of multiple components with no reuse potential.
The project resulted in the delivery of a comprehensive library of atomic components and elements, including fonts, colors, and icon sizes. By establishing a reference document for all components and design specifications, the secondary goal was to streamline the delivery process for the development team.
The Impact
In 2019, Club Premier's homepage received over 57 million views and attracted more than 4 million visits from approximately 1.8 million unique users. The design system enabled the swift creation of new pages, reordering of sections, and relaunching of products within weeks.
The Findings
- While I saw significant improvements in team efficiency and speed, these results should not be attributed solely to the design system, they are a consequence of conversation and collaboration habits.
- Implementing a clear, consistent and common design language increases the efficiency of design cycles and speed in creating, scaling and growing products.
- A design system is a living organism that evolves with the product and must adapt to the needs of the business.
In 2019, I spearheaded the inception of this project and collaborated with a development team to facilitate its implementation.