Justin's Portfolio

Work

About

Resumés

Contact

Work

About

Resumés

Contact

284

WCAG standards analyzed

2

Core flows re-imagined

2

Language regions (FR + EN)

Localization (FR + EN)

Consistency through systems, redesign of user flows.

EdTech

X2O Media's OneRoom is a hybrid meeting product combining in-person rooms with remote meetings. The hardware was universally acclaimed, but the software's poor usability was the main driver of churn. Clients reported enjoying the hardware setup but using either Teams or Zoom instead of the native software. The product was locked out of certain markets due having been built without accessibility in mind.

I led the establishment of an accessibility-first design system to improve usability and reduce user support calls. Working closely with the Product Manager, I redesigned two key user flows using the new component library.

Consistency through systems, redesign of user flows.

EdTech

Team

Senior UI /UX /Product Designer (me), PM, PO, FE Architect

Platforms

Web / Android / iOS

Tools

Figma, Storybook, Jira

Outcomes

Refined user flows

Design system (Figma + Storybook)

WCAG protocol

Challenge:

The product needed to run on any platform, and fully accessible.

the product had known usability pain points,with most users choosing to use the physical room with Teams or Zoom, instead of our software. Joining a meeting required a user to click through several menus before arriving at a list of meetings. If the user clicked on a meeting that wasn't in-progress, they ended up stuck. Additionally, the UI was not accessible and the company couldn't sell to any client that received government fiunding, including schools and the military. This meant that negative word-of-mouth was present with existing clients, and several interested organizations couldn't complete the RFI due to the lack of accessibility documents.

Goals:

Consistency through systems, reduced service calls.

To address these challenges, i aimed to provide recognizable UI elements and familiar flows that users would understand having used other videoconferencing software. This involved mapping the user flows of competitors, as well as collaborating closely with the Product Owner and Engineering team to be mindful of tech debt when proposing solutions. Specifically I:

Mapped the join flow of Jitsi, Teams, Meet (Google), and Zoom.
Used Material Design 3 and iOS Design guidelines to create a UI component library.
Worked with the FE architect to ensure components were consistent between Figma and StoryBook.

Mapped the join flow of Jitsi, Teams, Meet (Google), and Zoom.
Used Material Design 3 and iOS Design guidelines to create a UI component library.
Worked with the FE architect to ensure components were consistent between Figma and StoryBook.

Mapped the join flow of Jitsi, Teams, Meet (Google), and Zoom.
Used Material Design 3 and iOS Design guidelines to create a UI component library.
Worked with the FE architect to ensure components were consistent between Figma and StoryBook.

Solutions:

Storybook UI library, Live prototypes for Tradeshows, Customer acclaim.

Through stakeholder workshops, secondary research, and iterative design, I created a refined and distilled user flow for joining meetings. The live prototype was shown at trade shows and got the feedback "It's just like Teams, I don't need any training". Working with Product and the FE architect, I created the accessibility protocol to empower us to test for and comply with WCAG 2.1 AA. Working with the FE architect, I assisted the ctreation of a consistent StoryBook component library for both light and dark mode.

As a result, Sales Teams were empowered to make several deals, including one with the UN in South Africa.

Design highlights:

Secondary research, updated join meeting flow

Best practices of competition

For this section, I analyzed the join flows of Microsoft Teams, Google Meet, Jitsi, and Zoom.
There were some differences I had to be mindful of due to our in-person experience, but most of the efficiency users had come to experience in other products just made sense.
I proposed the flow (bottom, in green) and got engineering and product buy-in, sometimes using the PM as the host or participant in the research!

Style guide:

Button 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).

Updating the UI: from engineering POC to intuitive

Putting the Design system to work:

For these screens, I simplified look and feel for the meeting join process, decreasing cognitive load on the user and adding clarity.
I removed the red background and replaced it with more design system, accessabilty-first styling, because at first glance users thought there was an error.
The protoype version of the full flow was presented at trade shows and got widespread positive feedback.

Reflections:

This project drove home to me how important it is to make everyday user flows simple and intuitive. X2O had grown their product by adding features, until the lack of coherence had crippled their business. Much of the delay in implementing these proposed changes were due to technical debt and a limited developer team size.

My main mandate at X2O was to create a simplified, intuitive experience; and the task of creating a component library taught me how important consistency is. When the Sales Team flatly refused to give the product team access to clients for user testing, I quickly pivoted to secondary research and leveraging well-established best practices. I learned that between the WCAG literature and Nielsen Norman group, much of interaction design has robust solutions that can be used.

Although the Product Team was unsuccessful in gaining access to customers, my continued insistence on metrics led to the company adopting PostHog and setting up some in-product measurements which proved helpful in validating our design solutions.

Previous case study

Next case study

Justin Penney

ADP List mentor

Services

Strategic product design