As designers, we’re tasked with navigating a sea of ideas and priorities, and creating the vision that guides our collective work. We find ourselves balancing two, often conflicting, goals: 1. creating a playful space for experimentation and 2. fostering interdisciplinary team collaboration. So how do you make a space that fits these seemingly opposite, needs?
The key to achieving both the experimentation and collaboration goals is to balance the exploratory nature of design with logical organization in your shared work. A chaotic mess of brilliant designs is incomprehensible without a helpful file structure but too much structure early on might stifle your team's inspiration.
Sho Kuwamoto, Director of Product at Figma, recently shared his thoughts on freeform vs. structured design (check out his Schema 2021 talk here). The premise is that designers need the right tools to move fluidly between exploring concepts freely without getting bogged down by the details and adding structure when necessary. He shared an example of using the eyedropper tool: you quickly pick a color from somewhere else in the file using the tool instead of applying a defined color style. Because you’re just exploring, right?
What about when your teammates need to jump into your file? With the right amount of structure, as counterproductive as it may feel to early freeform explorations, you can build trust with your team and enable them to do their best work. Building on Sho’s insights, this concept also easily extends to the way designers can organize their files as well. Adding a bit of structure to your design file can improve collaboration because it will give your peers enough context to ask questions, discuss, and offer their points of view confidently. They don’t have to wonder which screen is which or what ideas have already been explored.
Structure helps people digest and absorb ideas more richly. Have you ever had someone expect you to know exactly what they’re thinking or feeling without having a real talk about it? That’s how it can feel when you’re trying to sort through someone else’s mess of screens and shorthand notes. Being human-centric, which is who we are as designers, also means considering the other stakeholders in the design process.
Ask yourself:
Have you created an open and inviting space that allows collaborators to make their own explorations and discoveries?
Does your UX writer have to update the same piece of copy on every single screen or is there a component that they can update just once?
Do your engineering counterparts have to constantly ask you which designs are the most recent or is there a way for them to see which are the most up-to-date?
You don't need to redline your designs every time you share work with teammates. That could be too much structure when you're still exploring. Instead, use a few tactics to make sure everyone understands what's going on during the design process. Maybe early on you just rearrange your screens to get your team talking. Later, you might spend time annotating flows or building out a specific page for components. Depending on where you and your team are in the design process, different methods will help save time and facilitate a smooth workflow.
Here are a few tactics that might spark some inspiration:
Create a sandbox
Exploratory ideas can be messy, so create a specific section or page within your file to house all your diverging ideas and inspiration. When sharing with the broader team, consider pulling out a few key screens or iterations into a new page to eliminate distractions and highlight the specific areas where you’d like feedback. The sandbox acts as your playground to jump in and out of while also keeping an archive of the ideas you’ve tried before. Give it a name, like “Design playground” or “Carly’s sandbox”.
Tell a story
I work from Connecticut but I have teammates around the globe, so async communication is key. Ask yourself, could someone looking at this file understand it without me talking them through it? If not, add headers to create digestible sections. Add statuses or a changelog to show progress from the last meeting or discussion. I compare the current and future states side by side to give people jumping into the file enough context of where we've been and where we're going. When a design has a lot of information, annotate key features or make call-outs for specific questions or feedback. This way, you can quickly get the input you need from the right people without overwhelming them.
Hit record
You can create quick voice-guided walkthroughs or videos for teammates using tools like Loom or Figma's new widget, Voice Memos. This way, they can understand the designs at their own pace, have time to think and ask questions, and refer back to them later if needed. This is especially helpful for giving clear context about new ideas asynchronously. Just be sure to keep them short and sweet — around 3-5 minutes, otherwise people aren’t going to want to watch.
Make it a team sport
To figure out what works best for your unique team, hold a design retro. This is where you identify what worked and what could be better. In the spirit of continual improvement, I asked a few of my colleagues what they need from a design file to ensure they can contribute and do their best work.
Amna Saeed, Product Manager:
I really appreciate a well-organized design file because it helps me understand the designer’s intent quickly and clearly. In particular, it's helpful when diffs and questions are clearly labeled, the current state is provided for context, and non-happy path states (error messages, empty states) are included.
These are some features I love to see in a design file:
Labels to show how screens relate to one another, such as an arrow connecting a CTA from one screen to a resulting state change in another screen
Notation when two screens represent two different design options
Labels calling out the proposed updates and changes
Labels for open questions, and, when relevant, who they’re meant for (e.g. PM vs. Engineers)
Candice Roe, Senior UX Writer:
Components are the most magical part of a design file for content designers/UX writers. I update once, in the clearly-named “components” page of the design file, and the text populates everywhere. This saves me a ton of time, and helps me rely less on the product designer to adjust text box sizes and padding issues that may arise from updating anything that’s not a component.
And that brings me to autolayout. Autolayout is super helpful when I want to go in and add UI copy, such as inline text or legal copy, or even remove copy that’s not needed without having to ask the product designer for help.
The last and most important thing I look for in a design file is space to collaborate. This is the “messy” part of the file. It’s the space where I can explore solutions alongside the product designer, where we riff off each other, comment in real-time, and come together to find a solution. This is the page that eventually gets referenced time and time again when product stakeholders ask us if we tried something, and we can say “yes” and show them this page with all the collaborative explorations.
David Ko, Web Engineer II:
In a design file, I hope to see adherence to the design system for common components. The more explicit the association with the design system, such as labeling of specific components/styles, the better. For custom components, it is helpful to see a comprehensive representation of all the valid states, as well as how a user is expected to interact with this component. I also hope to see a more cohesive way to communicate and leave feedback.
In order to create the best experiences for our users, we have to consider the needs of our collaborators. By spending some time bringing clarity to the design file itself, you'll build up the relationships among the whole team and create a space to dig into the work that’s most meaningful. As designers, we should be strategic about our structure and explorations, as well as how we share our work. Doing these things will help everyone on the team come into alignment, find gaps in the collective understandings, and challenge assumptions, all with the goal of creating high-quality experiences.
