The Process
Background
This project aimed to create a single website that consolidates digital style guides and information for System1's 20+ brands. Previously scattered across different formats and platforms, my goal was to unify all resources into an easily editable and accessible hub.
Research + UX
The initial phase of this project involved conducting extensive research on competitors' design systems to gather insights on their content and structure. However, a significant challenge arose as most competitors only required a design system for a single brand, whereas in this case, multiple brands needed their own individual design systems. This complexity presented a substantial undertaking.
To tackle this challenge, I collaborated with designers, editorial teams, and project managers from various teams to gather as many resources as possible. The aim was to create design systems that offered flexibility, allowing each brand to have unique pages and themes as required. Furthermore, it was crucial to ensure easy access and downloadability of logos and typography resources.
To establish a foundational understanding of the content and layout requirements, wireframes were created. These wireframes provided a preliminary visualization of the elements that should be incorporated on each page, facilitating the development of a coherent structure for the design systems.
UI Design
After finalizing the wireframes, I proceeded to develop the foundational UI design using Figma. Applying the unique visual identities of each brand, I meticulously crafted the base design to align with their respective websites and style guides.
A key focus during the UI design phase was to prioritize the organization and navigation of pages and information. Recognizing the importance of efficient access to resources, I implemented a cohesive structure that ensured stakeholders could easily locate the information they needed without delay. By emphasizing intuitive layouts and clear navigation elements, I aimed to streamline the user experience and facilitate quick and seamless access to relevant content.
Front-End Development
The front-end development phase posed the greatest challenge in this project, given the extensive workload involved. I embarked on building a new WordPress theme from scratch, prioritizing flexibility through the use of custom fields. It was crucial to ensure that anyone could easily edit their design system without technical hurdles.
The use of modern CSS was integral to this project, and helped me to create unique layouts and designs quickly. Sass, CSS custom properties, and Grid layout were all utilized thoroughly.
As the project neared its conclusion, I enlisted the support of additional developers to assist with PHP tasks and expedite the overall build process. This collaborative effort enabled us to efficiently tackle the remaining development work, ensuring timely project completion.
