Semrush Intergalactic
Design systems are easy until they're not. Here's how Semrush Intergalactic started and evolved.
Semrush launched with just 4 tools adding another 3 to 5 services every year. Development was pretty sporadic with every other tool going it's own direction in terms of patterns and visuals. In 2017 the first version of Intergalactic (in Sketch, at the time) was conceived. First, just as a storage for color palette, buttons and some common icons. Then with more and more complex patterns and live sandboxes with real-time rendered components. In 2021 Intergalactic went public.
Semrush now has around 55 tools and a vast design system. Have a look.
Icons
Problem: Designers were struggling to find the right icon for their needs. They were looking for a "cup", while icon's name was "goblet".
This is why we've added semantic search with synonymous tags for each icon. For example, you're looking for a icon to accompany "try again" button, but don't know how corresponding icon might be called. But you do know that there must be an arrow. So you type "arrow" and observe all icons with a arrowhead. Try it out for yourself.
Connecting the dots
Problem: The biggest struggle was to maintain design system files in Figma and update repository for developers, keeping those two entities in sync. So we had to fight on two fronts at the same time.
The good news is that when you're creating an internal product your users are within an arm's reach. You can easily interview a developer, QA engineer, UX researcher or product designer.
To keep everybody posted, we kickstarted open changelog with live feed to company's Slack as well as regular emails.
Charts
Problem: Designers, developers and product owners were getting lost in great variety of different charts that we have. Donut, pie and bar might sound familiar. But what about Venn, scatterplot, Kagi, alluvial and lollipop? Confused? So were we.
Resolution was pretty simple — we've added showcase, a splash screen and a dev page where all the charts were displayed next to their names.
Support
Problem: No matter how good your documentation is, how thorough you've written your Q&A, there are always going to be some repetitive questions asked here and there.
To address that issue we… just answered those questions. Luckily, the support/customer success team was willing to share their experience in pre-written answers, Slack auto-responders, etc.
Semrush Intergalactic
Design systems are easy until they're not. Here's how Semrush Intergalactic started and evolved.
Semrush launched with just 4 tools adding another 3 to 5 services every year. Development was pretty sporadic with every other tool going it's own direction in terms of patterns and visuals. In 2017 the first version of Intergalactic (in Sketch, at the time) was conceived. First, just as a storage for color palette, buttons and some common icons. Then with more and more complex patterns and live sandboxes with real-time rendered components. In 2021 Intergalactic went public.
Semrush now has around 55 tools and a vast design system. Have a look.
Icons
Problem: Designers were struggling to find the right icon for their needs. They were looking for a "cup", while icon's name was "goblet".
This is why we've added semantic search with synonymous tags for each icon. For example, you're looking for a icon to accompany "try again" button, but don't know how corresponding icon might be called. But you do know that there must be an arrow. So you type "arrow" and observe all icons with a arrowhead. Try it out for yourself.
Connecting the dots
Problem: The biggest struggle was to maintain design system files in Figma and update repository for developers, keeping those two entities in sync. So we had to fight on two fronts at the same time.
The good news is that when you're creating an internal product your users are within an arm's reach. You can easily interview a developer, QA engineer, UX researcher or product designer.
To keep everybody posted, we kickstarted open changelog with live feed to company's Slack as well as regular emails.
Charts
Problem: Designers, developers and product owners were getting lost in great variety of different charts that we have. Donut, pie and bar might sound familiar. But what about Venn, scatterplot, Kagi, alluvial and lollipop? Confused? So were we.
Resolution was pretty simple — we've added showcase, a splash screen and a dev page where all the charts were displayed next to their names.
Support
Problem: No matter how good your documentation is, how thorough you've written your Q&A, there are always going to be some repetitive questions asked here and there.
To address that issue we… just answered those questions. Luckily, the support/customer success team was willing to share their experience in pre-written answers, Slack auto-responders, etc.