Insight Hero illustration

Article

Tools & Trends

Process

What Product Design Workflows Make the Best Collaborative Design Work

Abby Milan

June 15, 2022

Whether you’ve worked remotely (before it was cool) or were thrust into the WFH life in 2020, you probably wouldn’t trade it for going back to the office full time. But let’s face it: It’s not all sunshine and sweatpants — especially when collaboration is a big part of your job.

Nowhere is that more evident than in your product design workflow. If you’re honest, it could use some work, because that magical “collaboration” element is not where it should be.

You need some guidance to get it right.

In our eight years of working remotely with clients, we’ve learned a thing or two about what works and what doesn’t when it comes to building an efficient design workflow that spans time zones and zip codes.

We’ve discovered that collaboration across continents isn’t just possible — it’s awesome, too.

What is a Product Design Workflow, Anyway?

Before you set out to build anything — be it a brand new product or a new feature — you need a plan for how it’s going to get done. Think of this workflow as your team’s blueprint for achieving success.

  • It’s how you solve problems.

  • It’s how you improve and make things better.

  • It’s how your entire team stays connected and on track.

Many product workflows revolve around three to five main steps (like investigate, ideate, iterate, as you’ll read about later), but don’t let that limit you. If you need to expand your workflow to provide more clarity around each step, go for it.

Follow These Principles For a Cohesive, Collaborative Design Workflow

Before you start building out a design workflow with collaboration at the heart, you need a foundation of principles. When you have a set mentality to draw inspiration from, the rest is just logistics.

Here are the pieces that make up our battle-tested foundation.

principle 1: Working Asynchronously

We’ve found that not relying on others to complete our work is a huge time saver. When your workforce is all over the globe like ours, that’s critical. It speeds up the iteration cycle and allows us to see frequent progress. In detail, this looks like getting and giving quick feedback; choosing written communication over lengthy meetings; using tools like Figma for instant design feedback.

Regular communication staves off misunderstandings and assumptions, and for that, we recommend Slack and email. All of this to say, we hold meetings, too — strategically. Weekly or bi-weekly meetings allow us to review anything pending or requiring deeper discussion.

principle 2: Setting Specifications

Going into any project without a clear set of specifics and expectations is a recipe for rework and resentment. A clear outline of each project is incredibly helpful to answer key questions like What are the requirements of this feature? What are the key goals? How do we measure success? In the end, a detailed set of expectations saves time and increases your likelihood of success.

principle 3: Designing and Iterating in Sprints

Prioritizing work makes you ship features faster and emphasizes cranking out the most high-quality work. In other words: Work in design sprints. We organize our work around 2-weeks' worth of key issues and focus on carving out the highest impact projects. The sprint consists of a predefined amount of work that ideally won’t change during the sprint.

principle 4: Placing Stock in Systems

Making one design change has a ripple effect on your entire product. So when we want to implement something different, we consider how it impacts everything. Going by a design system helps with this. It ensures that everything is on-brand, everyone has the same information, and handoffs are smooth. Ultimately, our systems help us speed up the process without sacrificing quality.

How to Construct a Product Design Workflow — the webuild Way

At webuild, our multi-step process can be distilled into three main phases: investigate, ideate, and iterate.

This laser focus on relentless improvement constantly teaches us something new. Here’s what each phase looks like.

  • Investigate - Get into the nitty gritty by reviewing any documentation, checking out any comparables, asking questions, analyzing any data available, and talking to users whenever possible.

  • Ideate - Spring into action and explore multiple solutions at a time to solve important issues and goals. Start simply with low-fidelity comps and then shift to higher fidelity designs as we hone in on a solution.

  • Iterate - Gather as much feedback as possible from other stakeholders, existing users (if possible), and potential users through user testing. Without this feedback, we wouldn’t be able to workshop and refine concepts like we’d want to.

Ready for the nuts and bolts of the workflow process? We’ve found it helpful to highlight who should be involved at each step, as well as our favorite tools to support each point in the process. Illustration in blues, purples and oranges of a man using a laptop and woman writing on a clipboard with bulletin board on the background

Step 1. Ask Pre-kickoff Questions

As a design team, when we learn we’ll be engaging with a new client, we have a list of questions we run through to ensure we’re the right people for the job.

For you, the product owner, these questions are crucial in finding the right fit in a design team. There is no one-size-fits-all set of questions to ask, but you may want to know key things like how they prefer to communicate, what their workflow looks like, and who the primary team members will be.

Personnel includes: Internal strategists and producers, client project lead (CEO or producer)

Tools: Zoom, Slack, Google Docs Illustration in blues, purples and oranges of people’s faces surrounded by various shapes

Step 2. Kickoff With Internal Design Team

For us, an internal and informal meeting with team members to talk about you, the client, and your asks/needs, estimated timeline, and general next steps set the stage for the entire project. This is a good time to nail down broader expectations, deadlines, and key steps.

Personnel includes: Strategists, producers, designers

Tools: Zoom, Figma/FigJam, Slack Illustration in blues, purples and oranges of a man pointing at a bulletin board and woman writing on a clipboard

Step 3. Kickoff With Teams to Define KPIs and OKRs

This stakeholder meeting includes your team and our team and sets the tone for the entire project. We establish objectives and key results (OKRs) and key performance indicators (KPIs) so everyone is on the same page.

Personnel includes: Design team stakeholders (strategists, producers, designers) and your team’s stakeholders (owners/CEOs, producers, client designers, developers)

Tools: Zoom, Google Docs Illustration in blues, purples and oranges of two women shaking hands with the first woman holding a clipboard

Step 4. Conduct Research and Gather Insights

