Automating design system documentation through streamlined updates

Automating design system documentation through streamlined updates

Automating design system documentation through streamlined updates

Automating design system documentation through streamlined updates

Notion as Destination Cover

Specify can leverage existing tools (Notion, Confluence, Slite) to make them dynamic and connect them to a source of truth. As a result, it helps users make the most of their stack when documenting design systems instead of relying on static solutions (updating frames/text manually in Figma) or paying for additional apps like Zeroheight.

Notion is the #2 tool in the design stack in 2022 (just after Figma) — this trend was also observed in the survey we sent before working on this project (see page 10), as well as its predominant usage by our users and qualified leads.

Company

Specify

Period

April to Nov. 2022

Space

Design Operations

Platforms

Web

Key Deliverables

User flows, Mockups, Prototypes, Animations, Code

95%

of paying users had a try to Notion as Destination since its release

72%

of paying users are still using the feature 3 months after its release

Notion as Destination Cover

Specify can leverage existing tools (Notion, Confluence, Slite) to make them dynamic and connect them to a source of truth. As a result, it helps users make the most of their stack when documenting design systems instead of relying on static solutions (updating frames/text manually in Figma) or paying for additional apps like Zeroheight.

Notion is the #2 tool in the design stack in 2022 (just after Figma) — this trend was also observed in the survey we sent before working on this project (see page 10), as well as its predominant usage by our users and qualified leads.

Company

Specify

Period

April to Nov. 2022

Space

Design Operations

Platforms

Web

Key Deliverables

User flows, Mockups, Prototypes, Animations, Code

95%

of paying users had a try to Notion as Destination since its release

72%

of paying users are still using the feature 3 months after its release

Notion as Destination Cover

Specify can leverage existing tools (Notion, Confluence, Slite) to make them dynamic and connect them to a source of truth. As a result, it helps users make the most of their stack when documenting design systems instead of relying on static solutions (updating frames/text manually in Figma) or paying for additional apps like Zeroheight.

Notion is the #2 tool in the design stack in 2022 (just after Figma) — this trend was also observed in the survey we sent before working on this project (see page 10), as well as its predominant usage by our users and qualified leads.

Company

Specify

Period

April to Nov. 2022

Space

Design Operations

Platforms

Web

Key Deliverables

User flows, Mockups, Prototypes, Animations, Code

95%

of paying users had a try to Notion as Destination since its release

72%

of paying users are still using the feature 3 months after its release

Notion as Destination Cover

Specify can leverage existing tools (Notion, Confluence, Slite) to make them dynamic and connect them to a source of truth. As a result, it helps users make the most of their stack when documenting design systems instead of relying on static solutions (updating frames/text manually in Figma) or paying for additional apps like Zeroheight.

Notion is the #2 tool in the design stack in 2022 (just after Figma) — this trend was also observed in the survey we sent before working on this project (see page 10), as well as its predominant usage by our users and qualified leads.

Company

Specify

Period

April to Nov. 2022

Space

Design Operations

Platforms

Web

Key Deliverables

User flows, Mockups, Prototypes, Animations, Code

95%

of paying users had a try to Notion as Destination since its release

72%

of paying users are still using the feature 3 months after its release

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.

Boost our acquisition and conversion rate

This new destination will help us attract new users, as we will answer another problem they have while working on their design system.


Reduce time before aha-moment

Designers will not absolutely need help from developers to extract and update their token table inside Notion.


Improve retention

As teams will use Specify for doing two jobs automatically: the implementation part and the documentation part. Moreover, designers will also be able to use Notion to create press kits and stop wasting time on updating assets manually.

Design work

How we managed to build this feature and achieved these results

Research

Personal exploration

The following day Notion was releasing its API in public beta (I was so excited about this release). I extracted all design tokens from a Figma file with Specify Design API and put them in a Notion Database, and I created two proof of concepts:

  • Notion Integration: allowing users to sync their design tokens from Specify (previously connected to Figma) to a Notion Database

  • Design Tokens Cover API: allowing users to get a custom image of their design tokens in a Notion Database, made with Sharp.js

Notion as Destination Personal exploration

I tweeted about it, and it got some reactions in the design system and Notion community (8k+ impressions). Specify observed a 6% increase in new users compared to the previous month. This personal exploration provided a first insight to Specify audience’s interest in automating design system documentation.


Survey

We were looking for insights regarding knowledge bases and design system document tools: users, usages, tools, frequency of updates, etc. So we sent a Maze survey to our paying users and leads and solicited several communities on Slack and Twitter dedicated to the design system.

  • Specify Paying Users and qualified leads using a documentation tool

  • Design Systems (Worldwide) Slack: 23 000 members

  • Design Systems Twitter Community: 5 000 members

Notion as Destination Survey results


This survey initiated the Specify Beta Program with participants who want to test our upcoming features and participate in the conversation while we are building them. As a result, 30 testers joined this program after the survey.

Shaping

Pitch + Userflows

Before diving into the design work, we shaped with Maud (Product Manager) a first version of the user flows, wrote a pitch, and de-risked it with developers.

Notion as Destination Userflows


De-risk and rabbit holes

By having several discussions with engineers and providing time for them to explore the Notion API possibilities, we “de-risked” this project by ensuring we reduced as many gray zones as possible.

In addition to answering all these questions and rabbit holes to de-risk this project, we sat down with engineers, broke this project into pieces, and asked them about their confidence levels.

Then, during the project, while they were figuring things out, they progressively moved each piece to the right as their level of confidence increased.

Notion as Destination Hill Chart

Building

First prototype

I designed the first concept experience in the first week in Figma based on the user flow we previously agreed on.

I made sure to use our design components, provided a first example of what the copy should look like, and highlighted the areas where I needed some clarification and where the usability test should focus.

Notion as Destination First prototypeNotion as Destination Screens


Usability testing

We submitted the first version of this new feature to our 30 beta testers through a Maze survey and got 15 answers. Users loved that we tackled another pillar of design systems with the documentation, and they are enthusiastic about it.

Notion as Destination Usability testing results


We learned that a Notion template would be appreciated, as users don’t want to spend extra time configuring their Notion Databases. Also, the “Select your Notion page” was tricky for some users. They need extra information to know what they are about to do.

Here are the scores we get: 92.5% success rate, 4.6/5 average rating, 1.6% bouncing rate


Improvements

Based on this feedback, we were able to improve steps where we had some hesitations with much more confidence:

We created a Notion template with several views tailored to fit user needs when comparing tokens between light and dark modes, global vs. alias tokens, and groups.

Notion as Destination Distribution


We added information inside each option and a helper callout to provide more guidance to users, and a “Need help” button, allowing them to use Intercom if needed.

Notion as Destination Improvements 2

Distribution

We created with Nathanaël (Front-End Engineer) a dedicated landing page on our website to promote the Notion as Destination beta feature.

With also promote it through our principal channels: our changelog (page + email) and with a Twitter thread.

See it live

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

Outcomes

Key results we got a month after the release

95%

of paying users had a try to Notion as Destination since its release

72%

of paying users are still using the feature 3 months after its release

19%

of new destinations created are Notion Databases on average since the feature release

+9%

Each month, more users create Notion Databases with Specify

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
 Mohamed Khalil Elloumi
 Nathanaël Labreuil

API & Infrastructure

Antoine Moreaux
 Nicolas André

Read other case studies

Learn more about my work with this selection:

Updates, inspirations and thoughts.

Subscribe to my newsletter

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

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

Yann-Edern Gillet

Software Designer, Linear
Framer Awards Site of the Year 2022

© 2024 Yann-Edern Gillet