Enhance parser discovery for smoother developer onboarding

Enhance parser discovery for smoother developer onboarding

Configuration Templates Cover
Configuration Templates Cover

When using Specify for the first time, users must to find the appropriate parsers while building their configuration to match their company standards while extracting design tokens.

Ultimately, chosen parsers should allow them to change the case (kebab, camel, snake, or pascal), transform color codes (HEX, HSL, HSB, LCH, Lab) and font parameters (px, rem, em), create different formats for fonts (otf, woff, woff2), and optimize assets before putting them in the correct folder.

Company

Specify

Period

May to June 2022

Space

Design Operations

Platforms

Web

Key Deliverables

Mockups, Prototypes, Animations, Code

+ 13,6%

average weekly new users

+ 14,7%

monthly usage of parsers

Opportunities

Here are the main opportunities we detected where the ratio reward/risk was balanced enough for this feature to be interesting for us to work on.

Improve activation

This feature was about helping developers get their job done and reach their Aha moment as fast as possible in their journey with Specify. We wanted to ease the discoverability of our Design API and its core concepts — configuration files, rules, and parsers.

Design work

How we managed to build this feature and achieved these results

Shaping

We identified three ways in which engineers can consume configuration templates:

  • From a public store: template gallery with details page with an output demo. Visitors will be able to copy/paste the configuration.

  • From our platform: when creating a new destination for a GitHub repository to distribute design tokens and assets.

  • From the command line interface: when engineers are starting a new project from scratch and need to use their design system.

We started with the public store, as one of our goals was also to improve our rank on search engines when users are looking to make design tokens working with SASS, CSS, Tailwind, etc.

Through trends and our top-used parsers analysis, we identified the top 5 most requested configuration templates on which we should prioritize our efforts:

  1. CSS Custom Properties

  2. SASS Variables

  3. Style Dictionary for iOS & Android

  4. Tailwind CSS

  5. React & React Native

Building

Sketches

While back-end developers were in charge of creating these configuration templates, I worked on the information architecture & layout of this project.

A dedicated gallery showcasing configuration templates and providing helpful content through Q&A, related articles, and our Design Data Platforms 101 Guide.

A details page for each config template lists parsers used, design tokens handled, config files with output preview, and additional resources.

Configuration Templates Sketches


Final design

Then I worked on the final design, with light and dark themes and our three responsive breakpoints in mind, and spent some time exploring an animation for our gallery.

Configuration Templates Final design


Hero

I ended up with this file card effect, reminiscent of a file cabinet drawer. I created it using Figma Variants and Interactive Components, the process is detailed here, and then I decided to code it to make sure it was possible. Codepen is available here. Then Nathanaël, one of our front-end engineers, optimized it and added it to production.


Prioritization

I also provided must-have, should-have, and nice-to-have versions with dedicated specs to help front-end developers deliver as regularly as possible through this 4-week cycle (1 week dedicated to shaping, 3 weeks devoted to building).

Configuration Templates Prioritization


Components

I added and updated components within a dedicated page inside the Figma file.

Configuration Templates Distribution 1

Distribution

We re-formed our magical duo with Thibaut, 3D + Motion Designer @ Specify, to work on a short video to promote this new feature on Twitter, LinkedIn, and YouTube.

Through a 1-hour workshop, we created a storyboard and gathered visual references. I also designed high-fidelity visuals for Thibaut to help him save time.

Configuration Templates Distribution 2

See it live

Want to check out the final result? Here you go:

Outcomes

Key results we got a month after the release

+ 13,6%

average weekly new users

+ 14,7%

monthly usage of parsers

Credits

Thanks to this incredible team we exceeded expectations, S/O to them

Product Management

Maud Miguet

Design

Yann-Edern Gillet

3D + Motion

Thibaut Crepelle

Copywriting

Louis Chenais

Implementation

Allan Michay Nathanaël Labreuil

API & Infrastructure

Nicolas André

Read other case studies

Learn more about my work with this selection:

Updates, inspirations and thoughts.

Subscribe to my newsletter

Subscribe

Yann-Edern Gillet

Software Designer, Linear
Framer Awards Site of the Year 2022

Thunderstorm

© 2024 Yann-Edern Gillet

·

Updates, inspirations and thoughts.

Subscribe to my newsletter

Subscribe

Yann-Edern Gillet

Software Designer, Linear
Framer Awards Site of the Year 2022

Thunderstorm

© 2024 Yann-Edern Gillet

·

Updates, inspirations and thoughts.

Subscribe to my newsletter

Subscribe

Yann-Edern Gillet

Software Designer, Linear
Framer Awards Site of the Year 2022

Thunderstorm

© 2024 Yann-Edern Gillet

·

Updates, inspirations and thoughts.

Subscribe to my newsletter

Subscribe

Yann-Edern Gillet

Software Designer, Linear
Framer Awards Site of the Year 2022

© 2024 Yann-Edern Gillet