Designing an app for Design System governance
How we got smart about controlling a rapidly growing Sketch library for one of our biggest clients.
Together with my team at Hello Group, we began the implementation of a design system for one of our clients in June 2016. Initially, the project focused on researching, collecting and formatting components into a Sketch library. But as the design system grew and the library expanded, things became complicated.
Some of the bumps we experienced were mostly due to the way we maintained and shared updates to the library. This is surely an issue that’s familiar to many who try to build a neat design system, especially if it’s used remotely by many other teams.
So, you’re probably thinking why didn’t you use Craft, Brand.ai, Abstract, and all the other tools now available for asset management on Sketch? Well, when we started the project, Craft was the only app available, and there were still a few issues with performance stability.
The scale and scope of the problem
One design system Sketch file that had to be pushed out to:
- Our client: 19,000 employees, across 8 countries, with 3.5 million customer
- Our internal design teams
- External design teams from other firms
- Third party companies, mostly development
***And some spicy details about what the design system is for***
- Web products, like dashboards
- Web flows, like onboarding journeys for customers
- iOS and Android apps
- Intranets, newsletter templates
- Some teams using Mac, some using Windows
It goes without saying that this wasn’t the ‘centralised paradise’ we often read about in articles from Airbnb or Facebook. This was reality. Nearly every day we had teams banging on our door asking for the latest Sketch file, the missing icon, or external parties messing around with the library, because “that’s what it looked like in the version you sent us last time we talked”.
The solutions available and how we flipped the script
The range of solutions available nine months ago weren’t as advanced as they are now. And to be fair, we knew that somebody, at some point, would take action to address this issue.
But we didn’t have the time to wait, or the budget to craft our own badass sketch plugin product, including video tutorials, branding, and an AD campaign on major channels to promote it.
What we needed was a quick’n’dirty fix to ease our pain and make it easier for everyone working with the design system, and one that would allow us to get on with our daily working life.
Instead of working with plastic pipes and paper bags like the guys in the image above, what we had was:
- Invision Craft (an option none of us particularly fancied)
- This article from Lars Damgaard
- And shiny eyes just thinking about having the Sketch library available in the ‘pre-made’ templates folder.
A library on a shared folder in Dropbox, linked to the template folder of Sketch seemed to be the right way to go, although we still had a few issues with that solution:
- You have to invite people to the Dropbox folder
- Anyone invited to the Dropbox folder could easily open the master file and change its content.
Our client tasked only us to administrate that library in order to enforce alignment; that was in fact the catalyst for us to find a better way to address that problem.
We coded 2 small desktop apps: SyncUploader and SyncApp — the first one, owned only by the Design System team, allowed us to upload to our server the sketch library; the second one, installed on all the teams’ computers, is needed to download and automatically install the sketch file into the local templates folder of the designer.
Let’s break it down, here is how the uploader works :
The SyncUploader
This uploader is owned by the Design System team, which uses it to upload, new, updated files to one of our servers.
Report the latest changes
A simple text editor enables us to report what’s new in the latest uploaded files.
Upload it, simple as that
Just press the button to save the file on our server, ready for download.
And here is shown how the synching app works:
The SyncApp
When launched, the app runs a quick scan for updates
Check what’s available
If there are updates, the app displays the version number, and a module listing all the reported changes
Download & install
The app automatically installs the latest library into the Sketch template folder, and overrides the previous one — which is saved, but it’s not available to everyone
Load it from the templates section
As promised, your file is there with all the latest updates, ready for use.
Final considerations
I am probably breaking the average length of an article to be read, so to wrap up, here’s a couple of things I thought I should mention to put it all into perspective:
1.“Done is better than perfect”
I’d like to point out that this product was the result of an amazing team collaboration, and that the solution was brought to life in less than two weeks, working mostly during our downtime.
In 2017, we plan to put more flesh on the product — we already have a long list of features that we’re currently working on to make it even more efficient.
2.Solved one problem, others will arise
Unfortunately, we only managed to utilise this app internally, but we believe that its true potential is largely unexplored. We solved many time-consuming issues through our day-to-day design activity, which enabled us to focus on the right discussions, instead of spending half a day trying to look for the latest version of the file.
3.We didn’t invent anything
The strong value of this small product lies in the way it’s been thought out and developed: you could kill it by simply saying it’s an automated link to a server. But it’s more than that.
Like all good ideas, you can explain it in one line — everybody can understand how it works in just two seconds, and there’s no long onboarding procedure to get it to function, from both sides. Anybody can use it, and it has the potential to go way further than uploading a simple Sketch file to the template folder.
Stay tuned…
Feel free to drop me a mail to find out more, or just get yourself in this mail list and we will send you updates about our progresses on the SyncApp.
