Project Timber

The Design System That Saved PwC UK Thousands Of Hours.

Client: PwC UI/UX Design Design System Lead

We started by building a UI/UX team with the goal of proving the value of investing in design. As the team grew, we recognised the need for a scalable design system that aligned with PwC’s brand and allowed for efficient, consistent delivery of high-quality designs.

My Role

UI/UX Designer, Project Manager, Strategic lead

Deliverables

Figma Component library made for high fidelity designs and prototyping

Team

UI/UX Designers (5)

Project Impacts

Reduced design time by 70%, enabling my design team to complete drafts in days rather than weeks.

Supporting the team and developers with over 500 component inserts each month and has been successfully implemented across more than 40 projects.

Dramatically improved design consistency fully aligning with global PwC brand standards.

Significant time savings in administrative tasks and cut approval times from days to mere hours.

The Background

Our journey started with forming a dedicated UI/UX team within PwC Deals, driven by an initial goal of proving that focused design investment could bring measurable returns. For the first 3–4 months, I worked as a solo designer before expanding the team with interns to train.

As we grew, we recognised the need for a strong design system. Our aim was to create a system that closely aligned with PwC’s brand, allowing us to deliver high-fidelity designs and prototypes with both efficiency and consistency, while retaining the flexibility to adapt as needed.

The Goals

Our goal was to develop a fully functional design system comprising brand-consistent components with a modern yet timeless style. Each component needed to be optimised for efficiency and reliability, particularly in prototyping scenarios.

Decrease Design Time Increase Design Consistency Streamline Brand Approval Improve the look and feel of search

Design Approach

The Timber Design System was born out of the need to streamline design workflows and ensure consistency across PwC’s applications. By leveraging research, collaboration, and a structured step-by-step process, Timber was developed to align with brand standards, improve efficiency, and foster scalability. This approach not only addressed immediate challenges but also laid a strong foundation for ongoing innovation, enabling the design team to deliver high-quality, cohesive solutions while saving time and resources.

1. Research, Identification, and Prioritisation of Key Components

We began by researching popular design systems and analysing past projects to identify reusable components essential for brand consistency and functionality. A prioritised list was created, focusing on high-value elements that would serve as the foundation for the design system.

2. Collaboration and Feasibility Validation with Branding and Development Teams

Working closely with branding and development teams, we ensured that all components aligned with PwC’s brand standards and were technically feasible. I leveraged my software development background to validate that each component could be implemented smoothly, supporting a cohesive design vision.

3. Establishment of the Timber Design System

With the prioritised components developed, Timber was officially launched as the primary design system for PwC’s applications, setting a consistent and scalable foundation for future projects.

4. Ongoing Expansion and Creation of a PwC-Approved Component Library

Timber continued to expand with each new project. Reusable components were added to ensure efficiency and consistency, eventually evolving into a PwC-approved library. This comprehensive library of components now serves as a scalable, cohesive resource for future design and development needs.

Highlights Of Our Work

Here are some examples of components created for the PwC design system.

The images below are exported sections from the design library file ordered alphabetically. Each card displays indicators for bugs found, component updates, and links to the final built components. This page was designed for clear visibility, allowing developers to browse the available components without needing to navigate Figma extensively or dive into the detailed construction of each component.

Timber In Action

The following examples highlight how Timber, our design system, is actively used by the design team across various PwC projects. Some information has been blurred or replaced with placeholder text for confidentiality. Each screenshot showcases Timber’s components implemented in different themes and styles, demonstrating the system’s adaptability to diverse platforms.

Timber’s flexible architecture is powered by variables and themes, allowing for seamless branding adjustments. Whether used for PwC’s own brand requirements or tailored for client work, Timber adapts quickly, saving both design and development time.

Modal, Text Boxes, Dropdowns, and Scroll Bars

Modal: Frequently used in applications, this modal component is scalable and has multiple header layout options, allowing for flexible information presentation.

Text Box: With various configurations, the text box includes options for icons on either side, embedded buttons, and labels that can appear inside or outside the border. It supports required and optional fields to meet diverse form needs.

Dropdowns: Styled consistently with text boxes, the dropdown component functions fully in prototype mode, enabling dropdown lists. It supports icon display and label positioning, mirroring the flexibility of text boxes.

Scroll Bar: A unique request by the design team, the scroll bar component offers a consistent style for applications, easily dragged into designs for efficiency.

Buttons, Tooltips, and Tables

Buttons: Timber’s button component is highly versatile. The example shown here is the Link Button, featuring basic text with an optional icon. The component also includes multiple button states, such as Filled (Primary), Outline (Secondary), Link (Tertiary), and Icon buttons. These adaptable button styles streamline interface consistency.

