Quick Base Design System

Opportunity: Create consistency throughout the Quick Base platform by creating a new design system that cascades throughout the product (all touch points) while adhering to new brand guidelines. 

Solution: Design components using design principles set forth by our Experience Design team. The new Design System was also to be accompanied by a shared Sketch library of commonly used UI elements. Our hypothesis was that consumption of the design system by user experience and engineering teams would speed up design and development cycle time, while also creating a consistent experience across all product touch points. It would omit the redundancy that often occurs between scrum teams.

Risks: 1 - Product features were being built at the same time as the coordinated effort to build out the design language 2 - New corporate branding could heavily influence various areas of the product

Timeline: Because a design system is a constantly evolving framework, we intentionally did not set a timeline for ourselves after the initial heavy lifting was complete.

Role: This was an internal project that brought together 1 part time Developer, 1 part time Interaction Designer, and myself-the Visual Designer.

Biggest challenges: We were faced with challenges at just about every stage of the project. It started with allocation. We were a cross functional team of three, working only 50% of our time on this. It felt slow at times due to stake holder buy in (even though it was clear that this initiative was extremely valuable) and customer facing work always took priority. One lesson learned early on was to always over communicate. We found that when teammates and consumers of the design system knew what our goals were and the progress being made along the way-they were more likely to adopt what was being built.

Guiding PRINCIPLES

The team generated these four guiding principles. Designs were aligned and measured against these pillars with the intent of bringing consistency to the platform.

HAND DRAWN SKETCHES

Just one example of conceptualizing a component.

foundational elements

Color, type, and iconography - the foundational elements that were used as core building blocks.

coming together

Components working together in harmony.

Before

Prior to embarking on a design system, our team had assets in well over 7 places. Not only was it time consuming and challenging to find a specific asset, feature, or component, there wasn’t a source of true.

after

We created an internal library (using Storybook) that was easily accessible by both the Experience Design and Engineering teams, where components and assets could be consumed - one source of truth.