Process

Collaborative design: Lessons from building a SaaS app

4 min read
Jakub Paniączyk
  •  May 7, 2018
Link copied to clipboard

Digital product design is an iterative process that involves not only you as a designer, but also people who give you feedback or turn your ideas into code. Collaborative design can make this undertaking easier for everyone.

In Jess Eddy’s words, “collaborative design is a great facilitation tool that helps get the best ideas on the table by engaging various different stakeholders with different perspectives.”

Related: Get over yourself—collaboration is the secret to great products

What follows are the lessons on collaborative design we’ve learned developing Teamdeck, a resource management tool for companies working on multiple projects at a time.

Although I’m the only designer working on it, I still have to collaborate with developers, product managers, and other team members.

Lesson 1: Make everything shareable from the beginning

Designing an app, there’s a lot of components that together create a cohesive user interface. But before they do, there’s a long and often daunting process of reviews, adjustments, and tweaks. And that process involves other people, be it your team members or a client.

Knowing that you’re going to collaborate on a project with others, you should prepare for it early on and make everything shareable from the beginning. To do so, decide how you want to store, sort, and share all of your assets and components.

“Make everything shareable from the beginning.”

Twitter Logo

We first used Photoshop files and Google Drive for handoffs. Over time, sharing heavy PSD files and design versions started to be a problem, as our team and the number of assets grew. It was also becoming more expensive as every new team member had to have a Photoshop licence.

In order to overcome that, we switched to a tool that makes project handoff easier and quicker, and is also more cost effective for us.

Using Sketch and InVision Inspect we’ve simplified the handoff process, as both design and development teams have access to all components and necessary information about the design in one place.

Lesson 2: Organize UX workshops

With product design, you shouldn’t rely on your assumptions, but rather use every possible piece of information about your project’s objectives, users’ needs, etc.

A great way to get these valuable insights internally is to organize UX workshops with your team. Think of the roles you need to include, like executives, product managers, developers, or marketing specialists, in order to evaluate the prototype. Uncover the goals, objectives, and business needs the product should meet.

“Don’t rely on your assumptions.”

Twitter Logo

Lesson 3: Test your assumptions

When the prototype is ready, use your team’s feedback to potentially uncover areas of improvement you’ve skipped yourself or would never think of. After creating lo-fi prototypes, validate them with your team members or other employees at your organization.

Related: The 5 most common rapid prototyping mistakes

I use internal tests and recording sessions to see how others interact with my design. Remember to be specific about the kind of feedback you want to receive.Twitter Logo Clarify what you want to test and ask questions if you feel like your team’s answers are too broad.

A key to successful collaborative design, as said by Ryan Thomas Riddle and Marcin Treder, is to get the most of your team’s knowledge, not letting them drive the design process for you at the same time.

Lesson 4: Listen to your users

At the end of the day, you design for your userTwitter Logo—so learn about their needs, how they interact with your product, and what you should improve. Listening to user feedback will teach you all of that, helping you create a far better product.

At Teamdeck, we’ve implemented Intercom chat to make it easy for people to reach us. This way, we can also get valuable feedback by asking users specific questions.

Teamdeck reports designed in Sketch

For example, when redesigning our reports we weren’t sure what kind of templates would be the most useful for our users, so we decided to ask them about it. A couple of interviews made us aware that our users want to be able to calculate their KPIs, including project ROI or employee productivity rate. This insight massively helped us build templates that are actually valuable for Teamdeck users.

Lesson 5: Iterate for the best results

It’s rare to come up with the best solution right from the start. Iterating will help you build better products, as you can get more feedback on features you’re designing.

Using InVision, we can share designs with different team members or get instant feedback when applicable. We also host product meetings to check if the product is in line with our strategy, share our learnings, revisit our views on the app, and make new assumptions and hypotheses.

While developing a SaaS product, we learned that iterating during the design process lets us create a better tool for our users—every time we learn more about their needs and how we can solve their pain points.

Over to you

Collaborative design helps us create a cohesive app tailored to users’ needs.

To make that possible, we’ve incorporated a shared design system based on creating easy ways to create, store, and share components and design versions.

Using tools like Sketch and InVision, we can design the app online, giving everyone access to components and app views, making it easier to receive feedback or hand off the design to developers.

How do you collaborate when you’re building a product? Tell us on Twitter: @InVisionApp.

Collaborate in real time on a digital whiteboard