DESIGN SYSTEM Creation

Identifying the Problem

Across BoxCast’s end-user web application, iOS app, marketing website, and backend interface for support staff, components were being consistently created and inconsistently used. This was leading to duplicative work as developers and designers both made new styles for buttons, progress bars, and more to fit whatever unique scenario they were working on. Components would variably adhere to the company’s brand guidelines, a problem that was exacerbated when BoxCast began rolling out a new visual brand. With components of the same type in different styles and using different brands the ability for users to quickly interpret and navigate the interface was beginning to suffer.

Designing the Solution

In order to address the inconsistent design and loss in productivity Brandon collaborated with the other members of the product team to establish a design system. Brandon began designing standardized components, color guides, and type styles that could be used across the UX team’s design software, with an eye towards WCAG’s AA Accessibility standards. At the same time developers on the team built the components out in a code repository. Through in-depth coordination the team began documenting how to use each component and where other team members could grab those design files or code. As new functionality was introduced to the product, old code was updated and the marketing website got completely redesigned, the design system was able to enter use across every product team at BoxCast.