Designing & building our design toolchain
One of the things that I’m always tinkering with is the tools I use to do work. Are these the right tools for the job? Am I as productive as I could be with them?
In this post I’m going to share some designer productivity challenges we faced within Heroku and how we solved them with the broader Salesforce design team in mind.
At an onsite in San Francisco late last year, the Heroku design team set aside some time to discuss how we felt about our current design stack: the tools and products we use everyday to do our jobs.
It was while discussing our design tooling stack, which at the time consisted of Sketch, InVision, Github, Dropbox, Google Docs and Google Slides, that we hit upon some intriguing insights into the way we created, discussed and presented design work.
Our first insight: the form of our design presentations changed depending on who we were presenting them to. We dropped Sketch artboards into Google Docs and Slides for colleagues in engineering and product to be able to quickly see the entire flow of an experience.
When presenting to executives and stakeholders, however, we’d put the same artboard in a presentation format using Google Slides where we could control the narrative of the work and view the designs in isolation without the distraction of comments, paragraphs of texts and wireframes.
Our different methods worked well, but unfortunately, all of this meant a lot of manual work for the designer. If a change were made in Sketch, there would be several places that the designer would have to go and manually update dozens of static images.
Our second insight: even as a small team, we weren’t using the same tools to achieve similar results. Some of us preferred Dropbox Paper to Google Docs, others preferred keeping designs in Github to InVision. We didn’t have a process for our work, which was problematic for simply finding design files. Where do you begin to look when so many tools are being used?
It was clear to us that we could do something to improve our workflow and process, so we set aside five days to explore our problem and potentially come up with a solution. What we came up with is Xray.
Xray is a brand new platform that we’ve created from the ground up to solve our own problems. The driving principles are;
- Make life easy for designers — don’t make me configure a Sketch document to make it look good on Xray, just make it look good
- Make it easy to find stuff — don’t burden our users with having to manually share Xray documents and setup access control for them
- Anyone at Salesforce can login without signing up — don’t make me sign up for yet another thing
Xray consists of both a web platform and a macOS client. The macOS client is exclusively for designers and provides a simple interface to sync a Sketch document with the Xray platform. Once synced to the platform, anyone at Salesforce can login to view the designs.
Xray documents can be viewed either as a linear document akin to a Google Doc or as a presentation where slide progression can be controlled by the user. Naturally, our web platform is built entirely on Heroku.
The macOS client automatically detects an open Sketch document and is responsible for generating artboard images and handling uploads in the background.
After using Xray for a couple of weeks, we felt we’d really improved upon our process for presenting design work but there was still one big thing missing: integration with other services that our teams were using.
Internally we’ve migrated to using Quip, another Salesforce product, as our primary project documentation tool. We love Quip but we found ourselves doing the same thing with our designs as we were before — laboriously copying and pasting artboards into Quip docs to share them with a wider team. Wouldn’t it be great if our Quip docs updated automatically when new designs were synced with Xray?
Happily, that was soon to be possible with the advent of Quip Live Apps. Live Apps allow any developer to build new types of content for Quip documents, some first party examples include kanban boards, calendars and countdown widgets. The Xray Live App allows designers to drop an Xray document inline of a Quip document and have any changes to the original designs instantly reflected for everyone.
We’ve been very happy with how much Xray has both improved our design workflow but also collaboration with other teams. Over the coming months we’ll be looking to invite more product design teams at Salesforce to try Xray for their own projects.
Finally…
We’d love to hear how others are solving similar problems working with design within larger organisations. Please @ me on Twitter or reply to this post.
Interested on working on design at scale? We’re hiring.
