The challenge
The overall customer experience had become fragmented and inconsistent across multiple journeys and platforms.
What I did
Audit existing state, set up documentation and processes, identified tools and built new library.
The outcomes
Increased consistency across the entire customer journey and platforms. Increased reusability and efficiency within the design team.
What was the challenge?
Purplebricks’ digital touch points had expanded across multiple platforms as the company had grown rapidly. With minimal design oversight, the overall design of the customer journey had become fragmented and inconsistent.
What I did?
As the Senior UI Designer in the design team it was my responsibility to discover, plan and implement building a design system.
Audit of digital flows
I started by documenting all existing components and patterns used across the user journey. Whilst there was only a small set of commonly used core components, there was very little reuse across the various parts of the site. As an example, there were in excess of 40 different variations of buttons in use.
Established a cross functional working group.
Working with the Design Ops Manager, I started, and ran, a regular Design Systems Guild. This was a forum for discussions between design, engineering and other functions to support and align around the design system. This was an important first step as it allowed:
Gather insights and considerations from different disciplines
Created an open platform for anyone to contribute
Helped raise the profile and knowledge of the design system
Examples of design system guild meetings
Setup of design system documentation
I reviewed and trialed an number of options for documentation, finally settling on Zeroheight as the most suitable tool. It allowed for easy editing and maintenance of documentation options lik with embedding of live components that fit with our engineering approach. I set up the initial structure, working with our Senior Content Designer, and then encouraged contribution and maintenance by the wider team.
https://zeroheight.com/3e5377607
Realising that the name of the design system was important in it's future success, we ran a process come up with a suitable name, ultimately agreeing on Blueprint.
Reviewed existing tools and workflows
As part of the initial discovery for the design system, I carried out a review of existing design tools, processes and ways of working.
Having completed this and spent time trialing different design tools, we switched to a single design tool in Figma which replaced a number of disparate previous tools. This enabled the establishment of single a centralised design library as well as better collaboration and sharing across the entire digital team.
A new design library
I setup a new sharable Figma design library and worked with the engineers to align this with their React component library. Working with key engineers we created consistency across libraries, including creating component attribute naming conventions and building flexibility in components to ensure reusability.
Ongoing development
Having the basics of tooling, process and a working group in place put the foundations in place. This allowed for the Blueprint Design System to develop alongside the ongoing product roadmap. Including:
Creating a roadmap of components for review, documentation and build
Managing additions to the library on an ad-hoc basis as requirements were identified
Advocating for the design system with senior management and stakeholders
What were the outcomes?
Increased consistency across the entire customer journey.
Customers switching channels were given a much more consistent experience. For example when the mobile app switched to using webviews for some functionality it was a seamless experience.
Increased reusability and efficiency within the design team.
Example of native and webviews
Before and after examples
Learnings and Reflections
Huge strides were made in consistency, however the sheer size of the digital estate means that there is still work to be done to bring all touch points in line with the design system.
Building a design system is an evergreen project – managing this can be a challenge with without a dedicated team.
Challenges around priorities, resources, nothing design and engineering, and changes of business focus meant that the pace of development was slower than anticipated.
Evolution of Blueprint
As the Purplebricks business evolved so did the design system. At the end of 2023 the company went through a complete rebrand and change of direction. This meant that the design system needed to evolve in line with the business.
This is ongoing work and the foundations of this work were undertook as part of a project to deliver the redesigned Purplebricks website.
