Design Language System & Portal for Educational Platforms

Within four years Pearson’s UX Design team’s responsibility grew from a single platform to four. Another year later that grew to six platforms and the product content contained within them. The team averaged 0.1 designers per scrum team across the suite of products and platforms in the K-12 portfolio. To meet their continually increasing workload, the team needed a system that worked with a streamlined workflow and gave them the ability to balance quality with efficiency.

They needed a solution would need to allow them to:

  1. Increase transparency and communication, while decreasing the overhead of 1:1 communication.
  2. Document reusable design and interaction patterns in a way that is resistant to the documentation becoming outdated.
  3. Distribute completed design work in a standardized delivery across every team they interacted with.
  4. Facilitate knowledge sharing for insights gained in usability testing.

The Approach.

The initial research for this project focused on best practices employed by companies that utilize design systems in their base design practices. Narrowing in on systems that created bridges across disciplines to identify the traits and features that help increase adoption and use throughout the entire ecosystem.

As the direction of the project started taking shape, I began presenting the concepts to the UX Design Team and to cross-functional teams to get their buy-in, not only regarding the concepts making sense, but to ensure there was a general sense that the project would  provide value to the various teams it would touch.

Keeping it Lean for Rapid Deployment.

Once there was buy-in and support for the direction of the project, I began breaking down the site’s organizational hierarchy in a way that was consistent with how the team approaches design and interaction pattern reuse.

Since the team needed a solution sooner, rather than later, the functionality was broken out into phases. The focus of the first phase was to replace the out-of-date style guide with a design system that would eventually turn into a living style guide. This path would help safeguard from it from lagging behind by making it part of the team’s every day workflow.

Information Architecture

From there, wireframes were created to hash out how each section would visually communicate the design patterns it was responsible for. To continue on the path of expediency, a lean-inspired process with rapid feedback loops was adopted. The wireframes were kept high-level, with the exception of a few narrow slices to help identify the data points the team wanted to communicate, along with the visuals for those data points. The visual design followed suit, using a minimalistic style drawing from the new corporate branding Pearson launched earlier in the year.

High-Level Wireframes

Trial by Fire. Refining the Feature Set through Actual Use.

As soon as there was a baseline level of functionality was implemented, the team started incorporating it in a few of their projects. This allowed for the use of rapid feedback loops to feel out how intuitive it was to use, if the functionality meshed with the team’s workflow, how well the features communicated the data that needed to be relayed and to flesh out any bugs that needed to be fixed.

Creating Transparency to Reduce Communication Overhead.

Having clearly documented design patterns that were easy to access and update helped reduce the number of design-related questions the team needed to field. The next phase of the project was to address the status related questions that came from the numerous cross-functional teams they worked with.

Product Management, UX Design and Development teams all utilized different task tracking systems, making it difficult to share data across teams. To solve the portion of the problem we had control over, I created an integration with the UX Design team’s task tracking system to expose the team’s status data in the same place teams were already accessing design pattern documentation. The data was viewable by project, or by designer and sortable on a number of data points to make it easier to find what you were looking for.

Epic & Feature Status Reporting

Sharing What Has Been Learned. Successes and Failures.

A large contributor to the data-driven design practices the UX Design team followed came from their regular usability testing sessions. Typically various documents and slide decks would be assembled and presented after each test, later getting archived in a filing system to collect dust. Creating these post-test deliverables consumed a considerable amount of time and once the presentations had come and gone, they weren’t easily accessible for others to access.

The last phase of the project was to create a standardized, simple to understand format for the test results and make them easy to access for stakeholders, or other teams that want to learn from their research.

The Result.

Since it’s initial release, the project evolved from a design language system, into a design portal averaging over 4,000 page views per month, housing documentation, specifications, best use guidelines and usability test results for the reusable design patterns in the K-12 design system. Authenticated users can additionally download full feature specifications for upcoming development work and check on the status of in-progress design work.