Yellow Submarine Design – UI/UX by Lynn Chang

BACK

Being one of the first member in Pearson’s first framework, my task was to build and maintain a system that provides a unified set of UI, design rules and patterns across all Pearson Higher Ed digital products

My Role

timeline

deliverable

tool used

users

Product Designer

---

UX documentation

Figma

---

My Role

timeline

deliverable

tool used

users

Product Designer

---

UX documentation

Figma

---

My Role

timeline

deliverable

tool used

users

Product Designer

---

UX documentation

Figma

---

Pearson

Pearson UX Framework

Goal

For team of designers to create high-fidelity mockups

Simplify ability to create design that are consistent across all Pearson products

Saving production time for developer and designers

Challenge

The Accessibility: Design to meet Pearson accessibility standards

The brand: This design system should be base on existing Pearson brand. Charismatic principles for Pearson’s digital products - Energetic, Inviting and Dynamic

The Responsiveness: All design components should be scaleable to fit all devices, layout should be designed for all breakpoints,

Goal

For team of designers to create high-fidelity mockups

Simplify ability to create design that are consistent across all Pearson products

Saving production time for developer and designers

Challenge

The Accessibility: Design to meet Pearson accessibility standards

The brand: This design system should be base on existing Pearson brand. Charismatic principles for Pearson’s digital products - Energetic, Inviting and Dynamic

The Responsiveness: All design components should be scaleable to fit all devices, layout should be designed for all breakpoints,

Goal

For team of designers to create high-fidelity mockups

Simplify ability to create design that are consistent across all Pearson products

Saving production time for developer and designers

Challenge

The Accessibility: Design to meet Pearson accessibility standards

The brand: This design system should be base on existing Pearson brand. Charismatic principles for Pearson’s digital products - Energetic, Inviting and Dynamic

The Responsiveness: All design components should be scaleable to fit all devices, layout should be designed for all breakpoints,

Pearson UI Kit 2.1.0

Table component

Day Picker component

Cisco CX Cloud

Intro

This design system is specific designed and documented for Cisco CX Cloud.

Guidelines

Callout and description of each elements in the components.
Documented the usage of the components. include possible categories, example of the do and don’t.
Example of the component of how it was displayed in the product, usually presented in screenshot format.

Spec

Specification and redline of the component. Include color, font, sizing and responsive in breakpoints

Accessibility

There’s a specific area to address how component displayed accessibility elements ( focus state ). and how the key stroke navigated across component.