One of the most critical phases of Software Development Life Cycle (SDLC) is the handoff between the design and development teams. Often, this process does not go as smoothly as planned due to a disconnect between how these teams operate.
This blog post will help designers and design directors understand how to effectively pass their design materials to the development team.
The design-to-development handoff takes place once UI designs have reached a stage where the developer can transform them into a usable product. The transition from design to development needs to be seamless and effective to ensure that the product team's vision becomes reality without any hangups that may arise due to ineffective communication between the designer and developer.
In short, a poor handoff will force both designers and developers to revisit the aspects of the transition that were unclear or misunderstood by the development team. This can lead to project delays, missing product features, and wasted effort redesigning the app, which could divert the designer's focus from other ongoing projects.
Here are some of the areas in which developers usually spend more time than necessary following a design handover.
Designers should ensure total consistency of font, colors, font sizes, and other elements throughout the design. For example, imagine that a “Submit” button has a size of 10px on one screen and 11px on another. The developer may take it for granted that this was as communicated with the client, thereby applying different font sizes. However, it is possible that the designer has accidentally used an inconsistent font size across screens.
The designers should give an in-depth explanation or clear indicators of the interactions for every clickable element in the design. This will make it easier for the developers to code the application without spending considerable amount of time trying to understand what will be the next action after an interaction is performed.
For instance, consider a use case where the user has to give a quick test after completing a lesson on a Learning Management System (LMS). The design screens created are as follows:
Screen 1 outlines all the questions and option choices for the test with a "Submit" button at the bottom.
Screen 2 outlines a dialog box where the user is asked for a confirmation on whether to "Submit" the test or "Retake" it.
Screen 3 outlines the completed questions and answers displayed for user review with a "Proceed" button at the bottom.
In this scenario, the ideal screen interaction would be:
Screen 1 - Screen 3 - Screen 2
However, if not explained properly, the developers could possibly mix up the interactions as Screen 1 - Screen 2 - Screen 3.
Animations are always tricky to code. It is important that the designer creates a well-written specification highlighting the details of the animation like timing and nature of animations used, including examples of similar animations if needed.
All the screens designed should be named consistently and in a manner that is easily interpreted by the developers.
Communication is the key ingredient for success in a design-to-development handoff. Here are a few ways in which communication can fall short at this stage.
Developers use technical jargon, which might be difficult for a non-technical person, or, in this case, a UI/UX designer, to understand. The inverse is applicable for the designer as well. Jargon that is not understandable may be reflected in incorrect product development.
How to fix this: Work in "builds." The developer should showcase his work to the designer on an incremental basis and get timely feedback to avoid significant rework. Moreover, the designer should be as explicit and detailed as possible during the handover meeting.
It often happens that the client has certain design expectations from the project that the design team is willing to support. Later, during the development phase, the feasibility of converting this design to code is found to be unrealistic.
How to fix this: Make developers a part of the initial client calls where expectations are set around the design of your app. The developers can chime in if a particular design cannot be accommodated.
Often, while following an agile methodology, feedback is received from the client on the fly. The design team is asked to make tweaks to a particular screen and the screens are finalized on their end. Unfortunately, these changes are only conveyed to the developer after final client approval is received. This presents a risk where the newly approved design changes are not feasible to implement or may take longer than expected to code.
How to fix this: It is important that the developers know about any major changes or feedback by keeping them in the loop in all communications with the client. This will enable them to incorporate the required changes in a timely manner.
Automation can accelerate your entire designer-developer handoff process. This not only eliminates the potential for miscommunication, but also ensures that development timelines remain on track. Here are a few key benefits of this approach.
Design handoff tools will translate each layer of design into code. The required code like CSS, Swift, or Android XML can then be used by a developer as a baseline for developing the app/website.
Additionally, a number of cloud-based design platforms replace design documentation with a single URL where the developers can find everything they need to start coding. This eliminates the need for designers to manually write the design specs for every layer in a design document (redlining), which often may be confusing and lead to endless discussions with developers.
Automating the design handoff ensures that all your designs are updated in real time. These design changes are also reflected in the code, such that the code, specs, and assets generated in the handoff tool reflect the latest version. Thus, developers are not working with an old version of the design that can cause miscommunication issues.
Since the developer can inspect the finished design, layer-by-layer, they get a holistic view of how the end product will look. Cloud-based design tools facilitate clear communication between collaborators, and developers can take advantage of this to raise any doubts or suggestions that they may have with respect to the design. This ensures all collaborators are clear about the design objectives.
Examples of tools that are a good fit to automate this handoff process are Zeplin, Marvel, Avocode, and Sympli. Most of these tools seamlessly integrate with widely available design platforms like Sketch, Adobe XD, Figma, and Photoshop.
Modern design platforms are a great way to save time and ensure a smooth workflow. However, there are still some obstacles to be considered while moving your work from an automated platform to a conventional coding environment.
Take Figma, for instance. Currently, Figma supports CSS, Swift, and XML. The code for a design involves only visual properties and spacing. No Javascript or other logic is exported while trying to move to a conventional coding environment. Thus, designers and developers need to work collaboratively and shortlist a tool that best supports their approach to converting design into code.
Let's cover some specific steps that you can take to minimize the amount of friction that you experience in the design-to-development handoff.
If your design-to-development handover is done by an automated tool, the developers should ensure that they spend adequate time exploring the tool and understanding how to leverage it. It is possible that all tools do not cater to high-level automations. The developers should have a plan in place to mitigate these situations and clearly chalk out a path to be followed to avoid confusion in developing the product.
The key to a successful handoff is timely communication where designers can give feedback on the initial builds. Whether it be an Agile methodology or a Waterfall-style approach, designers and developers should ensure an adequate process to convert design into code.
Here are some quick checks that will indicate that you are on the right path.
Above, we've covered some key ways to ensure a seamless design-to-development handoff using third-party tools and operational improvements. However, did you know that Crowdbotics can help you go from design to development right now?
The Crowdbotics App Builder offers a WYSIWYG environment for importing designs, tweaking them, and generating real React Native and Django code. Moreover, our managed app development teams are experts at taking your design files and rapidly converting them into working products. Get in touch with us today to learn how we can provide one-off or long-term design-to-development support
Nakul Shah
Originally published:
November 18, 2020
