
X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System

X2O Design System
284
WCAG standards analyzed
2
Flows re-imagined
2
Languages served
X2O Media
CHALLENGE:
A hybrid conferencing product had software with poor usability.
Clients opted to use Zoom and Teams post-purchase because software was too hard to use.
SOLUTIONS:
Design System - A component library based on best practices. Designed for responsive web, light and dark mode were included.
Accessibility - Full audit for VPAT of product
UX / UI design - (NDA-protected) refresh of 2 key user flows.
Fully-interactive prototypes for tradeshows and product demos.
X2O Media
CHALLENGE:
A hybrid conferencing product had software with poor usability.
Clients opted to use Zoom and Teams post-purchase because software was too hard to use.
SOLUTIONS:
Design System - A component library based on best practices. Designed for responsive web, light and dark mode were included.
Accessibility - Full audit for VPAT of product
UX / UI design - (NDA-protected) refresh of 2 key user flows.
Fully-interactive prototypes for tradeshows and product demos.
X2O Media
CHALLENGE:
A hybrid conferencing product had software with poor usability.
Clients opted to use Zoom and Teams post-purchase because software was too hard to use.
SOLUTIONS:
Design System - A component library based on best practices. Designed for responsive web, light and dark mode were included.
Accessibility - Full audit for VPAT of product
UX / UI design - (NDA-protected) refresh of 2 key user flows.
Fully-interactive prototypes for tradeshows and product demos.
Consistency first
Product had inconsistent styling. Worked with FE architect to build Storybook component library.
Consistency first
Product had inconsistent styling. Worked with FE architect to build Storybook component library.
Consistency first
Product had inconsistent styling. Worked with FE architect to build Storybook component library.
Accessibility Leadership
Worked with Product and Engineering to author accessibility protocol.
Accessibility Leadership
Worked with Product and Engineering to author accessibility protocol.
Accessibility Leadership
Worked with Product and Engineering to author accessibility protocol.
Working prototypes
Fully-interactive prototypes of improved UI for stakeholders and Trade Shows
Working prototypes
Fully-interactive prototypes of improved UI for stakeholders and Trade Shows
Working prototypes
Fully-interactive prototypes of improved UI for stakeholders and Trade Shows
Location
Montréal
Industry
Media / Edtech
Services
UX / UI Design
Tools
Figma, Wix
Link:
--
Design system:
Key features
All Components WCAG 2.1 (AA) compliant
Light and Dark mode
Adaptive design
Android behavior for mobile
Focus state for keyboard behavior
All Components WCAG 2.1 (AA) compliant
Light and Dark mode
Adaptive design
Android behavior for mobile
Focus state for keyboard behavior
All Components WCAG 2.1 (AA) compliant
Light and Dark mode
Adaptive design
Android behavior for mobile
Focus state for keyboard behavior

Look and feel:
Visual language
Rounded button edges for approachable tone
Blue and Black theme to assist colorblind users.
Not using color alone, system status messaging combines colors and icons.
Blend of best practices from Material Design3 and iOS guidelines.
Rounded button edges for approachable tone
Blue and Black theme to assist colorblind users.
Not using color alone, system status messaging combines colors and icons.
Blend of best practices from Material Design3 and iOS guidelines.
Rounded button edges for approachable tone
Blue and Black theme to assist colorblind users.
Not using color alone, system status messaging combines colors and icons.
Blend of best practices from Material Design3 and iOS guidelines.

Button guidance:
Style guide instructions
Primary: cta blue conveys a sense of trust, reliability, and familiarity. This color was chosen because of it’s contrast to white (for labels and icons) as well as the commonality with current web experience trends.
Secondary: a derivative of primary, it includes the same coloring as the primary button, but in an outline form. The click behavior inverts the button, for greater user understanding that their command has been received.
Tertiary: the text button. For use with low emphasis actions. When used as a hyperlink, it’s a best practice to have underlined text. When used in a modal as a simple action, underline is not necessary (but use context to determine if the information scent is high enough without it).
Primary: cta blue conveys a sense of trust, reliability, and familiarity. This color was chosen because of it’s contrast to white (for labels and icons) as well as the commonality with current web experience trends.
Secondary: a derivative of primary, it includes the same coloring as the primary button, but in an outline form. The click behavior inverts the button, for greater user understanding that their command has been received.
Tertiary: the text button. For use with low emphasis actions. When used as a hyperlink, it’s a best practice to have underlined text. When used in a modal as a simple action, underline is not necessary (but use context to determine if the information scent is high enough without it).
Primary: cta blue conveys a sense of trust, reliability, and familiarity. This color was chosen because of it’s contrast to white (for labels and icons) as well as the commonality with current web experience trends.
Secondary: a derivative of primary, it includes the same coloring as the primary button, but in an outline form. The click behavior inverts the button, for greater user understanding that their command has been received.
Tertiary: the text button. For use with low emphasis actions. When used as a hyperlink, it’s a best practice to have underlined text. When used in a modal as a simple action, underline is not necessary (but use context to determine if the information scent is high enough without it).

Accessibility Leadership:
VPAT 2.5INT audit results:
WCAG (Web): 56 criteria investigated
ADA Section 508: 101 criteria investigated
EN 301 549: 127 criteria investigated
Focus: visible states for all components
WCAG (Web): 56 criteria investigated
ADA Section 508: 101 criteria investigated
EN 301 549: 127 criteria investigated
Focus: visible states for all components
WCAG (Web): 56 criteria investigated
ADA Section 508: 101 criteria investigated
EN 301 549: 127 criteria investigated
Focus: visible states for all components
UX / UI Work (NDA)
Work highlights:
Defined 3 separate user personas
Responsive design of 2 key user flows
Interactive prototypes for Trade Shows
Defined 3 separate user personas
Responsive design of 2 key user flows
Interactive prototypes for Trade Shows
Defined 3 separate user personas
Responsive design of 2 key user flows
Interactive prototypes for Trade Shows
Justin Penney
Services
Strategic product design
Growth web design