These types of situations arise when "design" and "development" are understood as two distinct processes in the creation of a digital product.
Thinking of the design process (UX phase, UI phase) as something independent of the development process can only lead to mediocre results, whether you work on projects built from scratch or implemented at a later stage.
Why? Well, it is very simple. If the team takes a project at an advanced stage, the developers will have to deal with legacy code, infrastructure, and/or time constraints that often hinder the correct implementation of design proposals. But even taking a project from scratch, the team might face changes in the client's business model that may involve turning the wheel very quickly in another direction and having to adjust many workflows, designs, and components that will successively impact the code built by the development team.
To this, we must add that not all developers have knowledge of UI design, and what a product designer sees as a clear sign of substandard implementation, a developer might not see it.
Of course, this is not the developer’s fault. Often, product designers send proposals halfway or do not take into account technological limitations, delivery times, or resources available on the equipment.
6 good practices between design and development
As product designers, we have in our hands the mission of ensuring the consistency of the product. We can see ourselves as a facilitator in times of tension between the client's wishes and the development process, always looking for the best solution for all the stakeholders in the product.
Over the years, I have managed to identify these "good practices", which have helped me improve the relationship between design and development. Now, as a Product Designer at Fullstack Labs, I've employed them in practice and even taken them to another level. Here, at Fullstack Labs, we work on incredible projects that lead to very interesting technological and professional challenges.
Here are six practices that have helped me maintain a positive connection with the development teams I've collaborated with.
1. EVERYTHING about the design should be explained
The person in charge of product development, like everyone else, must create a "mental map" of how everything is structured. For example, what happens when a user first opens the platform, what happens when a user clicks on a specific button, how to navigate to a specific page, how information is presented, and how to return to a previous step in a process.
What's the best way to approach it?
There are various elements to consider in order to solve this, including:
- Create clear information architecture and incorporate feature maps, user flows, and other visual aids if possible.
- Make an interactive prototype that is as close as possible to the final platform or application.
- This will also help identify difficulties or gaps with the developers that can be addressed during the design phase, avoiding labor and patches later on.
2. Don’t leave anything to chance; plan for all potential scenarios
I must admit that this is something I forget from time to time. We often stick to the "regular state" or the "easy way" while building an application, forgetting what it's like to hover over the various links and buttons. When the system is loading, what will we show? When the system is starting to load, what happens? How and where are mistakes presented when a user clicks on an input? How many states can one view have? and so on.
If these aspects aren't defined during the design phase, developers may be forced to "create" them as they move forward. They will certainly be forced to use an existing framework or its specified states that must be established somewhere, but not owing to bad faith or laziness.
You, as a designer, must take a broad view of the project and address all of the details that others will overlook.
What is the correct way to solve it?
The most efficient method to deal with this is to establish a solid UI kit that will enable you to avoid leaving any loose ends in the design. Additionally, it serves as a comprehensive reference for the development team on how the interface's components should appear.
3. Do not use "Lorem ipsum" in your designs
Due to time constraints or other considerations, designs are sometimes sent to development that is complete but lacks the texts, or interfaces that provide data with texts of varying lengths, and if they are not there at the time of design, they can break the designs when the full texts or data are ready. The texts that must be included are frequently longer than what the design initially supported, so the proposal is usually returned to the design team.
As a result, the designs are tweaked. Consequently, time will be consumed, and the project's delivery may be delayed.
What's the best way to handle it?
Making wireframes with a general notion of what material will go where and what character limit they can have is a useful technique. This can be supplemented by a Google Sheet in which screenshots of the wireframes are connected and cells are placed in front of each block of text, with a brief description of the type of text and the maximum number of characters allowed in the design.
Meanwhile, you can utilize plugins like Typeout, Random Names, or Faker from Figma and Adobe XD to help you replicate texts.
4. Maintain a consistent space and color scheme
This point is related to the previous one. They'll construct variables with the colors and spacing in development that are reused throughout the project, ensuring consistency and speeding up development.
The development process will be slowed if the design has shades of blue that are "similar but not the same," as well as irregular margins, padding, or spacing. The final design will lack consistency.
What are the best options for dealing with this?
A style guide should be created with all of the colors, sizes, forms, and spacing that will be employed in the design to ensure consistency. Using the golden ratio in interface design is a simple way to implement these criteria. This ensures that the user interface is visually and functionally consistent, resulting in intuitive designs that allow users to understand how they work simply by looking at them. It also allows the development team to focus on the most critical development issues while following these standards as a safe and stable path to product finalization.
5. Team sense and mutual respect
Working in a team where both parties do not respect each other and are continuously in a state of mutual disapproval is really challenging. Each member of a work team has unique abilities and strengths. Respect comes from being able to "let go" of our significant portion of the task and hand it over to another member of the team so that they can continue and take it on as their own without hesitations or questions about their ability to do it successfully.
When I say "team sense," I don't mean "I've done my part and now I'm giving up," but rather "we're all rowing to the same end." We have a better chance of succeeding if we are all in the same boat and row in the same direction. If we don't, we may find ourselves going in circles, enraged at each other. And, unsurprisingly, the end outcome will be unpleasant.
How do we solve it?
If you're part of a team, you should strive for everyone to be proactive and ensure that a collaborative and respectful work environment is fostered. Figures such as the Agile Coach and Scrum Masters are frequently present to assist in the promotion of these dynamics and a positive team environment.
6. Design Handoff
Design delivery is a stage in the product development process where the technical team implements the completed design. It is essential for a successful transfer to have effective collaboration between the designer and the developer. However, this stage does not always proceed as well as it could.
What’s the best way to solve this?
The first phase is to set up a handoff meeting in which the Hi-Fi Prototype is exhibited, as well as browse through all of the platform's functions and address any worries or concerns of the development team that will be taking on the project.
This is meant to provide developers with everything they need to get started:
- The exported assets are icons in SVG, optimized images, animated gifs, etc.
- Map of Platform Features
- User flows
- functional prototype
- UI Kit, Design System, or Style Guide
- Other technical specifications:
To all of this, you can add design documentation that supports all of the application's workflows in text or video format. The more detailed this documentation is, the easier and more efficient the development team's implementation will be.
Because changes are common during development implementation, it is critical to ensure that design and development are in sync, as well as to conduct thorough UAT Revisions. Finally, conducting Design Reviews ensures that each development output satisfies the design's criteria and quality.
I believe you have already deduced that this working relationship is a two-way street in which designers and developers must collaborate, knowing the process as a whole and working together to produce the greatest results, outcomes, and, of course, to develop a successful digital product that best matches the end user's needs.