Handing designs off to developers

About the project

My role

• Working collaboratively with developers to solve problems and find efficiencies.
• Establishing an annotation system to help speed up development.
• Writing acceptance criteria, in the absence of a product manager.

Time period

February 2023 – June 2024

Team

• UX UI designer (me)
• 2-4 full-stack developers

1. Preparing Figma for developers

Creating true Figma components

After the key designs of the website redesign project were created, I set up proper Figma components as part of a detailed design system.

Writing annotations

I took time to establish an annotation system to explain design decisions like interaction states, behaviours and animations as clearly as possible, to make development as efficient as possible.

Creating user stories

I then wrote these up as acceptance criteria in Azure DevOps using Given-When-Then structure.

This helped make sure that accessibility and functionality expectations were set for the later testing phases.

2. Revising designs

Finding design compromises

For me, part of a UX Designer's job is finding design compromises to keep development as fast and lean as possible.

For example, when a developer cautioned that adding complex sorting functionality to a component would take considerably longer, I decided to check whether it was truly necessary, at least as part of the MVP.

I analysed some data and concluded that this functionality would be overkill for three-quarters of scenarios.

Designing solutions quickly

I quickly mocked up a simplified version with no sorting functionality, using components from the design system, to see how it would look:

It only took a few hours for me to create the new mockup and think through the logic, but it saved many hours of valuable developer time – and (importantly) it shouldn't have a negative impact on the user.

To make sure of this, I arranged for the component to be covered on an upcoming usability test.