BoG Design System & Library

A uniform BoG brand for designers, bootcampers, and developers to reference as they work on projects with a centralized component library for developers to access.

BoG Design System & Library

About Project

BoG Design System and Library About Screenshot

Currently, there is no uniform BoG brand for designers to reference as they work on projects. Similarly, there is no centralized component library for developers to access. A BoG component library will help expedite and streamline both the design and front-end engineering processes at BoG. BoG hopes to establish usable Design Guidelines for Bits of Good products, build out a re-scalable and robust component library that contains tests, and build out a dedicated BoG Design System page with links to Storybook and Figma, including a user guide with the design guidelines.

Design System

Our Client

undefined

Bits of Good Club

Our Process

Product Scope

Client Goals 🥅

A consistent design system for Bits of Good that can be reused across desktop and mobile projects. The library must be reusable, readable, easily-integrated, and applicable to various products. There will be a reference Figma file featuring corresponding components from Storybook, so designers can quickly mock up low-fi and hi-fi prototypes without having to generate assets from scratch. In tandem, we will create a Storybook for our component library, which would create an easy, accessible location for developers to go to see library components.

End-User Goals ⚽

Bootcampers will be able to learn the fundamentals of component use at BoG. Designers will have easily-accessible Figma sample components, and a standardized design library. Developers will have a standardized component library, be able to easily download the node package with the components, and see the components in a Storybook. Members should be able to easily find and see components to use as a reference for any project.

Technology 💻

A Storybook for our component library, which would create an easy, accessible location for developers to go to see library components.

Design 🖊

A reference Figma file featuring corresponding components from Storybook, so designers can quickly mock up low-fi and hi-fi prototypes without having to generate assets from scratch.

Our Solution

Key Features

Our Team

Reflection 💬

undefined