Accessibility integrated into an on-brand EdTech design system

Transforming a SaaS EdTech system, bringing consistency, Improved Wayfinding, Auditability, Accessibility, and integrating usage analytics while decreasing support call volumes and the cost to build new feature enhancements.

Product example:

A Lenovo Every-Screen Classroom Lesson-Orchestration Product

Company:

Lenovo

#WCAG #accessibility #Analytics #USER #designsystem #UX #uiux #SaaS #FRONT-ENDdevelopment #SIS #LMS #DEVELOPMENT #Compontents #edtech #customeradoption #studentoutcomes #googleclassroom #clever #pendo

An example of inconsistent button placement and a description which illustrates why this is a challenge for end-users.
Screenshot from LSA_Prior to Usability Enhancements. The image includes the classroom setup screen with button and selection placement which confuses customers

The Product and its State

I was new to the team and there were clear signs that optimization was needed.  The product had several red flags and theories were raised.  My approach was  to hit the ground running.  Many questions were asked.  Customer support and training calls were attended.

 

Gaining an understanding of the history was important.

FINDINGS

  • The software was not compliant with accessibility standards.  Prior to my time on the product, WCAG was attempted.  The strategy used was a, “Drop everything and focus” approach, which left a bad taste in everyone’s mouth.  This strategy was costly, as it halted product enhancement.  

  • The product had many confusing and inconsistent patterns.  End-users had to pay close attention or they might be ‘tricked’ into clicking things they did not intend to.
  • Rebranding had occurred 3 times in the past, clearly visible, as many fragments of prior branding remained in-product.
  • The only usage data available to understand utilization and traffic was from server activity – no analytics integrations had been established.
  • Onboarding tool (Mixpanel) was partly integrated, costing the team heavy-lifting on design and front-end development efforts.
  • There were school IT administrators who needed direct 1:1 help with integrations which ought to be self-service.
  • The most crucial barrier-to-entry generated > 30% of weekly support calls.
  • Per-account adoption was < 20% 
    (a huge concern very few were talking about internally!)
Our North-Star, plus samples of documentation
Examples of design system components
Before and After - a view of the same screen and how it transformed with the design system's components

Approach, Implementation, and Results

The team and I collaborated closely with our engineering team, marketing, customer success, and our customers and this resulted in a design system which empowered features of the future with flexibility.

Outcomes

The software gained compliance for WCAG AA and Section 508.


THE ROLLOUT STRATEGY:

  • The approach taken included strategic roll-outs, starting with ‘the next feature’ – the elements first – buttons, typography, and data grids.
  • Each feature which included ‘something new’ incrementally building out the next elements to be added to the design system.
  • ARIA labels were incorporated as each area was built out.
  • Colors were ‘nearest neighbors’ to the brand’s new, bold, inviting colors, while enabling color contracts to pass WCAG AA standards.

Unique IDs embedded as part of the implementation, enabling a flexible way for analytics and walkthrough tool integration.

 

USES:

  • Usage data begins to flow in, enabling feature strategy conversations to be grounded in real end-user data
  • Easily configurable walk-throughs implemented
  • In-product user participation signups
  • User-Initiated Help Menu Introduced
  • No-Dev-Time needed for walkthroughs and insights-gathering, unlike the old system which took engineering time for every update

Additional Outcomes

  • Per-Account Adoption Sky-Rockets far beyond expectations.
  • Word of Mouth customers increase.
  • When the design system rolled out to the classroom setup, the customer success call volumes dropped so dramatically, that the manager called up the UX and Front-End team to inform to us they thought there was an issue with their call-center lines and discovered instead something worth celebrating 🎉🎉🎉.
    • They contacted multiple schools – who apologized for not calling sooner.
    • Customers said:
      “THANK YOU! The new classroom setup just makes sense.“

← To Portfolio