Designers notes: How to Create a Design Collaboration Workflow that suits you.

A collaboration workflow is a new way of working in a team – it’s agile, fast and all done efficiently in the background. Everyone has their own tasks, all online and all in harmony with each other – as one team member works on their job another member does their own job, and then they comment, give feedback to each other and help one another advance on their project.

In design, this type of workflow can typically be divided up into three types of team members: designers, product managers, and developers. This type of workflow includes, but is not limited to, creating transparent tasks for all to see, clearly marking up important design details on the design, handing off assets in one place, two-way PRD-design references located in a central hub for all stakeholders to access and work on the design. In essence, it is a type of agile workflow based on collaboration.

This workflow is a new way of working as a team. It is inclusive by making sure all key stakeholders’ opinions’ are included in the final design. Now, designers, developers, and product managers can all be on the same page, working on design specs, the creation of the design prototype and the real implementation all in the same place.

Working to be on the same page from the get-go saves time and rewards your effort by making sure the transition from specs to design to a real product is correct. Handing off code, sending assets, manually marking up design details, giving comments and tasks to each other all require extra time and effort in the short term but really help create an agile workflow amongst a team.

Miscommunication is often to blame when a highly qualified PM, designer and developer launch a product that is full of errors or has a poor launch. It’s easy to save time early by communicating and having frequent meetings to understand each others role and viewpoint. I have often found explaining what I’m doing to the developer and why my design choices are the way that they are, helps create more precision when coding the app because the developer understands a lot more about what I have handed them. Developers understanding the design principles in your design system gets them on board with pushing the best experience onto the user.

The same can be said with PMs, understanding what solution the PM is looking for now or in one year helps the designer shape their product that is more in line not only with the written PRD but also with their PM’s vision for the product.

The design system is so important in explaining what you’re trying to do with the design. Even for the most basic components. PMs and devs need to know the design choices made so they will be able to enhance those design choices and ensure they are translated into the real app.

Today, I’m going to help explain how the two main workflows a designer has can be streamlined and improved with this collaborative workflow.

Designer-developer:

When transitioning designs from a prototype to a real app, some things don’t always go to plan. There are always differences in interpretation and implementation along with miscommunication. Being able to create tasks for either the dev or for the dev to give me creates an easier environment to work in rather than checking several apps to do so, I can work on each individual task and let them know my progress. After working together on the actual design, then understanding what can and can’t be implemented in the time frame we have, the next important step is the actual handoff and implementation.

I have found that the most difficult time of design is developing it from a hi-fi design online into a real website or app. Implementation needs close alignment of designer and engineer. Creating a hub in which all communication about the development process creates a streamlined flow for designers and developers to not only work faster but also ensure there are less errors and that websites or apps work as [I] the designer intended rather than the design only being the best a developer could actually implement in the time they have.

Markups on the design show the designer exact specs to implement. Now I have a tool that let’s me mark up the distance between elements, color codes and font styles all on top of the design. This allows the developer to not rely on an email or separate document when finding fonts and exact colors, all the devs have to do now is look on the hi-fi design itself. Showing the developer directly what size an element should be, how big an interactive area should be, these are all areas in which developers and designers often aren’t fully on the same page and being able to finish my design with these annotations just gives me a peace of mind that the dev will implement exactly as I want.

Designer-PM

When product managers and designers come together there can be a certain mismatch between ideas and abilities about certain beliefs for what can be designed against what should be designed. I often find that PMs like everything to be on a roadmap, allowing a type of Kanban approach for you as a designer to methodically go through necessary building blocks.

After initial meetings with a PM I always make my own notes so when the PRD is written down I have more detailed understanding of what is required.

Then as I start designing, I always keep everything clear on my design: my thinking process should be clearly shown, I always add status tags for each artboard as well as any priority tags on tasks. If there are any issues I haven’t figured out yet I simply make a task and assign it to my PM.

I have learned to work side-by-side with PMs efficiently, ensuring there is a large amount of collaboration and that the design is not only coming from me, but coming from everyone on the team – I am simply helping us deliver the best real-world app by creating a prototype that we all see having success with existing and potential new users. This is a two-way street and we both gain by having this transparency when working together.

By keeping everything in one central hub and ensuring tha twe are creating a real working app together, from scratch, as a team I gain a greater say in how the actual app will run and the product we design is of a higher quality while saving time. The only way I have been able to be working this closely is by harnessing existing tools, quickly onboarding colleagues and creating a new working environment where we all work together in equilibrium, otherwise trying to get everyone and keep everyone on the same page is too difficult.

Yes I use Sketch, but I also use to gain all of these collaboration tools. These together give me the highest quality designing tool along with a tool that gives me a unified collaboration workflow. In the long run I’ve saved countless hours every project by working closer with my team and giving much more accurate handoffs to developers.Now, there is no way we can have any miscommunication, and our apps are much better for it.