Buildout Design System

My Role:

Project lead

UI/UX Lead Designer

UX Researcher

Tools:

Figma

Timeline:

August 2021 - June 2024 (2 iterations)

Problem

Outdated Style Guide: The existing style guide was obsolete, leading to inconsistencies in design and development. This issue was multifaceted:
a) Incorrect colors: This could lead to brand inconsistency and accessibility issues.
b) Outdated typography: Potentially causing readability problems and inconsistent visual hierarchy.
c) Missing components: Forcing designers and developers to create ad-hoc solutions, leading to inconsistencies.
d) Inconsistent usage: Some developers using it while others didn't, resulting in a fragmented user interface.
e) Lack of update mechanism: No system in place to keep the guide current with evolving design decisions.
Siloed Design Approach: UX designers working on different sections of the app in isolation led to:
a) Inconsistent user experiences across the app.
b) Inefficient design process, with components being recreated from scratch or based on potentially outdated screenshots.
Development Inconsistencies: Developers' practice of copying and pasting components to save time inadvertently propagated errors, leading to compounded inconsistencies throughout the app.

Solution

Creation of a Comprehensive Design System

Rationale for this approach:

Educational Tool: By serving as both a reference and learning resource, the design system ensures all team members understand and can implement the design language consistently.
Efficiency: Allowing designers to drag and drop components and developers to copy and paste pre-built elements significantly reduces design and development time.
Consistency: A single source of truth for all design elements ensures a cohesive user experience across the entire application.
Focus on Complex Problems: By streamlining routine design tasks, UX designers can dedicate more time to solving intricate UX challenges.
Cross-team Alignment: The design system creates a common language between design and development teams, reducing miscommunication and implementation errors.

Process

01. RESEARCH

App Audit: This comprehensive review was crucial to understand the full scope of design inconsistencies and identify all variations of each component.
Component Organization: Categorizing components logically ensures easy navigation of the design system, improving its usability for both designers and developers.
Market Research: Comparing our components with market standards helps ensure our design system is not only internally consistent but also aligns with user expectations set by other modern applications.

02. DESIGN

Component Consolidation and Redesign: This step was critical for several reasons: a) Reduction of redundancy: Fewer, more versatile components are easier to maintain and use.
b) Improved UX: Redesigning with a focus on user experience ensures each component is optimized for its function.
c) Modern UI: Updating the visual design keeps the app looking fresh and competitive.
Design Verification: Redesigning entire pages with the new components serves as a crucial test of the design system's completeness and versatility. It helps identify any gaps or issues in real-world application.

03. Updates

Feedback-driven Iterations: Incorporating feedback from leadership, peers and clients ensures the design system meets real-world needs and expectations. This approach helps balance designer intuition with user reality.
Development Collaboration: Working closely with the development team during implementation ensures the design system is technically feasible and accurately translated into code.
Systematic Implementation: Adding each component individually to every page, while time-consuming, ensures comprehensive updates and catches any potential issues in different contexts.

Conclusion

This process demonstrates a holistic approach to solving design inconsistencies. By creating a living, comprehensive design system, we address not just the symptoms (inconsistent designs) but the root causes (lack of standardization, siloed work, inefficient processes). The emphasis on research, systematic design, and collaborative implementation ensures that the design system is not just a static document, but a dynamic tool that evolves with the product and team needs.

Color Updates

All elements in the design system are now using the new color palette. Adding more variety also helps with color contrasts to make it easier to organize and for users to see, accessibility wise. For example, it is easier to see dark text over a lighter background.

Typography Hierarchy

The entire app was audited to find as many text sizes and weights as possible. Out of the findings, decisions were made to keep and remove certain styling. Header styles were added to created to provide hierarchy for all types of experiences for designers to use. Text line heights have also been updated to match the 4pt scale.

Table Design

Before the design system, Buildout had 7 different table styles. For consistency, 2 table styles were chosen. Tables with a gray header background are used for large amounts of information and will use the whole width of the page. Tables with a white header background are used for smaller amounts in information and placed on a white background.