Reducing Design friction: Why a dev might be the best hire for your design team
TL;DR: 6 months of work by 1 intern and the 20% time of two “dev-signers” led to designs taking 30% less time to create for designers at Atlassian. Interested to learn how? Read on…
Repetition is the antithesis of fun. The games industry has known this for years — grinding out the same thing over and over for the same reward creates diminishing dopamine responses until it becomes aggravating. Conversely, performing an action that amplifies your reward is immensely satisfying.
Games like Cookie Clicker are based entirely around this — exponential return from the same action. Other games such as Factorio go even further, allowing users to completely automate every action in the game, leading to enormous returns on efficiency for every action. This simple mechanic done well has led to it being the #2 top-rated game of all time on steam, and it’s described by one user as:
As designers, we can learn a lot from this. By removing aggravating repetitive tasks, we can see exponential returns in our design efficiency. This is what Atlassian’s Design Tooling Team has been pursuing in the last year.
Identifying the problem areas
Our first step was simply observing designers as they did in their day-to-day work. A shout out to Dovetail here, which really helped us track and tag our research in a way that was easy to break down and digest. What we found among the top issues were three that we thought would be easy to automate:
- Inserting good copy into designs
- Going through the proper processes for licensing photos
- Finding the right symbol in our GUI pack
Once we had this list, we went to work.
Lorem Ipsum? Hardly Miss’em.
Good copy is hard to write. Not because we aren’t destined to be the next Steven King, but because we often fit content to match our designs rather than content that would actually be used. This leads to mocks that look great but production pages that look cramped.
Sometimes we repeat the same thing over and over just to fill space, leading to a lack of realism when looking at the design. Sometimes we repeat the same thing over and over just to fill space, leading to a lack of realism when looking at… well you get the point. More importantly, though, good data takes a lot of time. Luckily Sketch’s data providers make this an easy fix. All we did was create 50 or so entries per data type (i.e. 50 Jira project names, 50 Confluence page titles, etc), toss them into a JSON file, and bam — instant time savings for our designers.
Note the two projects near the end — just by using random data, we caught an issue with overflow/lack of truncation. Had we typed this by hand, we’d likely have written data to fit the design. Not all is perfect in the land of Sketch data providers, however as it generates each entity independently, you end up with a lot of poorly matched data:
Lack of realism in data breaks people out of their thinking. Just like this misspelt word and the poor grammar in the previous sentence. You lose thebcontext of what you’re looking at because bad data is like a rock in your shoe — no matter what you’re doing that tiny pebble will be the source of all of your attention. To maintain focus, good data should be matched:
We wrote a Sketch plugin that links data types together so that Jie Yan Song’s email will always be jysong@atlassian, and her picture will always be her smiling. On that note, let’s talk about her picture.
Faces, Licensing, and AI
Early on, we knew we wanted avatars to be a part of the data generators pack. Up to this point we had two images that everyone at Atlassian used for all of their mock-ups. Someone, somewhere had added these to a Dropbox folder of design resources, and well, the rest was history. Forgotten history, unfortunately — no one knew if the photos were licensed or where they came from. This was problematic as inevitably these photos ended up in main stage demos, ads, and who knows where else. Even if it was a royalty-free photo from Unsplash, the risk is the same face advertising the latest Jira feature may also be used to advertise extra strength laxatives. The only safe course is to set up your own photoshoot through a modeling agency to ensure you have full control of the photos.
As a tooling team, we did this so our designers didn’t have to. The three goals were:
- Have photos we controlled the license for
- Have strong representations of diversity
- Be able to distribute these photos as an open-source library
Agencies were keen and well-suited to satisfy the first two points, but we still wanted the option to open source our design plugin work (including the avatars) at a later date. Every modeling agency we talked to refused to operate under those conditions, as they wanted to ensure their models’ faces didn’t end up on disparaging products. Luckily for us, the agency approach wasn’t the only option we pursued. Nvidia had just published their paper on GAN-created faces, and the results were pretty stunning. We waited for them to publish their source then generated over a thousand fake people. The best of these ended up in Atlassian’s Fake User Pack:
License-free, fully reusable, and with broad diversity represented, the GAN approach satisfied all of our needs. The best part — the user pack and data generators cut design time, on average, by 15%.
This work was done almost entirely by our intern Huw, as well as two of our senior “dev-signers”, in their 20% time. Big wins for a small time investment.
Finding a Symbol in Nested Nightmares
We have a large number of symbols and variations in our design system. With small parts, subcomponents, and overrides for all of them, our Sketch menus turned into a living nightmare.
We ran a quick calculation and realized there were over two thousand options in our symbol insertion dropdown in Sketch. This significantly slowed down any efficiency and creativity while trying to find the right symbol to use. Sketch Runner helps with this (huge props to how well that works) but unfortunately this only works if you know the exact name of the component itself.
We have new designers starting every week and so needed a way to alias components in the future and to provide just-in-time documentation for each of the symbols. While it’s still early days, it ended up not being too difficult to create a searchable insertion pattern in React:
By their powers combined…
With all of the above wins, designs that used to take an hour are now taking 42 minutes. That’s 30% of designers’ time saved from the work of an excellent intern combined with some designer's side time!
The best news? We’re providing all of this as an open-source extension so you can accelerate your own work. These can be accessed via the repository on Github. If you use these materials do toss us a PR with some things you’ve found that have helped your organization design faster — we’d love to hear about it.
