Ben

Syntax Design System

Since January 2023, I've been leading the design direction of the Syntax Design System, a private and specialized system for the localization industry.

Goal
Initially: Rebrand 2 companies into a single one (Memsource acquired Phrase in mid-2022). Later: unify 5+ different products into a single platform — pricing strategy shifted from product-access to volume-based monetization.
Opportunity
Serve customers a consistent product language and reduce design and tech debt.
Problem
Team coming from historically different companies have different ways of working and tech stack.
ChatGPT
LLM and MT are disrupting the slow-moving, decades-old localization industry.
An isometric view of some of the Syntax components — including, among others: tables, datepicker, alert and multi-select

Key Highlights

  • Team: dedicated team of 6 people: 3 designers (team lead, system designer, content designer) and 3 engineers (lead and 2 UI developers)
  • Impact: shaping design language of 11 designers, 20+ teams, 5+ products
  • Technology: built on Vue and Typescript, distributed through npm. Components tested and localized
  • Libraries: multiple Figma libraries: Tokens, Components, Icons, Illustrations and Templates
  • Guidelines: including usage guidelines, Content design, a11y, interaction patterns, data visualization

Components

The design system embraces the atomic design metaphor and leverages composability. Syntax ships atomic elements like button and text input, but also bigger organisms like table and dropdowns.

A Figma instance of the Alert component. The Alert's visual appearance can morph based on context and intended prominency, while maintaining its semantics
Playground mode of the tooltip component in Figma. Props are displayed conditionally, leveraging progressive disclosure
Openly sharing WIP explorations help starting conversations with different stakeholders

Syntax design system doesn't ship just components, but also high level interaction patterns. This helps ensuring a consistent design languages across products in our platform.

We use different data visualization palettes based on the relationship with the data: categorical, ordinal, and divergent
Form guidelines include reccomendations about accessibility, writing guidelines, which component to use and validation strategy

Documentation

From my own mistakes, I learned that unclear documentation hinders design system adoption. To address this, I actively maintain a dedicated design system documentation website that collects resources such as Figma components, changelog, content guidelines, and demos.The documentation website is available for internal use only, can't share the link, sorry :(

A screenshot of the dropdown component. The component is a preset grouping multiple list items and distributing UI conventions like max-height, search, sections, footer, etc. The preset help designers quickly generate dropdowns (a notoriously tedious job)
Screenshot from Storybook: the Docs page acts as an overview of the component capabilities and implementation details
Demonstration of the keyboard navigation in a multi-select dropdown. Live demo are included in every component.

Stakeholder Management

As a design system designer, a big part of my job is helping people stay updated with our ever-evolving design system. This involves sharing updates and meeting people where they are:

  • regular sync updates: showoff and Q&A sessions — separate sessions for designer and developers
  • regular async updates: announcements for minor releases once every two weeks; major releases every quarter
  • ad-hoc communications: noteworthy updates shared via Slack
  • tracking customer satisfaction: bi-annual satisfaction surveys and monthly adoption metrics
A screenshot from #design-system Slack channel announcing tooltip component improvements
Every 2 weeks we release a minor npm version; every 3 months a major release (including breaking changes)
Presenting ideas about the datepicker component to the design team during our weekly design crit
We also have a weekly slot for announcing updates and discussing best practices. As you can see by stamps, the design team is very enthusiasticic about DS updates
A FigJam screenshot about the results from our bi-annual internal survey about design system satisfaction

Challenges

  • Collecting feedback from a non-engaged audience
  • Adjusting strategy when resources & priorities are constantly shifting
  • Balancing components discoverability / capabilities
  • Shipping localization-proof components

What I learned

  • Share early, share often
  • Optimize for review
  • Ask developers
  • Have fun!
Group photo from a team activity after our roadmap meetup

Want more case studies?!

← Interaction, UI
Research →