Collaborative workflow between designers and developers

The collaboration between designers and developers is integral to the success of any project. How we set up our workflow allows us to meet client demands, respond quickly to changes and have good communication flow between different teams. 

In this article we are going to look from the perspective of a developer at the tools we use and the methodology we adopt for a collaborative workflow between design and development teams at 1xINTERNET.

Starting to develop a project from scratch can be tricky, especially if we don´t have a good workflow setup between the design and development teams. Sometimes as developers we fail to understand the proposed UX design, or we misunderstand styles or behaviours when we are implementing layout structures.

Often we need to check and recheck the design, looking at each component individually in order to maintain consistency. Sometimes we need to guess the behaviour of certain elements (like the hovering behaviour of links) because nothing was defined in the design about the behaviour of specific elements.

Having a good foundation and structure defined for the projects is very important. It facilitates development as we know exactly where to go to review certain information. As we always use the same structure, we are able to jump between projects easily. No matter which project we are working on we know where to go to find the defined styling information we need. How do we define the best process for our workflow to align between design and development?

Validation meetings - alignment between designers, developers and clients

Good communication between teams is important. That's why we have regular validation meetings to make sure designers and developers are aligned with the clients needs. This is a crucial part of the process where we are able to raise our hand when something is not clear, or to check the latest changes to make sure they are well implemented (especially in the middle or nearing the end of a project). 

Consistent structure to facilitate switching between projects

We always use the same structure for templates, which means it’s easy to adapt to any project as you know where to find all the main elements. The template functions as the bridge between designer and developer.

Continuous improvements for maximum performance

We follow a review / QA process. The developers are involved in projects from start to finish. This means that if we find a new feature that we can use in other projects, we implement it in the base theme and then we can implement it in all projects.

For design team:

Designs are documented in Figma which is the tool we use to manage the workflow between designers and developers. Once we have a project set up, it is easy to replicate and adapt thanks to the definition of design tokens (foundations), patterns and components.

For development team:

• Lit for Atomic Design based on web components.
• Storybook to see and show the changes, appearance and functionality of the web components.
• Tailwind for styling.
• Drupal and Twig are used to integrate components with real data.

Once we have a new project, the first thing we do is to set up the base theme and the design system. 

In the design system, we have an atomic design, which means creating a system of parts that can be joined together to create elements and templates. We can reuse these to create effective and reusable interface design systems.

With this methodology in mind, we have a basic checklist of the elements that the designers need to style. We can make updates based on the template, reducing the initial efforts resulting in greater consistency for the whole project. Learn more about the main principles of atomic design.

Once we have updated the design system with the styles for the new project (brand colours, font style, spacing etc...), we move to the next stage: applying the solutions and integrating  with Drupal to use with the real data.

At the beginning of the project, we need to understand the requirements of the client, then we adapt the design, update the components and after that, integrate it into Drupal.  

Here is an example to understand how we apply this solution and integrate it:

For example, if we have a card (web component molecule) that we want to integrate into Drupal, we need to figure out what information we want to show. Let's imagine that we want to display some short information about a blog content type. 

We can have different “types” of cards, for example, with an image, link, date, and/or with all the data that you want to show. In this case, we want to use a card where we have a title, an author, and a link to read the whole content. In the blog content type, we will use these “fields” to call inside the card, so in the case of the title of the card, we will use, for example, the “label”, and call it inside the template. And so on with all the information that we want to show.

This is how it is finally displayed:

At 1xINTERNET we have developed this working methodology to enable a collaborative flow within our team to build projects in the most efficient way. We adopt a collaborative design process and foster communication and collaboration between designers and developers during the entire project life cycle. With this proven approach, we´re able to achieve:

• Good communication: having good teamwork is the base to have a successfully executed project.
• Stability: designer and developer are working together in synchronisation. 
• Structure: with a good structure based on templates, we can change, update and find out what we need, this means that our code is maintainable and reusable.