sgy-backpack-ds@2x.png

Backpack Design System

Schoology Backpack Design System

Like any startup in its growth stage, Schoology had started to suffer from some growing pains. With a growing base of clients, each with their own product requests, there was an emphasis on quickly building new features for both the K-12 (Kindergarten to 12th Grade)and higher education markets. The product development process started to become a bottleneck, as we tried to maintain an outdated system while building new features.

Backpack-1.png

There was no repeatable Design System in place, which added time to feature development and created unnecessary inconsistencies and complexities in the product. The design felt both dated and inconsistent. Schoology, which was once was at the forefront of design in education tools, was losing ground to its competitors.

The endeavor was two-faced. We needed to implement a new Design System that would save us development time, would reduce customer churn and increase the number of new customers.

Backpack-3.png

I was tasked to build and take ownership of Schoology’s Design System, Backpack. This included creating new UI components, refreshing outdated designs, and evangelising its use across the organization. My work brought consistency in visual design across our entire product suite, improved engineering efficiency, updated and modernized the look and feel of the brand.

The Challenge

  • Accessibility guidelines were not being met in many features.

  • Inconsistent layout between products and features.

  • An outdated visual language that was contributing to a decline in brand credibility.

  • Duplicated components with different implementations. For example we used three different drop down lists from different libraries.

  • Variations of styles of the same components in different feature areas (e.g. tool tips).

The Opportunity

  • Simplify cross-browser/device, performance, and accessibility testing and allow teams to launch higher-quality work faster.

  • Develop a responsive framework to simplify the presentation of information across form factors, providing a continued, cohesive experience independently of the platform.

  • Consistency and cohesion across the entire experience.

  • Decrease time to deliver new products.

  • Establish a more collaborative workflow between all disciplines involved in the creation of the process.

  • Establish a shared vocabulary within Schoology, including any outside vendors.

What We Accomplished

  • Increased design velocity by 20%.

  • Decreased cross-browser/device, performance,
    and accessibility testing time by 50%.

  • Improved the lead time across development
    teams by 20%.

  • Achieved full ADA compliance.

  • Decreased UI defects by +30%.

In addition to the Backpack Design System components, we created a style guide website for all our internal and external stakeholders.

Backpack-ds.png