Design System

Duration

2 weeks ( + continued effort )

Role:

Product Designer

Summary:

We were tasked with developing the core design system for MiView’s project management application suite which caters to home builders and trade companies.

Objectives

Pain Points

  • No formalized design system leading to inconsistent look at feel across all products.

  • No documentation around usage of spacing, colors, typography, components, etc.

  • Low buy in from development with existing design system.

  • Limited understanding of the purpose and benefits of a design system.

Solutions

  • Introduce a new design system built on top of development’s existing library while accommodating business aesthetic desires.

  • Document usage guidelines for each component and common patterns.

  • Educate stakeholders on the importance of a design system and its purpose.

Design System Foundation

  • Design System Structure

    Core Design System: Hosts our core components generic to the product suite (Purpose: Drive consistency across all products)

    Sub Design System: Responsible for one off components or specific implementations of core components (Purpose: enhance design velocity)

  • Styles

    Colors: We use basic colors (primitives) and add semantic names to show their purpose. Our design system also supports theming, so we can easily switch colors for different products.

    Typography: Our design system supports both web and mobile. We use Roboto for all platforms, with defined font sizes for headers, body text, and captions.

    Effects: We standardized drop shadows, gradients, and other visual effects across the design system.

  • Components

    Working with our development team we identified our base set of components for the core design system.

    After defining both teams needs we worked together to ensure they were both feasible for development and verified with business that they met their needs

Outcomes

1. Improved collaboration between designers and developers through shared standards.

2. Increased efficiency and design speed by eliminating the need to recreate common components.

3. Defined a consistent set of components, layouts, and design patterns.

4. Boosted developer adoption, making it easier to implement designs with less complexity.

5. Documented component usage, layouts, and design system contribution guidelines.

Continued

While actively working on product features, I was also responsible for maintaining the design system. To manage the heavy workload, I proactively documented clear contribution guidelines, enabling the entire team to contribute effectively and reducing the dependency on me for updates.

Additional responsibilities included weekly meetings with development to refine and update components based on their feedback and communicating those changes to our stakeholders.

Thank you for reading!