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

Justin Penney

Services

Strategic product design

Growth web design

Connect on LinkedIn