The perfect Design Handoff workflow for Small Businesses

Whatever the digital product, design matters. And design by extension goes onto User Interface and User Experience. Yet, how do we bring these experiences to life? By developing them of course and that’s where the Designer-Developer handoff figures.

As Designers, we have the power to transform abstract ideas that have the potential to change the world into digital products that people would love to use. To do so, we have several design processes to craft outstanding User Experiences for the user.

But, have we ever thought the Development Experience that the developers would go through to actually bring a bunch of design screens to life? Paying attention to UX of the developers while developing the app is just as important as the UX of the people who will use the app.

At Skcript, we are a small team of extremely talented designers and engineers specializing in Frontend, Backend, Mobile Architecture, AI, Blockchain et al. With a varied set of engineers, their requirements for bringing the designs to life will be different.

With that in mind, we talked with each of our engineers to understand how they expect the Design Handoff should be so that they can have a smooth Development Experience.

Frontend Team

Praveen Juge

Being a designer + frontend developer, converting the designs to code is much easier for him. Being accustomed to Sketch for quite sometime, Zeplin isn’t quite necessary although the CSS code snippets that Zeplin throws up is useful for him at times. As he focuses mostly on web development, it’s easier for us designers to hand off the design. We only send him the Sketch file and he takes care of the rest from exporting the assets, following the correct naming convention, compressing the assets for optimal load time and to the extent of suggesting design improvements for optimizing load times!

Takeaways:

• If you have a frontend developer in your team who is also a seasoned designer with proficiency in Sketch, your design handoff will be much easier. Just handing over the Sketch file would most be necessary. If needed, you may be required to send over the mind map and User Workflow Diagrams for further understanding.
• If the Frontend Developer in your team has his sole expertise in coding and doesn’t use Sketch, I strongly suggest you to use Zeplin for handing over the designs, MindNode for creating Mind Maps, Dropbox along with a proper file structure for syncing assets and Paper for your documentation needs.
• Whenever special micro interactions are necessary, we use Principle for Mac as it’s extremely easy to learn and use. Moreover, it supports interaction design for Mobile, Web and Desktop making it a great all in one package.

Backend Team

Swaathi Kakarla

As Backend engineering is more geared towards structuring the database for efficient fetching of data with queries, she mostly focuses on the data points that are presented in the design. This is to come up with efficient database queries to fetch the data whenever necessary. And, the data points presented in modals is important as well because it can only be loaded when the user opens up the modal.

As she focuses mostly on the data points, we document all the data points that go into each page from the Mind Map and User Workflow Diagrams. This way the backend work could commence even before the Wireframe and UI designs are ready.

The User Workflow Diagrams are extremely useful to her as it clearly maps out the workflow of the user in a flowchart format thus making it easier for her to map out the flow in the backend.

Takeaways:

• Make a document containing all the data points that goes into each page from the Mind Map and the User Workflow Diagrams. Although this sounds amazing in theory, what we learned is that it’s quite impossible for us to document every development requirement without missing a few things. Hence, there will be some kind of trial and error that goes into creating such a document for the Backend team.
• Apart from using the User Workflow Diagrams for the User flows, an interactive prototype would be much easier for the backend team to understand the same. Since it comes towards the end of the design process, the User Workflow Diagrams will set a basic yet solid base for the backend team to work on whereas the interactive prototype would be able to iron out a few rough edges.

Mobile Team

Dikson Samuel

Being the one-man-army mobile developer, we try out best to make his life as easy as possible during development. With Zeplin being the go-to tool for him to view the designs, we make sure we have two sets of designs. One for iOS and the other for Android. We ensure that the assets that are shared follows a proper naming convention thus making it easier to use them during development. Interactive prototypes are also shared incase there is some difficulty in understanding the workflow.

Takeaways:

• If your mobile development team is using React Native to code, export your Sketch projects as Web in Zeplin as React Native uses pixels (px) as its unit of measurement. The designs will come out pixel perfect in this case.
• Sharing an interactive prototype will be useful as it’ll be easier to understand the workflow. You could also share the Mind Map and the User Workflow Diagrams if there are time constraints and complexity in creating the interactive prototypes.

Program Management Team

Pankaj Harita

Being the sole source of communication with the clients, she ensures that the clients get the designs delivered on time and on a platform that they can understand and use easily like Allt. The private share link on Allt ensures that no one else other than the stakeholders can view the designs to maintain confidentiality.

To ensure that the decided features are reflected in the design, she maintains an SRS document that contains all the features in a well structured manner that everyone in the team as well as the clients will be able to understand.

Takeaways:

• Use Allt, Google Drive or Dropbox to share the designs with the clients. If interactive prototypes are required, Invision is the best choice.
• Feedback from the clients is just as important as the internal review that goes on. And, it’s important that the designers are informed about any changes that must be reflected in the design. You may use Allt as your go to project management platform like we do.

There’s no one size fits all for Design Handoff. It depends on the size of the team, whether the development team is remote or in house and a lot of other factors. This is what best works for us and we hope you learned a thing or two from the way we do Design Handoff.

Up next