Design System Docs

Design System Docs

Design System Docs

A design overhaul for our online UI documentation to optimize for more user types than just developers the content they need, including UX designers, UX content writers, and product managers.

A design overhaul for our online UI documentation to optimize for more user types than just developers the content they need, including UX designers, UX content writers, and product managers.

A design overhaul for our online UI documentation to optimize for more user types than just developers the content they need, including UX designers, UX content writers, and product managers.

Project Type

UI design • tooling

Tags

scalabilty • quality • efficiency

Roles

UI Lead

Association

Design Systems Manager

at

CallRail

in

2022

Summary

Build in 2016, CallRail’s earliest step towards forming a design system was our our online style guide. It was our first time to document and standardize UI patterns, including colors, spacing, typography, buttons, and more. But over time, it became too difficult to keep up-to-date and didn’t offer enough functionality to support our changing needs for documentation. Our engineering team considered switching to a tool like Storybook, but ultimately decided to build a brand new custom documentation site. So we discussed the features we intended to build, and then I set out to design what the new UI would look like. Some key points include a new IA, sidebar navigation, tabbed navigation within the body, and color mode toggles.

Summary

Build in 2016, CallRail’s earliest step towards forming a design system was our our online style guide. It was our first time to document and standardize UI patterns, including colors, spacing, typography, buttons, and more. But over time, it became too difficult to keep up-to-date and didn’t offer enough functionality to support our changing needs for documentation. Our engineering team considered switching to a tool like Storybook, but ultimately decided to build a brand new custom documentation site. So we discussed the features we intended to build, and then I set out to design what the new UI would look like. Some key points include a new IA, sidebar navigation, tabbed navigation within the body, and color mode toggles.

Summary

Build in 2016, CallRail’s earliest step towards forming a design system was our our online style guide. It was our first time to document and standardize UI patterns, including colors, spacing, typography, buttons, and more. But over time, it became too difficult to keep up-to-date and didn’t offer enough functionality to support our changing needs for documentation. Our engineering team considered switching to a tool like Storybook, but ultimately decided to build a brand new custom documentation site. So we discussed the features we intended to build, and then I set out to design what the new UI would look like. Some key points include a new IA, sidebar navigation, tabbed navigation within the body, and color mode toggles.