Tooltip: This tooltip component can be attached to any element, offering different directional states for arrows. Designers can choose top, bottom, left, or right placements using a dropdown.

Tables: Our table component simplifies complex table designs, including features like filterable and sortable columns, and expandable accordions within rows, providing efficient data handling in various application contexts.

Users can also collapse sections they don't use and their choices will persist in the future.

Calendar and Lists

Calendar: This calendar component functions as expected, enabling seamless date selection and scheduling.

Lists: The list component allows for customisable labels, separated by diamonds or bullet points, offering a more polished list format known as “fancy lists.”

Breadcrumbs and Stats

Breadcrumbs: This standard navigation element includes optional icons, aligning with PwC’s design requirements and providing clear navigation cues.

Stats: Tailored for data-heavy applications, our stat components offer quick overviews of key metrics, helping users interpret important information at a glance.

Upload Area and Icon Buttons

Upload Area: Recognising a common need, we developed a reusable upload component, saving designers and developers time by standardising the upload experience.

Icon Button: This example shows the Icon Button state with active tooltips on hover, making the buttons clickable and informative.

Tabs and Checkboxes

Tabs: Essential in data-heavy applications, the tab component allows designers to indicate active states with highlighted colours and optional icons, creating a visually clear navigation experience.

Checkboxes: A classic component, Timber’s checkboxes are straightforward yet essential for user input in forms.

Primary Buttons, Toggles, and Table Accordions

Primary Buttons: An example of the Primary Button style, shown here with the icon option enabled, allowing designers to choose from PwC’s icon library or Font Awesome icons for added clarity.

Toggle: Replacing standard checkboxes, the toggle component offers a sleek on/off visual with ticks and crosses, making settings adjustments clearer and more engaging.

Table Accordions: This showcases the table accordion functionality within rows, providing a compact way to display expandable information.

Navigation Bar and Page Header

Navigation Bar: Built to PwC’s brand standards, this nav bar component offers options for logos, links, dropdowns, and mobile variants, ensuring cohesive navigation across applications.

Page Header:While page headers may be considered traditional, they are a design standard at PwC. This component offers a flexible way to add images and text, bringing structure and identity to data-driven applications.

Alerts & Toasts

Alerts & Toasts: Our alert component library includes various colours and configurations (with icons, buttons, or plain) to suit informational, warning, or success messages, making important updates visually distinct.

Testing and Reporting Bugs:

Our testing process was integrated into daily design work, where team members would actively use components within prototypes and designs. During this day-to-day use, any bugs encountered were immediately documented to ensure no issue went unnoticed. Each component page in Figma had an “Issues List,” an auto-layout list where team members could log bugs along with specific details of the problem and context. This allowed us to quickly identify and track recurring issues, making it easy to prioritise fixes based on the component’s functionality and impact on workflow.

Idea Collection and Enhancement Proposals:

To foster continuous improvement, we introduced an “Ideas List” alongside the Issues List. This list provided a dedicated space where team members could suggest enhancements, propose new features, or highlight areas where component usability could be improved. By having this structured system in place, the Ideas List became a collaborative space where all team members contributed insights, helping us build a more intuitive and user-friendly design system over time. Ideas were reviewed regularly and considered for implementation, ensuring our components adapted to the team’s evolving needs.

Backlog Management and Bug Prioritisation:

To manage the flow of improvements, we maintained a backlog comprising items from both the Issues List and Ideas List. This backlog was reviewed routinely to organise, prioritise, and assign tasks based on urgency and resource availability. Bugs were categorised by severity, allowing us to promptly address critical issues while scheduling minor fixes and enhancements during quieter periods. This approach allowed us to ensure the design system remained robust, reliable, and adaptable, continuously evolving between projects to meet our team’s high standards.

In Conclusion

Timber continues to be an essential tool in PwC's workflow, supporting the team and developers with over 500 component inserts each month. It has been successfully implemented across more than 40 projects, serving as a robust foundation for over 10 prototypes.

Today, Timber remains a vital part of our design ecosystem, streamlining processes and enabling our team to deliver consistent, high-quality designs across multiple initiatives. Its continued use is a testament to the system's adaptability, reliability, and value in supporting our evolving design needs.

Thanks For Reading!

Why don’t you check out another case study?

Project Origin - The one stop shop for all things company data..

In this case study, I demonstrate how a complete redesign of the search functionality in Origin helped streamline user workflows, increasing efficiency and improving user satisfaction.