Light Your Design Process On Fire
(In a Good Way)
Every product design team faces unique challenges in a constantly-shifting landscape. At Granify, we optimize the eCommerce experience by addressing the concerns of online shoppers in real time. The messages we use to address these concerns must align seamlessly with our retail partners’ existing visual identity, UI, and UX patterns to act as an unobtrusive addition to the shopping experience.
Our process in designing these messages, much like that of many other teams out there, is collaborative in nature. We need to share our work and tear it down to rebuild it — better, stronger, faster, like a digital Six Million Dollar Man. As such, we lean on one another for review, critique, and suggestions. As with any product, we need to ship quickly without sacrificing our design standards. This can cause a tension in our collaborative process, as the feedback loop of review and thoughtful critique can either encourage reviewers to drop their own projects to review work from a contributor or cause a delay in reviews as reviewers focus on completing a project before switching into review mode. We’ve all heard about the drawbacks of context-switching (and if you haven’t, here’s a tweet) and in optimizing our process we always seek to increase our ability to focus.
We like to share our work and tear it down to rebuild it — better, stronger, faster, like a digital Six Million Dollar Man.
In 2016 our design team put a great deal of emphasis on overhauling our creative process. We experimented with tweaks to our review process, toolset, and workflow, and after a few false starts and faceplants, we came across a tool that facilitated a better process, workflow, and product. It was like pouring a can of gasoline onto the spark of our design process, turning it into a roaring blaze of creative output.
Working primarily with Illustrator, Photoshop, and InDesign we could (and still do) share assets across files, devices and operating systems using Google Drive. While this was better than no sharing system at all (imagine if we were all working off our local devices… *shudders*), this solution had its flaws as a collaboration tool. Every now and then, someone’s Drive just would not sync, and we’d have the painful Slack thread in which two designers tried to determine whose Drive was not syncing before both quitting and re-starting their local Google Drive folders.
Even worse, the convenience of shared files turned out to be a double-edged sword in collaboration. If two or more designers were working on the same project, at the same time, constant pre-save check-ins and post-save file merges were needed to keep everything running smoothly. In one terrifying (and isolated) instance, the unthinkable happened, and one designer saved over another’s file. A solid hour’s worth of work sent hurtling into the digital aether. Shed a tear for those wasted pixels another day; life must go on. We began to look beyond our existing toolset for solutions.
We had used symbol-adjacent workflows in our Adobe files (common assets created and linked into an InDesign file or common smart objects in Photoshop) and understood and appreciated the need for a UI-centric tool in our process. We’d heard great things about Sketch, but as a Mac-only application, it wasn’t the solution for our team (yes, we have designers using Windows; we’re tolerant like that).
Setting aside the search for a tool to refine our process, we attempted to streamline our workflow with a new review process. With three members of our design team being designated for visual review, we decided that designs would require unanimous approvals from these reviewers before moving ahead. By using Github’s Review/Approve functionality in Pull Requests, we could hack a tool we were already using. Initially this worked out well, as the reviews could be done asynchronously and at the reviewer’s convenience, with a clear binary of a design being Approved or Requiring Review. No need to drop your current work and hop into a critique, the thinking went, as the reviewer could simply check for Github notifications at the same time as they would typically check their email and then allot some time that day for reviews. Unfortunately, the unanimous review process added delays and overhead to the design process rather than accelerating it, while increasing the delay in our feedback loop. The added turnaround time led to subsequent portions of the process being pushed up against tighter and tighter deadlines. We needed a tool that would allow rapid feedback, exploration and iteration, and we needed a more agile approval process.
The unanimous review process added delays and overhead to the design process rather than accelerating it.
In late 2015, a member of our product team had come across an article about a new tool called Figma, that promised real-time collaboration. They sent it over to the design team, and, intrigued by the premise, we all signed up for their beta. When Figma launched later that year, we each opened it up, played around with it a bit, and created some pretty dumb (but incredibly fun) collaborative graphics. To us, it felt so natural… like Google Docs but for UI design. It was around this time that we were staring down the elephant in the room that was our stale visual review process. As our design manager was working on defining the visual style for a new retail partner’s messaging, he invited the rest of the designers to hop into the file.
Not to get all clickbait-y with you, but what happened next shocked us. Within 15 minutes, we had generated more iterations, made more tangible and informed visual design decisions, and come up with an end product that would have taken a week under our previous create > post > review > revise > repeat process. In the waning days of the Pull Request review system, our visual design team came to an agreement that the benefits of unanimous approval were not enough to merit the overhead it created. Cool as it was to repurpose a version control tool for design iterations, it wasn’t the solution for us. As a team, we decided that the onus for approving a concept internally would lie solely with the contributing designer.
Within 15 minutes, we had generated more iterations, made more tangible and informed visual design decisions, and come up with an end product that would have taken a week…
Using Figma, all of the designers have a voice in the creation of our messaging, but the designer driving the project has the final word on what moves forward. This has fostered an atmosphere of both creative mindfulness and increased creative confidence. Ownership of our work forces each designer to make thoughtful decisions, while the ability to experiment with rapid iterations and formats of a message gives both contributors and reviewers confidence. It eliminates the need to ask questions like “Have you played with the headline size?” when the reviewer can grab a design, make a copy, and play with the headline size themselves in less time than it would take to type out the question. While a Figma review session is not asynchronous by nature, our team can schedule manageable, mutually-agreeable times that do not disrupt our focus and arguably enhance it.
The ability to experiment with rapid iterations and formats of a message gives both contributors and reviewers confidence.
While the benefits of this open and collaborative review process are evident to our designers, they have spread throughout the organization. In optimizing our process, we have increased the design team’s bandwidth to work with the sales, technology, and product teams. Stakeholders can interact with designers in real time, whether across a desk or across a continent, and see a living history of a design’s evolution in the Figma workspace. Our ever-present push to mobile is accelerated by the ability to use constraints to build responsive designs.
Gaining speed and confidence in the design process without any sacrifice in quality was a huge win for Granify. Every organization faces their own challenges (we still face more as we grow!), and there’s no silver bullet to solve them all, but through process-minded optimization, you can find the fit for your team. For Granify, Figma was a key tool in transforming the way we create and review solutions. If you have found any awesome tools or techniques that have helped your process, we’d love to hear about them :)
