Hopper — Automating the design donkey work
How do you make sure that a rapidly growing team of product designers are all working from the same files and folders with clear, consistent naming?
Files get lost, folder structures can fall out of date, project titles can get confusing, people go rogue with their own favourite naming conventions… It’s a pain! Maintaining design assets can be a full time job — Airbnb have an entire team dedicated just to ‘design ops’.
Can you show me where that folder is?
When we start a new project, we copy a set of supporting folders from a template to our sub-team directory on Dropbox. These don’t always line up, they get outdated or we forget we have a template at all. As well as making our dropbox a bit of a mess, it can cause issues when a team is scaling.
Our team is growing rapidly and new members may not feel as comfortable digging around, trying to find assets if it’s a scary place to be. We wanted a way to automate this process, so we tried a few different things.
Hack 1.0
The first tool was a super simple Alfred hack. Using Alfred Workflows, we created a tool which asks for a query and then passes it through a simple bash script to move the files around.
The script copies and pastes the template folders to our project area and adds the date and name of the project in the correct format. We later got the script to find our most up to date sketch master file and paste that in too. Bingo, no more manually naming project folders, no more trying to find the most up to date Sketch master file.
I use Alfred and I love it but it’s a big ask to get everybody to download, install and learn the workflow. Whatever solutions we adopt has to be easier than doing it manually, by hand.
Hack 2.0
We later took this workflow out of Alfred and ported it into AppleScript which we exported as a mini executable App. This at least meant that we could ciruclate it without the need of Alfred.
Great! No more Alfred overhead. But how do we get it to ask for the right location? Or hunt down the right Sketch file?
We asked ourselves what the ideal solution would be: Something any designer could download, install once and use without having to read any documentation or instruction.
Doing it proper
We’re all for lo-fi tooling but nothing we had created so far was any easier than the manual process. It turns out we just needed to ask the right person. Enter stage Paul Tsochantaris. Paul is an iOS dev/wizard on our Rider App team and had some experience building Mac apps. After a quick elevator pitch, he kindly offered to help.
Paul was able to write an OSX menu bar App which would run those bash script we were using in that Alfred workflow. An actual Mac App! No more Alfred, no more AppleScript! The App just needed installing once and sat snugly in the menu bar on launch.
How Hopper works
- A designer downloads the affectionately named ‘Hopper’
- We store the move/copy/rename bash scripts themselves in a shared folder on dropbox, which Hopper looks for.
- The Hopper menu shows the list of scripts, asks you for the project name and runs the script. The scripts take care of shifting the files and folders around as before.
- The App gives you a notification to tell you it’s done or if there was an error. We also open finder at the new folder location as confirmation.
- The script then opens Sketch with a copy of the most recent master file, named, dated and saved in the right location!
Here’s the cool bit — Having the scripts in Dropbox means we can effectively deliver remote script updates to the whole team without them having to install, update or even relaunch the app.
What’s next?
We added some nice touches like ‘launch on startup’ and the ability to add static links to our most used web apps. We also added a section with static links to open chrome on useful web pages, like our staging environment or wiki site.
Hopper isn’t going to change the world, it will however mean that the product design team can get moving faster and keep in sync a little better. This app will likely continue to evolve to meet our needs, it might even be open sourced one day. For now, it’s a huge shortcut through out everyday workflow and we’re super grateful to the kind, talented members of Deliveroo who helped us.
Let us know your thoughts or questions in the responses below, we’d love to hear from you.
Thanks to Saffad Khan, Paul Tsochantaris (for doing all the hard stuff) and the Deliveroo Design Team for being awesome.
