Celtra Design System
Context
Company: Celtra
Timeframe: 2018 - 2019
Role: VP of Product
With the company's fast growth and an influx of new features, the platform quickly outgrew its original design. Some new projects had to be built with legacy UI components for pragmatic reasons; on others, the team was innovating with new visual languages.
Furthermore, the three main parts of the platform were built using different front-end technologies, which prevented us from using the same UI components across the board. We were accumulating technical debt and losing grip on user experience, yet we couldn't afford to stop and consolidate because business circumstances dictated new features over tooling.
Mission
The opportunity finally arose when engineering got the approval for rewriting the platform's core with Vue.js. I partnered up with engineering leads responsible for the overhaul and devised a strategy for finally consolidating visual language and user experience with a design system.
Contributions
- Architecting optimal workflow stack by evaluating 20+ design tools.
- Analyzed leading design systems to establish best practices.
- Designed the foundation of the component library with version control.
- Oversaw design of all ongoing roadmap projects to prevent UI divergence during 18-month rollout.
- Supported development teams with implementation until the style guide was established.
Results
Stats not available due to my departure before the v1.0 release
Highlights
Stack research and testing
Our objective was to achieve a lean production workflow, ensure long-term interoperability, and be rational with licensing costs.
| Design | Version control | Prototyping and animation | Handover | Icons | Style guide |
|---|---|---|---|---|---|
| • Sketch • Framer X • Figma • InVision Studio • Adobe XD |
• InVision DSM • Abstract • Plant |
• Framer • Principle • Marvel • Flinto • Origami Studio • LottieFiles • Kite Composer |
• Sketch Cloud • Zeplin • InVision Inspect |
• Nucleo • Streamline • FontAwesome • Noun Project |
• VUEDS • Fractal • Catalog • Patternplate • Bit • zeroheight |
We were bullish on Framer X’s vision of designing with live codebase components. Unfortunately, it was incompatible with our Vue.js stack. InVision's Studio was fresh in beta, buggy, and its import of Sketch files was unreliable. Figma seemed promising; however, at the time it had limited features for managing component libraries, no desktop app, and requiring the entire team to learn a new tool would be a hard sell.
We decided on the combination of Sketch, Abstract, and Principle. It was a safe, immediate bet that would enable us to easily port to Framer, InVision, or Figma in the future if necessary.
Architecture
Studying the leading design systems such as Google’s Material Design, IBM’s Carbon, Airbnb’s DLS, Shopify’s Polaris, Atlassian Design System, etc., and their implementations allowed us to quickly learn from the best and avoid rookie mistakes.
The ambition was to eventually achieve a system that relied on code as the single source of truth by using Airbnb’s React Sketch.app for generating Sketch components and VUEDS for generating documentation.
Meanwhile, we found the Overrideit Sketch plugin to alleviate the pain of finding components within the dropdown menus and a clever hack for auto-resizeable button symbols [pre auto-layout].
Form vs. function
The biggest initial challenge was finding consensus on diverging views between aesthetics, functional requirements, and simplicity. It took several months of incremental progress and stress-testing (with more than 10 shades of blue) to arrive at a solution that ticked off all the boxes.
We opted for the underline form elements style to simplify UI by reducing the number of nested rectangles and borders. As a B2B product with technically savvy users, we could afford trading a thin layer of clarity on individual parts for an improved clarity of the whole.
Luminosity and contrast
Another area of having to find optimal balance was tweaking the text and semantic color values to meet WCAG AAA requirements, while for decorative colors and backgrounds, the AA rating was sufficient.
Type system
To support our customers globally, we required the UTF-8 charset. A custom webfont in at least three font weights would translate to a significant payload. Using the OS’s native type family was an obvious choice to get premium typography and full accessibility while staying within the performance budget.
Scale
To achieve clear visual hierarchy and optimize the user experience for the entire spectrum of devices (from 27" external displays to smartphones), we would need every UI element in three sizes: condensed, normal, and fat.
Iconography
Components
Data-driven design
We often run into dilemmas where accommodating a wide range of edge case scenarios would require big trade-offs. By analyzing live data (e.g., quantity of list items, length of titles, time ranges, frequencies, etc.), we were able to optimize UI decisions for realistic value ranges.
Implementation and rollout strategy
The operational constraint of developing a design system while simultaneously using it in production was incredibly challenging but proved extremely effective. It expedited our learning about the platform's intricacies, enabled us to stress-test elements before rolling out the entire system, and prevented us from creating design fiction. Within the next year and a half, we meticulously directed all roadmap projects to ensure all ongoing projects were using the correct components and were aligned with the platform redesign big picture.
Credits
Design: A. Venta, A. R. Urankar, G. Furcolo
Engineering: U. Pirnat, M. Tribušon