Smart Web Design System provides +50 experts with the Design & Code framework they need to create engaging experience.

Goals

• Lead the design iterations & extension of Smart Web Design System
• Create design Guidelines that make UI libraries more consistent and easier to scale.
• Ensure new design guidelines would address product team needs and being implemented without impacting their productivity.

Year: 2022

Client: Smart ****

Role: Design system Lead designer

Role & responsibilities

• Planning
• Design governance
• Design Foundation & UI library & Guide
• Define onboarding process
• Stakeholder interviews

Research

Audit & Interviews with product teams

in 2 weeks, we’ve collected feedback from +30 stakeholders (designers, developers, product owners) using Smart’s design system and documentation to understand their goals and motivations.

The problem space

Visual inconsistencies

In years of development, many design assets built by different teams in different styles have been added to the design system .

Opaque communication

due to missing ressources allocated team feedback were often left unanswered leading teams create their own components in order to deliver features in time

Documentation hard to find

Documentation accumulated over time, but asset became hard to find and some element were outdated leading team staying away from it.

Outcomes

In 8 weeks, brand values (colors, font, spacing, …) have been translated in design tokens and UI Library has been revamped and mirrored in Design & Development This brought the following impact:

Efficiency

• Improved visualisation and implementation of design decisions across Smart Web experiences
• Reduced time to implement new brand direction across the UI Library
• 22 components and 17 modules have been revamped to provide accessibility, responsiveness and multi-theming