Collaborating with engineering stakeholders
Your designs are not just what is in the Figma or sketch but what goes into the hands of the user. Having said that, it becomes very important to monitor what is being shipped out; it also makes designers become an active part of the decision making process. This involves the critical part of the design delivery to the engineers. Here’s how we at Razorpay handle it.
🤝 Collaborate early
Involving engineers in the early stages of designs help them to:
1. Plan better in terms of bandwidth allocation and prioritization
2. Get familiar with the details of the projects thus helping with correct effort estimations.
It opens up an opportunity to gather more ideas and delivery perspective towards the design solution. It also gives designers insight into the complexity of coding their UI. Engineers also feel more empathetic towards the users' pain.
We have kick-off sessions where the engg team is involved from the very genesis of the project and at every milestone, we keep engineering counterparts in the loop. These are called DEP(design, engg, Product) review sessions and mostly talk about macro-level approaches of the projects, and rough details of what a user-flow will look like.
⏳Collaborate often
Collaboration never ends, in fact, one of the qualities of great teams is how seamlessly they coordinate with each other. During the complete design process, the engineering team is aware of how the final output is getting shaped up. The design should not work in isolation if it wants a serious seat at the table.
“True Collaboration isn’t throwing designs over the wall. It’s designers, engineers, and the rest of the team sharing the responsibility to build a quality product”
-Diana Mounter, Design System Lead, GitHub
🗣Communicate effectively
During the process, document every detail possible for example: When to show a notification, or how a component works in different screen sizes. This ranges from product decisions to the easing curve of the animation. It helps engineers to develop from a design system point of view. We keep a running document of design spec where this all is stored and thus is one artifact which contains major details. Engineers are onboarded on Figma from where they can extract the assets and CSS.
This is how our design spec’s delivery section looks:
This is how typical Figma pages would look like:
Try to give clarity on what is final and what is in progress and segregate out the micro-interactions which usually gets lost in long flow wise representation.
🏄🏼♀️ Be empathetic to not just users but the team too
We pay great attention to agility and being able to carve out some great solutions within the given time constraints. Hence, it becomes important to prioritize what investments in UI or micro-interactions would generate optimum value for the customers and for the business. Here are some of the evaluation criteria we found helpful. This helps us bring objectivity in the subjective realm while maintaining the pace of the project. You can read about the RICE model here and value v/s effort here.
At Razorpay designers take a final look at the output and make sure that the outcome is as it was desired. In this design<>Frontend reviews, things do come up and that’s a part of the process. Learning how to handle those and driving the decision to closure is a crucial part. Here’s how we communicate at this stage:
😅 And, don’t forget to follow up
It is a utopian scenario where we would not end up having any discrepancies, despite all the efforts sometimes we have to take tough decisions based on the timeline and the depth of the problem. But, we ensure that the UX debt doesn’t get lost in the process. We maintain a Jira epic of the Design Frontend backlog wherein we note the debts and prioritize some parts of them in every sprint. Depending on the urgency of shipping and effort of building, we may want to design a short term and a long term solution
I hope this post was of help and gave you direction towards dealing with the engineering stakeholders. To know more about Razorpay Design, do follow us on Instagram and Twitter.
Many thanks to Kshipra Sharma for providing helpful feedback on the article before publication!
