The rebrand was the perfect opportunity to rethink AQA's design system, addressing design debt challenges and establishing a strong foundation to scale with diversifcation in the companies products and services. This year was all about fostering a collaborative culture for designers and communicators, empowering them to build consistent and engaging experiences.
Our company was undergoing a complete rebrand, with a new logo, tone of voice, and visual identity. However, the existing design approach was inconsistent, with significant design debt across digital products and marketing materials. The risks were confused user journeys and a fragmented brand experience, harming the perception of the company.
To support the rebrand and ensure brand consistency, we needed to develop a comprehensive design system. It needed to be helpful, easy to apply and built on a modern CSS framework. Engaging designers and communicators across the business, empowering them to create consistent messages aligned to the new brand was our core design principle.
UX design lead and accessibility expert
Following thearrival of new brand guidelines, I initiated a project to update and realign our design system. To ensure it could compete with our competitors, I began with a comparative analysis of leading companies' design systems. This research provided valuable inspiration for feature development and established a foundation for best practices.
Next, I delved into our own digital ecosystem. This comprehensive audit encompassed web apps, data dashboards, marketing materials, and more. By examining the scope and complexity of our existing digital landscape, we gained a clear understanding of the design system's potential scale.
With a better understanding of our business needs, I started to prioritise design components and patterns with the team. This prioritization was based on usage frequency and overall impact, ensuring the most critical elements were addressed first. This multifaceted approach established a solid foundation for a user-centered and visually cohesive design system, guaranteeing a consistent and positive experience across all our digital touchpoints affected by the rebrand.
Building our design system was a collaborative effort! First, I established a central library in Figma, housing everything from brand styles to design patterns for easy access and teamwork.
Next, I focused on continuous improvement. We set up a structured workflow for reviewing and updating design elements, involving key stakeholders across teams to ensure ongoing refinement. I also revamped existing components for specific use cases and educated other designers on the system's effective use.
I partnered with front-end developers to build the components within their CSS framework, ensuring a smooth integration with their workflows. Accessibility was paramount, and I championed WCAG compliance throughout the project. Finally, drawing inspiration from IBM's design approach, we collaborated with other designers to create a cohesive visual style for data visualization. The design system was taking shape, ready for testing with creatives and communicators across the company!
Ensuring user adoption and accessibility were key considerations. We addressed this by creating a dedicated style guide website. This online resource housed comprehensive design system guidance alongside relevant brand information. Stakeholders across the organization could readily access and leverage the system for consistent brand application across their projects.
To foster ongoing support and knowledge sharing, a community of ambassadors was established and educated on the new system. These champions provided ongoing assistance to stakeholders facing specific design system inquiries or assets.
The final design system was delivered in time for the rebrand September launch.
#1 Collaboration is key: Integrating insights from various stakeholders (brand, design, development, and customer teams) throughout the process fosters a comprehensive and user-centered design system.
#2 Iterative development: Ongoing feedback loops and continuous refinement ensure the design system remains relevant, efficient, and accessible in the ever-evolving digital landscape.
#3 Education and support: Effective communication and widespread training empower stakeholders to adopt and utilize the design system to its full potential.
