Background
Documentation that developers actually use
The K12 Style Guide was the brainchild of UX Manager Alex Bussa; the goal was to document our design patterns in a way that was genuinely useful for developers and that represented the quality and craft of the UX team's work. Built on WordPress, the site was collaborative, easy to update, and easy to navigate.
WordPress · CMS
Design System · Patterns
Icon Font · Custom Icons
Usability Testing · Docs
Zeplin · Dev Specs
Contributions
Patterns, icons, and testing results
My major contributions to the style guide included:
- Default content theme patterns for Realize Reader
- K12 icon asset retention, creation, and font management (updated regularly)
- Documentation of usability testing sessions shared across multidisciplinary groups
Color, typography, icon font, component patterns, and usability testing documentation
Impact
A single source of truth
The style guide served as the canonical home for all design deliverables that development could reference at any time. It housed our proven concepts, kept patterns consistent across products, and helped communicate the value of UX practice to the broader organization.
Even as the team transitioned toward more efficient annotation tools like Zeplin, the style guide remained the source of truth for foundational patterns and tested concepts.
The site also housed detailed usability testing results that were spread across multidisciplinary groups, helping the whole org understand what UX actually does.
Learnings
What I learned
- 1Design systems are living products. Maintaining the icon font and patterns required ongoing effort, not just an initial build.
- 2Documentation is a design artifact too. A style guide that developers don't use is worthless; usefulness has to be designed in from the start.
- 3Sharing research broadly builds organizational empathy for users. The testing documentation in the guide helped non-designers understand why UX decisions were made.