Pearson Design System
2017 - 2018
How do we help teams adopt the design system effectively?
Company
Pearson
Duration
1.5 Years
Team
1 Product Manager
1 Team Lead
5 Designers
Engineering Team
Skills
Design
Research
Product Roadmap (Website)
My Role
Component Design
Documentation
Component Stickersheet
Governance Review Standards
Email Newsletter
System Website Design
Overview
In 2016, Pearson adopted a new brand identity, which led to the birth of a unified design system - The Pearson UX Framework.
Our goal was to help the company achieve design consistency and efficiency at scale. Our team helped build, grow, and evolve the design system.
My Role
Here are the things I worked on to advocate for the design system:
Designed and documented components
Created a UI component stickersheet
Helped establish governance review standards
Initiated an e-mail newsletter
Designed the design system website
1. Designed and Documented Components
I designed a few components and documented the design and usage guidelines for designers and developers.
We contributed to component documentation using GitHub:
2. Created a UI Component Stickersheet
How do we make designers’ lives easier? Instead of having to manually download each component, I thought it would be easier if we put all the components in one design file. Therefore, I created and maintained a Sketch UI kit for designers to easily adopt the design system in their workflow.
3. Helped Establish Governance Review Standards
I collaborated with designers, developers, and accessibility specialists to standardize our governance review process to ensure the quality of our components. Below is a checklist for adding a new component to the system:
4. Initiated an Email Newsletter
People wanted to know what’s new, what’s coming up, and how to communicate with the design system team. I initiated, built, and managed an email newsletter using MailChimp to promote the design system and keep users informed about the latest releases, both in design and development.
5. Designed the Design System Website
I redesigned our design system website to make sure it’s understood, valued, and used effectively. In the next section, I will share the process we took to enhance the website.
Enhancing the Design System Website
Overview
A design system isn’t successful if it’s hard to understand, difficult to adopt, or used incorrectly. Thus, an effective website is crucial to driving adoption. I helped design the system website by improving:
Utility = whether it provides the features you need.
Usability = how easy & pleasant these features are to use.
From 2016 to 2017, we’ve gone through two major site-wide redesigns.
My Role
I partnered with another designer who was also the developer on the redesign project. Like a startup, we each wore multiple hats and collaborated closely on the project from discovery to implementation.
What I did:
Collected user insights through research
Proposed product vision to the stakeholders to get the support needed to move forward
Helped define the product roadmap with short-term and long-term plans
Provided the design to guide implementation
My Process
Conduct user research to understand user needs, goals, and pain points
Conduct an audit of the current website and identify areas for improvement and opportunities
Present findings and recommendations to the stakeholders
Build prototypes to convey vision and arrive at the final solution in collaboration with the team
Propose a roadmap by prioritizing work based on impact and effort with stakeholders and engineering
Provide detailed design specifications for implementation
Learn and repeat
User Research
I started the project by asking two critical questions:
Question 1: Who's our target user?
Understanding who we are designing for helped us see the world from the users’ perspective and ensure we are solving the right problems. The website served two groups of users: the Design Systems Team and the product teams across the company.
I wanted to understand:
What are their goals?
What are their workflows?
What tools do they use?
What are their challenges, and how do we help them overcome these challenges?
I conducted user interviews to answer these questions.
Question 2: How do we improve the design system and the way it’s delivered?
What do people think of the UX Framework, from the design system itself to the website?
Do they find it useful, or more confusing?
How do we help them accomplish their goals?
To find out, I approached our users with brief surveys and follow-up interviews to dive deeper into the problem space. Then, I transformed these insights into tangible design solutions.
Findings & Recommendations
I conducted an audit on the current website and compiled my analysis and suggested solutions into a 37-page report to help guide the redesign:
Prototyping
I built interactive prototypes to explore different solutions:
Outcome
We set out to improve the system website both functionally and experience-wise to drive better adoption.
Ultimately, our efforts resulted in:
Easier access to components through a simplified navigation and added search functionality.
A Sketch UI stickersheet that sped up design implementation. Previously, designers had to download each component separately, which was time-consuming.
A cleaner UI for improved readability, discoverability, and findability. For example, we improved the icons page with a more scannable gallery layout, helping users identify the icons they needed faster.
Clarity around design versioning that removed confusion and guesswork from the users when choosing the right version for adoption. See the case study below for details.
Case Study
Dealing with different component versions amid development chaos
1. Problem
“I don’t know which version to use.”
Through user interviews, I discovered that users were overwhelmed by the different versions of the same component provided on the homepage.
For example, the button component had three different versions: Design, Code, and Beta. Users didn't know which one to use. It also caused problems for team collaboration as each person was referring to a different version of the same component.
This was the UI before the redesign:
Beta was the version that was under review, awaiting approval. We learned that it was particularly confusing for the users.
So, why couldn't we remove Beta from the UI? While it sounded like an intuitive solution, I soon learned that removing Beta would create new problems:
The Design System engineering team wouldn’t be able to see the proposed design that they are responsible for building.
We wouldn’t be able to collect the feedback we needed to finalize the design.
While users (product teams) complained about the confusion, they still wanted to see what’s coming to avoid unnecessary rework.
Therefore, we decided that the bottom line was to keep the Beta version but solve for confusion. I also learned that since each product team worked at a different pace, we must keep a reference to all of the previous versions for product teams to access.
2. Design Process
You don’t get to a good idea without coming up with a few bad ones.
How do we empower users to make good judgments on which versions to use while providing access to multiple versions of a component?
The key was to clearly communicate the differences between the versions and let the users choose which versions they want to use by weighing the opportunities and risks for their unique situation.
I explored a few concepts for the component page banner:
Design Explorations - Header Section
Design Exploration - Headers in Context
Click the arrow buttons on the sides to view the different concepts.
3. Solution
“Just show me what I should be using!”
Confusion is often the result of a disconnect from expectation. So, we decided to go with what users expected - just show me what I should be using! That led us to the decision to go with Concept 4.
Instead of asking users to pick the proper version up front, we took out the guesswork by directing them to the latest design-approved, code-ready version. Then, if they were interested in seeing what’s coming, they could access the Beta version with an extra click. All previous versions were accessible at the bottom of the page as well. We also added friendly messages to clarify the difference between the versions to help users make better decisions.
Here’s the final solution:
4. Impact
In the redesign, we removed the guesswork for users by directing them to the version that they need to be looking at while maintaining access to other versions. Users could now be more confident in determining which version to adopt based on their unique situation.