Key steps for developing a collaborative design process

Design is a process for creating creative solutions and resolving problems prioritising the user's needs. Designers need to define and create products that are user-friendly, make user's lives easier and that guide user behaviour.

As designers, we need to resolve problems and provide solutions for our clients. Most clients come with a problem or specific need, and as designers we contribute with design led solutions for the best way to improve their service. We have to understand that we are not superheroes, we don't have the answers for everything. However, following a collaborative design approach we can share our expertise in the fields of user interface design and help to guide the most suitable functionality for a client project. We share our ideas as part of a collaborative design process because we understand that working as a team and using our collective brainpower is the best way of finding the most appropriate solutions to complex problems.

This article will focus on the working methodology we have developed at 1xINTERNET to offer a fast, flexible and client first approach to developing design solutions. The collaborative design workflow we have developed is integral to all solutions we create.

Collaboration and communication are core principles of our workflow at 1xINTERNET. The design team is in constant communication with developers, solution architects and project managers to provide the best solution for the client. Good communication and an effective working methodology is beneficial for our teams and beneficial for our clients; less time is spent repeating tasks which means more time can be spent in defining great solutions. 

Following the collaborative design approach and working as part of a team we get to see the whole life cycle of a project, including any problems that the frontend team has when they are in the implementation phase. As designers it is very important to be part of the project during all the phases. We can adapt to the client's needs and provide solutions to any problems that arise as the project progresses. When we define the project goals and understand which functionalities or processes need to be improved, we are able to offer the most appropriate and effective solutions for a project.

We have to design solutions that are not just  “nice to have” but that are “ must have”, solutions that offer essential functionality to improve the clients project.

Involve the whole project team from the beginning

In the first phases of the project (thinking, researching, wireframing, etc … ) we share all documentation with our team. The design team needs to have constant feedback, from both clients and developers, to check that the designs meet the requirements of the project.

After the ideation and research phases we start to make fast wireframes to represent the solution that the client and project need. With these fast wireframes, we can check the functionalities that we have defined with the frontend team, and they can estimate and check the best ways to implement them.

Organise review and validation meetings before presenting to clients

When we define a new flow or functionality, we have internal validation meetings together with the developers and project managers (PMs). For the PMs this is useful because they can check that the goals of the project are being met and the developers can check that it is possible to implement the design solutions we have created.

Use the same language for clear communication between teams 

Clear communication in design is important. We need to talk and speak the same language, the same structure and nomenclature. Here at 1xINTERNET, we have set up a consistent Design System (1xDXP) that forms the foundation of all our projects. Developers always use the same structure and the same naming conventions for their components.

A year ago, we started to use a design template in Figma, our main collaborative design tool in 1xINTERNET. We use the same structure and naming conventions for all the components that we are going to use in the new project. We have defined  FOUNDATIONS - COMPONENTS - PATTERNS - REGIONS and PAGE EXAMPLES.

The structure and the way that we use this template is the same across all of our projects and the basic elements like cards, forms, headings have been defined by the design team for our developers. So when a new project starts we can define the foundations based on the brand identity of the client, meaning that very quickly we can provide a first draft of the project aligned with the company brand.

For the design team, it is better to make more effort in the beginning in defining the functionalities and solutions that solve the bigger goals of the client  than to spend time redefining simple components or patterns. This type of task can be left for the second round of development when the client has already approved the major part of the design and is happy with the progress. 

We understand that we need to work quickly,  that clients need to see solutions. At this stage we are designing ideas, not the pixel perfect final result. Spending time on the overall design and main features is more important than working on the basic issues.

Use a clear structure across all projects 

Our template uses the same structure in all of our projects, by doing this designers always know how each project is organised, as do the PM´s and developers. Maintaining a consistent structure means that team members can change between projects without any special onboarding.

Communication and continuous feedback are the most important factors in ensuring a good collaborative workflow between designers and developers working together on web projects. Maintaining a clear structure with consistent naming conventions make it easy for both designers and developers to adapt to any project. 

Working in conjunction on a “live” Figma template means that designers and developers are constantly engaging. The collaborative design approach leads to fast delivery with less effort. Everyone benefits from this collaborative workflow; clients see things get done quickly and PMs can detect problems early to ensure delivery is within a timeframe.