Learning Platform · (P)You
Design Systems
For Capability Training Platform
Overview
(P)You is a capability training platform that builds human judgment and practical skills for the AI era. I created reusable components, design tokens, and visual guidelines to maintain consistency across its website and learning platform and reduce repetitive design work.
Role
Sole Product Designer
Platforms
Website and learning platform
Tools
Figma, FigJam
Approach
Product Design, Design Systems Architecture, Design Tokens, Reusable Components, Component Variants, Responsive Layout
UI Audit
While designing (P)You, we ran into a few challenges across design and implementation.
The initial priority was to launch responsive landing pages and learning modules within a tight timeline.
But as the product evolved through multiple iterations and usability tests, we started noticing recurring issues with navigation, visual hierarchy, and how information was presented across screens.
Core Operational Problems
To bring consistency across (P)You,
we created
(P)You Design System
The design system brought (P)You’s visual language, UI components, variants, and interaction patterns into one cohesive system. From typography and colors to reusable components and learning experiences, a shared foundation is built to improve consistency, streamline design decisions, and support the product as it evolved.
HOW I Build
First, I started with the visual foundations.
I started by defining color, typography, iconography, and spacing to create a consistent visual language and a foundation that could grow with the platform.
01
COLORS
02
TYPOGRAPHY
03
ICONS
04
SPACING
05
COMPONENTS
06
LOGO
07
PRODUCT IDENTITY
Foundation 1/7
Colors
The color system is built on semantic tokens from raw primitives to contextual roles. Every color serves a purpose: brand, neutral, feedback, and surface.
DESIGN CONSIDERATION
The visual palette is designed to feel premium and credible while reflecting the urgency of developing human judgment in the rapidly evolving AI era.
DESIGN DECISION
Maroon red is selected as the primary brand color to signal urgency, energy, and purposeful action. Charcoal and natural black add depth and a premium character, while white creates contrast and clarity across learning content and interfaces.
Core Palettes
Primary Maroon Red
#931A28
White
#FFFFFF
Charcoal
#272F38
Natural Black
#000000
Primitive Color Tokens
Semantics Color Tokens
Color Systems (Semantic Tokens)
Surface
surface/default
#FFFFFF
surface/action
#931A28
surface/hover
#D4A3A9
surface/secondary
#000000
surface/disabled
#ADB1B5
Text
text/heading
#0A0C0E
text/action
#931A28
text/action-hover
#761520
text/disabled
#ADB1B5
Component States (Button)
primary
#931A28
secondary
#272F38
disabled
#EBECED
Accessibility
Aa
Primary on White
#931A28 on #FFFFFF
8.68：1
AAA Pass
Aa
Charcoal on White
#272F38 on #FFFFFF
13.55：1
AAA Pass
Foundation 2/7
Typography
DESIGN CONSIDERATION
The type system needs to feel human and approachable while conveying confidence and credibility. Clarity, readability, and responsiveness are also essential for creating a consistent experience across all learning content and devices.
DESIGN DECISION
I paired DM Serif Display with IBM Plex Sans to balance human expression with digital clarity. DM Serif Display brings warmth and confidence to key headlines, while IBM Plex Sans provides accessible, consistent reading across body content and interface elements.
WEIGHT
Regular, Italic
USAGE
Key Headlines
WEIGHT
Regular, Medium, Semibold, Italic
USAGE
Supporting Texts & UI Elements
Text Styles
Size
Line Height
Usage
heading-regular/h1
72 px
88 px
Main hero headline
heading-regular/h3
48 px
56 px
Section heading
body-paragraph/p-2xl
24 px
40 px
Major Heading
body-paragraph/p-md
18 px
26 px
Standard paragraph
link-medium/p-md
18 px
26 px
Links
body-paragraph/p-xsm
14 px
22 px
Captions and supplementary text
Foundation 3/7
Icons
DESIGN CONSIDERATION
The type system needs to feel human and approachable while conveying confidence and credibility. Clarity, readability, and responsiveness are also essential for creating a consistent experience across all learning content and devices.
DESIGN DECISION
I paired DM Serif Display with IBM Plex Sans to balance human expression with digital clarity. DM Serif Display brings warmth and confidence to key headlines, while IBM Plex Sans provides accessible, consistent reading across body content and interface elements.
WEIGHT
Regular, Italic
USAGE
Key Headlines
WEIGHT
Regular, Medium, Semibold, Italic
USAGE
Supporting Texts & UI Elements
The Solution
The final design supported each user group while keeping customer, parcel and delivery information connected.
Outcomes
Post-launch analytics were not available, so the outcomes below describe the operational capabilities delivered rather than measured performance changes.
The final product replaced manual fragmented tasks with a shared operational workflow.
For Customers
Reduced reliance on staff support
Self-service pricing and tracking reduce the need for customers to contact staff for routine information.
For Operational Staffs
Improved visibility across deliveries
A centralized system helps staff monitor parcel progress, driver assignments and delivery records more efficiently.
For Drivers
Faster parcel handling in the field
Barcode scanning reduces manual searching and helps drivers identify the correct parcel quickly.
For Business
More traceable delivery records
Linking drivers, recipients, payments and delivery evidence to each transaction makes disputes easier to investigate and resolve.
Self Reflection
I learned to design around how the business actually works.
When a system involves different user roles, I first need to understand how the business operates and how work moves between people. A decision made for customers can affect drivers and operations staff, so I designed the relationships between their workflows, not just individual screens.
I also learned that not every process should be automated; pricing still requires human judgment because accuracy depends on real parcel measurements and business knowledge.
See Next Project
.