Our team sets off to find inspiration as close to what you’re asking for as possible. If your product already exists, we’ll conduct user testing. Also, user interviews are essential to gain insight into who your users are, how they use similar products, what they’re looking for in a product, and their specific needs. Competitive analysis research is also done at this stage to see how your product stacks up in the marketplace

Personnel includes: Designers, user researchers

Tools: Figma, Zoom, UserTesting.com, Maze, Google Forms, Typeform Illustration in blues, purples and oranges of a line graph, bar graph and a pie chart

Step 5. Analyze

Once our team gathers sufficient insight, it’s time to aggregate the data. We create user personas, and customer journey maps, draw up a competitive analysis report, and define business value opportunities.

Personnel includes: Designers, producer

Tools: Figma, FigJam, Zoom Illustration in blues, purples and oranges of a rocket surrounded by pencil, cloud, open book and various shapes

Step 6. Ideate

Time to brainstorm strategies, possibilities, and solutions. There are no bad ideas at this stage.

Personnel includes: Strategist, producer, designers

Tools: FigJam, Slack, Miro, Whimsical, Zoom Illustration in blues, purples and oranges of a bulletin board and flow chart

Step 7. Choose One Direction and Create a User Flow

Your team and our team meet to agree on the main design direction we’ll move forward with. This is important so that everyone has a clear picture of exactly what’s being asked and what isn’t.

Once the design direction is set in stone, creating a user flow is crucial in understanding how to build out the product. Site mapping can also happen at this stage.

Personnel includes: Our team (strategists, producers, designers) and your team (owners/CEOs, producers, client designers, developers)

Tools: Figma, FigJam, Zoom Illustration of three mobile screens and logo of Slack and Figma

Step 8. Create Low-Fidelity Designs (Wireframes)

Using what we’ve learned through research, user interviewing/testing, competitive analysis, and your business initiatives, we start roughly sketching out how the product will be designed.

The focus at this stage is completely on the user experience. While ideas might start developing for UI, you should hold off on high-fidelity approaches for now so as not to duplicate efforts later.

Personnel includes: Designers

Tools: Figma, Slack Illustration in blues, purples and oranges of blue box with question mark inside, man’s face, and tablet screen

Step 9. User Test (Again) and Iterate Low-Fidelity Designs

We’ll make improvements to the low-fi designs a few times until all user and stakeholder feedback has been actioned. Iterating between tests is important to glean the most insight from your users.

Personnel includes: User researchers, designers

Tools: Maze, Usertesting.com, UsabilityHub, HotJar, CrazyEgg Illustration in blues, purples and oranges of three mobile phones with various shapes inside

Step 10. Move on to High-fidelity Designs

It’s time to bring your designs to life by adding your brand’s fingerprints: color, typography, images, illustration, animation, or video. We create high-fidelity, lifelike prototypes so you can test with users again.

Personnel includes: Internal designers with producer/strategist input as needed

Tools: Figma, which handles asynchronous commenting for faster iterating Illustration in blues and purples of a woman writing on a clipboard, road directed to a man’s face with target on his head and three mountains with flag in the middle

Step 11. Iterate Until It’s Great

User test (we can’t get enough!) and keep honing the designs. This is a good time to try A/B testing to see what two potential design directions could work. Your users will show you which they prefer. This is a rinse-and-repeat step as we iterate until your entire team is happy with the product.

Personnel includes: User researchers, designers

Tools: Figma, Maze, Usertesting.com, UsabilityHub, HotJar, CrazyEgg Illustration in blues, purples and oranges of a man and woman using a laptop with text format in the middle

Step 12. Prepare for the “Handoff”

Can we be honest? We don’t believe in true “handoffs” because we believe that our work doesn’t end when coding begins. The relationship between designers and developers should be a cyclical one. All of that to say, this step includes cleaning up files, annotating designs with notes, ensuring components have a conventionalized naming approach, and downloading all the necessary assets.

Personnel includes: Internal designers, client developers, and engineers

Tools: Figma, Zeplin, Storybook Illustration in blues, purples and oranges of a woman writing on clipboard and peoples faces inside a circle

Step 13. Quality Assurance (QA)

Quality assurance allows us to ensure the live product looks, feels, and acts how we as designers intended it to. If something is off, we work with developers to explain the correct expected behaviors so they can find a fix. We always keep one eye on the full lifecycle of each product we work on.

Personnel includes: Internal designers, client developers, and engineers

Tools: Figma, Live app using different devices (and browsers if a web app), Slack, BugHerd, Markup.io, Marker.io Illustration in blues, purples and oranges of peoples faces inside a circle

Step 14. Hold a Retrospective

What worked? What didn’t? What could we have done better? We hold a debrief session to look at the specifics of the project and the process as a whole to see what could be repeated and what should be improved. We send out an anonymous survey to everyone on the team to get honest feedback, then meet together to celebrate wins and discuss how the team can grow and become better next time.

Personnel includes: Internal team: strategists, producers, designers

Tools: Typeform/Google Forms (for taking an anonymous survey about the experience), Zoom

How We Honed Our Fully Remote Collaborative Design Workflow Process

We’ve worked as a team of product designers with clients for eight years — remote at every step of the way. Our all-in-one team is made up of:

  • Strategists

  • Producers

  • Design Managers

  • Senior Product Designers

  • Product Designers

  • Illustrators/animators

We’ve been able to massage our product design workflow into the efficient, proven process it is because of the variety of projects and types of work we’ve done:

Need help in getting your collaboration off the ground? We’re just a click away.

Learn From Us

Sign up to receive our monthly insights directly in your inbox!