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.
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.
How we managed to build this feature and achieved these results
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:
CSS Custom Properties
Style Dictionary for iOS & Android
React & React Native
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.
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.
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.
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).
I added and updated components within a dedicated page inside the Figma file.
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.
See it live
Want to check out the final result? Here you go:
Key results we got a month after the release
average weekly new users
monthly usage of parsers
Thanks to this incredible team we exceeded expectations, S/O to them
3D + Motion
Allan Michay Nathanaël Labreuil
API & Infrastructure
Read other case studies
Learn more about my work with this selection:
Improving design tokens usage for designers and tracking issues
Notion as Destination
Automating design system documentation through streamlined updates
Command Line Experience
Refining Command Line Interface for efficient design pipelines setup