Design System
Club Premier2019
A comprehensive design system to establish a unified language across Club Premier's digital products.
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.
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
n 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.
n 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.