Streamlining UX for 50+ Teams: Developing a Comprehensive UX Pattern Library
Project Overview
While I was still a Senior Associate at PwC Digital, I was asked to lead a new initiative: designing and working closely with our product teams to create an asset library of UX design patterns for our design system. The aim was to help streamline repetitive work for designers across product teams and ensure brand consistency. My initial role was to design the components, but I later transitioned into a managerial position, overseeing the growth of the initiative and a team of designers.
Timeline
5 months of initial development; ongoing contributions and management
Skills/Tools Used
Figma Excel ChatGPT
Role
Senior Associate Design Lead
tl;dr
To streamline design processes and ensure brand consistency at PwC Digital, I led the creation of a comprehensive UX pattern library within our design system. This involved designing 11 reusable components, including templates for common screens like login pages, and developing a modular "Dashboard Builder" for rapid design assembly. I managed 50+ requests, created detailed documentation, and facilitated collaboration across design, development, and accessibility teams. The initiative reduced repetitive work, enhanced design efficiency, and fostered consistency. As a result, designers could prototype faster, meet accessibility standards, and maintain high-quality output across products.
The Challenge
The challenge was to create standardized design patterns that could be reused across various product teams. Designers were spending too much time recreating common screens or flows from scratch, leading to inconsistencies and inefficiencies. My task was to work with stakeholders to identify best practices, develop UX patterns, and ensure their integration into the design system for easy access and implementation.
Goals & Objectives
Business Goal
Create a comprehensive set of reusable UX patterns that increase design efficiency, reduce repetitive work, and improve brand consistency.
User Goal
Enable designers across various product teams to quickly and effectively build interfaces that align with brand guidelines and best practices.
My Approach
- Identifying Key Patterns
- Building and Integration
- Dashboard Builder I also developed a "Dashboard Builder" in Figma that utilized a combination of components constructed in a modular system. This enabled designers to quickly craft dashboard layouts by dragging in their own custom blocks while holding command and alt, without detaching the parent component from the main library. This approach ensured consistency and allowed designers to receive updates to the components while still being able to add their own designs and content seamlessly.
- Transition to Managerial Role
I began by consulting with product teams to identify the most commonly repeated elements in our designs. One of the first components I worked on was a dynamic template for "Login screens," which involved aligning with the global brand department to finalize product illustrations, logo placement, and style guide compliance. This also included designing a complex set of Figma components that allowed designers to easily drag, drop, and swap product branding and information.
Over the span of 5 months, I designed and developed 11 components and design assets, incorporating considerations for Figma library integration and development preparation. Each component was built to support different use cases, ensuring scalability and flexibility for the product teams.
As the initiative gained traction, I transitioned into a managerial role, leading a team of three designers. I also managed over 50 component requests from various teams. I bridged the gap between design and development by ensuring that each design asset was production-ready and collaborated closely with developers for implementation. To track the progress, I developed a robust spreadsheet that monitored every phase of the SDLC, including request details, research findings, development dependencies, accessibility, and QA requirements.
Solution
- Deliverables:
- Created 11 key components for the UX asset library, including dynamic templates for commonly repeated pages like login screens.
- Developed a robust spreadsheet tracker to manage over 50 requests and track progress across the SDLC, including research, development, and accessibility considerations.
- Produced a clear checklist and documentation for other designers to ensure consistent quality across Figma components and asset management.
Impact
- Efficiency Gains: The asset library reduced repetitive work significantly. Designers no longer needed to recreate common elements from scratch, resulting in faster design cycles and improved consistency across products.
- Adoption and Expansion: Over the project duration, we fielded more than 86 component requests from product teams. We successfully launched 12 fully developed and designed UX patterns on the design system website, ensuring these patterns were easily accessible for future projects.
- Collaboration and Streamlining: I led weekly calls with a global team of designers, developers, and accessibility leads. The collaborative environment improved the consistency and quality of the UX patterns, ensuring that each component met accessibility standards and brand guidelines.
- Upskilling Support: As noted by a senior manager: "Luke collaborated closely with other [design system] designers and stakeholders, managed the creation/expansion of the [design system] Figma library including the needed upskilling support, and helped manage the design process of…MFE components. Because of Luke's design and managerial contributions, teams using [our design system] will be better enabled to rapidly create Figma prototypes for both business and product development needs."
Due to the nature of my NDA, I am unable to show more examples of the final designs. If you are interested in learning more, let’s connect.
Reflections
- Key Learnings: Establishing a standardized library of UX patterns requires strong collaboration across disciplines. By building a robust asset management process and clear guidelines, we were able to ensure that design quality and brand consistency were upheld.
- What I'd Do Differently: I'd invest more time in establishing early feedback loops with stakeholders. This would allow for quicker validation and iteration of UX patterns, ensuring the needs of different teams were met even more effectively.
The development of the UX pattern library for our design system created a significant impact on our design efficiency and output quality. By providing consistent, reusable assets, the team could move faster, produce higher-quality prototypes, and maintain brand consistency across different products.
Social