Full Scale UI Design System For Blockchain Social Platform

Project Type: Interface Design

Client: Calaxy

Location: Los Angeles

Deliverables: Figma Design System

Stack: Figma, Protopie, Storybook (Vue)

The Calaxy Design System is a full scale, version controlled, production-grade design system built in Figma with an inventory of 1,943 components as of Calaxy App v1.7. The design system is home to 3 primary component types:

UI Foundation (eg. Text, Buttons, Color, Input Fields)

UI Modules (eg. Social Feed, Lists, Nav Bar)

Assets (eg. Graphics, Badges, Background Images)

The system is architected using Brad Frost's Atomic Design Methodology, which breaks UIs into fundamental, reusable building blocks, starting with atoms (basic elements like buttons, icons, fonts — what I refer to as the "UI Foundation") that combine into molecules (functional groups like a social feed item - what I refer to as "Modules" in this system).

After building and managing this system with my lead technical designer for over 2 years, I can confidently say it leaves no stone unturned. It is a tour de force that articulates UI designs with pixel-perfect precision and serves as the critical backbone to Calaxy's small, nimble, elite product team.

The Calaxy app platform is a Progressive Web App built in vue.js (front end) comprised of 12 foundational product domains powering 112+ discreet functions made up of more than 282 user journeys across 2,000 individual app views. Driving design continuity across this much app surface area is an immense challenge.

I worked closely with my technical design lead to develop a UX design workflow that sought to maximize the proportion of existing DS components while minimizing the introduction of net new components with each successive design sprint. This approach helps actively avoid system bloat and the accumulation of technical debt. The design workflow contained both a "creative pass" completed by me, and a "technical pass" completed by my technical design lead.

The creative pass allowed me to rapidly design and test new features in high fidelity without worrying too much about technical constraints or engineering-handoff readiness. Given Calaxy is a product operating in a frontier domain (blockchain), this creative stage enabled me to experiment with + rapidly develop novel crypto-native design paradigms (like texting crypto and NFT gaslessly, without needing to copy/paste wallet addresses).

Once the creative pass was complete, the technical pass would tidy up the files, name layers, create new component inventory when needed, and markup the file with interaction notes that would be included in the engineering handoff. This approach enabled the Calaxy design team to operate at a design to engineering headcount ratio of 1:7 with lots of room to spare.

A world class design system should not only maintain continuity within the design team, but also massively reduce or eliminate interpretive ambiguity during development. In the early versions of the design system, we were achieving about 75% implementation accuracy in vue.js, requiring an average of 3 design feedback loops on staging environments before shipping a feature to production.

Most of the disconnect was in the fine details, often leaving front end developers with the need to make on-the-fly design decisions which led to discontinuity (gaps) between the figma designs and implemented front end code. I wanted to get that implementation accuracy number as close to 100% as possible to reduce the number of feedback loops per sprint and with it, overall ship time.

To accomplish this, I worked closely with my technical design lead, and Calaxy front-end engineers to map the Figma design system in Storybook, which allowed us to achieve "pixel perfect" vue.js components in an isolated environment. This resulted in a dramatic reduction in feeback loops, and transformed the front end development process to a modular "lego block" implementation flow. All told, we reduced overall cycle ship times by 30%, with near 100% vue.js implementation accuracy.