Design System for Electrifai

Project Overview

I was one of the first designers at Electrifai and prior to that, a design team or design mentality didn't exist. As the ElectrifAi team and it's product line grew it became increasingly essential to maintain a consistent design language across all platforms. With more than half a dozen products a design system was required to optimize collaboration amongst designer and developers, to save time, and to create a consistent development workflow.

Outcome

The key outcome for the team was to create a reusable component library based on standards, design best practices, and business requirements that can be assembled together to build any number of applications.

Compnay

Electrifai

My Role

Team of 3 designers and 3 developers

Timeline

Jan 2020 - Present

Outcome

Reusable Component Library

Challenges

Building a design system requires a great team effort and patience. It is an investment that will pay off in the future and that makes it very challenging to gather allies. It was the same in our company! We ended up creating documents for our management presenting the importance of having a Design System, its ROI, and the fact that it could save resources in the future.

After getting approval from the management team, we started by going over all of the products, identifying common components, spot current gaps, and learn from available design systems out there. 

RESEARCH

Gap Analysis

To identify the personas and to understand the current process and user's pain points I set up and run 10 user interviews across multiple personas and roles in a farm including farm owner, diary manager, and animal welfare expert.

Study Best Design Systems

To identify the personas and to understand the current process and user's pain points I set up and run 10 user interviews across multiple personas and roles in a farm including farm owner, diary manager, and animal welfare expert.

Category of Components

Navigation Bar & Filter bar

  • Logo

  • Pill

  • Top Navigation: variations

  • Page Header (panel)Filter Resume

  • Filter Composer

  • Nav icon-buttons

  • User Profile (drawer with details)

Form Fields & Misc. Content

  • Button: Primary, Secondary, Small, Icon-button, Colored Buttons, Link-button, Action-button (icon+label)

  • Drop-down button: regular, inline, split; icon

  • Sectional Buttons

  • Slider

Cards 

  • Cards: Big Number (full, half, third, quarter)

  • Card Wrappers: full, half, third, quarter; quotation

  • Card Header:

  • Card Body:

  • Drawers: top, bottom, left, right + different width

  • Progress bar

  • Table: variations (AG-grid driven)

  • Table content: trend, specific indications, progress-bar indications,

Repeaters & Wrappers

  • Accordion

  • Carousel

  • Lists: radio-group, checkbox-group

  • Page component as a global wrapper: bkg

  • Footer

  • Pagination

  • Scrollbar(s)

  • Tab(s), Tab area

  • Tooltip

Style Guide

Grid

here I can put some images from our current products before using the design system and brand guideline

Typeface

here I can put some images from our current products before using the design system and brand guideline

Icons

here I can put some images from our current products before using the design system and brand guideline

Buttons

here I can put some images from our current products before using the design system and brand guideline

Form Elements

here I can put some images from our current products before using the design system and brand guideline