Design System
Year: 2019

SchoolMint Product Style Guide

During my time with SchoolMint, I created a library of reusable user interface components used in different parts of the product. This resource is created for documentation and to maintain consistency of the product visual language and UX patterns. Content adjusted for confidentiality.

Goal

The purpose of this internal resource is to refine & educate the user interface and experience of the SchoolMint product. We want to apply consistency throughout the application. This document has application examples available for reference. This includes a clear definition of color palette, web typography, branding, and a component library.

Approach

This was an extensive project that required consistent documentation and updates to keep up with new product features. I was the sole designer in the company. There were three parts to my thinking about this. The first approach was to audit all of the current and past feature design mockups and take inventory of UI designs broken up by individual components as much as possible. The second was to do a competitive analysis of other design systems, style guides, UI libraries, etc. The final and important piece is to have compliance with the web content accessibility guideline (WCAG 2.0) Level AA.

Accessibility

Many of the school customers asks us if we are ADA compliant for our websites. I’ve been leading SchoolMint’s accessibility effort. The goal is to conform with WCAG 2.0 Level AA guidelines so that we are both ADA and Section 508 compliant. The parent experience is designed with WCAG 2.0 Level AA in mind to ensure that all families have equitable access to schools’ outreach, marketing, and enrollment activities.

Some of the criteria from the guidelines are:

  • Use text instead of images of text
  • Site is keyboard accessible
  • Elements have focus state
  • All form inputs have explicit labels
  • All relevant images use an <img> tag
  • All images have <alt> attributes
  • Use the same components as much as possible
  • User should know where they are at all time
  • Text to Background has sufficient color contrast ratio

What is accessibility and why is it important?

Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.