Overview

As the team is growing, it becomes increasingly important to maintain a consistent style and visual language across all areas of the product within several designers. We needed more systematic libraries to guide and leverage our collective efforts.

The initial outcome was to have a collection of reusable components, guided by clear principles, that can be combined together to create from simple to complex experiences, as needed.

Role, Duration & Environment

  • Lead Designer, Organizer
  • 2 months
  • Agile & Scrum – 2Weeks Sprint
UI/UX DesignDesign LeadVisual DesignUX ResearchInformation Architecture

Problems / Prior to the Design System

Need to persuade PO for 6 months to build the design system, finally see the value of reusable elements.

  • Slow design and development – Keep rising same Design/Development conflicts
  • Inconsistency – Different versions of same UI function
  • Getting everyone on same page about design direction and interaction
  • Developing a page takes too long (what we can do as a designer to help developers)

Goal / for the Design System

Maxiumize team’s productivity, minimize confusion and accelerate the developement and design velocity.

  • Unify agreement between team
  • Consistency Design – Minimize learning curve to digest all of contents and UI
  • Increase productivity by reusable components

Strategy

  • Outline of Design System – decide the component depending on priorities
  • Discovery – review all assets(aspects) of the product and list out all important components
  • Developer Agreement and Feedback
  • Clustering/Grouping – Buttons, filters, progress indicator
  • Market Research – what other team and company is practicing, and what is the best practice?

Solution

  • Abstract | Version control – cloud-based platform where all of the designers can have the same access level. So any designer can support developers anytime.
  • Synchronization Sketch & Abstract – Sketch file with symbols and template
  • Agreement/Solutioning with Developers = Sass – variable name / React native, Rem instead of Pixels
  • Create the variety of components, templates and UI library
  • Clear guidelines for interaction / tooltip behaviors on Data visualization
  • Atomic Design Approach – Atoms / Molecule / Organism / Template / Pages

Results

  • Clear principle and guideline to follow for designers and developers ⇒ Less meeting time & confusion
  • Less time for onboarding training ⇒ Any designer can take over the ownership easily
  • Globalization = Global components – Consistency and unified designs throughout different platforms
  • Sketch + Abstract + Zeplin = Integrations : these applications help us stay in the latest update and version
  • Faster Conceptations – Wireframe ⇒ Low-fi
Back to Datalab