Democratizing design feedback loops for the whole team
Design tools provides ample opportunity to annotate and redline, but an external blog facilitates more discussion
Everyone’s invited to the documentation party!!!
A quick summary of how I like to set up product design documentation so that it’s accessible to a wide spectrum of team members and collaborators.
Designers, artists, front-end developers, back-end developers, producers, and product managers all need access for different reasons so the entire process needs to be open and easy to jump into at any point.
A visualization of the design loop. Blogging feedback and iterations in Dropbox Paper leaves Figma files way less cluttered.
Design
Format: Specs, Design system file, Hand-off files, and Working files
I like to keep design system files separate from other design files, even if they’re not large. Every design system I’ve worked on has been retroactive to some degree. But to start, building flexibility into components and layouts helps a ton.
For in-progress designs, I prefer to work in a demarcated section of the hand-off files for context. This isn’t everyone’s preference, not all designers like to work in public. So updating from separate, personal working files is part of this loop, which makes the regular blog-style updates a good rallying point for everyone.
WIP files are also great for archiving past iterations.
Discussion
Format: Dropbox Paper
The method: blogging work-in-progress, feedback, updates, and decisions chronologically (latest at the top).
Past iterations shouldn’t live in the hand-off files, and this blog-style documentation generates a discussion history that can be referred to later and is helpful for remembering why something may have been canned the first time around.
Why it works:
Dropbox Paper is like Google Docs but with better sharing and embedding functions and a beautiful lightweight minimal interface.
To share in-progress designs for feedback.
A separate doc for each feature is created
Add comments on parts of images, my favourite thing about it
Latest iterations are always posted at the top
this makes it easy to find and interact with the most recent conversations
a linear history of design decisions is generated from this practice, which prevents iteration clutter in the Figma files
Files can be linked directly from Dropbox
or you can paste images/videos/gifs if you don’t want to bother
Figma files and prototypes can be embedded, along with a slew of other things.
This is just icing on the cake, I don’t find myself using embedded files that often in a feedback loop like this but just linking to them instead.
Keep major decisions and conversations here instead of in DMs
designers, developers, product managers, or even stakeholders are free to take a peek to see how things are going or join in on the conversation
notifications can be customized and if the entire organization is already using Dropbox, permissions are a no-brainer
discussion will inevitably happen on other platforms like Slack, in Figma itself, or in meatspace, but everyone develops the habit of updating this singular space simply because of how useful it is
Alternatives and why they don’t work quite as perfectly, in my opinion:
Notion: awesome, but you can’t comment on a specific point of an image (totally a dealbreaker for me)
InVision: they’ve changed their products around and seem to be more focused on prototyping and whiteboarding now, and the whiteboarding is not linear enough for this purpose
Miro and Figjam: same reason as above, the freeform infinite whiteboard doesn’t suit the feedback process because it’s not inherently linear
Basecamp: it’s just fancy email, isn’t it, and although it’s linear, you need to scroll all the way to the bottom of the page to see the latest updates
Google Docs: honestly, adding images into Google Docs is the absolute worst
Figma: sure, you can comment on designs in Figma, but if they move around it gets confusing, and keeping all the previous iterations just for the sake of it can really slow it down
ClickUp: so many companies are already using Dropbox that adding another, separate tool doesn’t make a whole lot of sense
Delivery
Format: Figma, video recordings
Handing off a design is a process and should not be a one-time baton pass. Open and continuous conversation (and checklists) are essential. When enough conversations have taken place in order to move forward, the delivery process can then start.
Before dedicated interaction design tools were a big thing, Zeplin was a useful tool for organizing assets and communicating details about them. In my opinion, if a team uses Figma, Adobe XD, or Sketch there is no need for a separate design delivery tool like Zeplin, even if Photoshop and Illustrator are involved. Having a single source of truth is the best, and that can totally be Figma on its own.
Apart from automatic redlining offered by the developer mode, this is where the comments feature can come in handy for annotating. I often find it easier to slap some text next to a mockup instead, which removes the extra step of clicking to read a comment.
For larger features, recording a video for reference or calling a meeting to describe the design in detail is the last major step.
That’s it!
The loops illustrated here are meant to be repeated in predictable cadences until perfection is achieved. I believe in an open and collaborative process that is simple and intuitive enough to be adopted by anyone.