From a designer's board to a developer's backlog

Megha Damani
UX Collective
Published in
4 min readOct 31, 2019
Illustration by Cristina Paleari

While designing, we think of what the user should see on the screen, what is the feedback on the click of a button, what the backend response should be for notifications and emails.

But often times, these details are lost in delivery and/or are not communicated to the developers as a part of it.

This means that the development team then decides what the feedback and response will be, leading to bad user experience.

How do we communicate to developers the interactions of a digital platform for an ongoing iterative and evolving design?

Designing flows, wireframes, interfaces to user interactions are not the end-all for UX designers. The next steps of delivering those designs to the developers (in an agile methodology), is where the hurdle lies.

It's important we learn to write user stories for developers - which includes writing for all possible interactive scenarios. From here would begin the journey for a developer.

(So here we go… )

1. Detail your interaction

Do not assume others know what you have in mind for every interaction.

We imagine with the changing online world, some interactions are standard. Well, the changing world is very different for designers and developers! (We have to learn trends from each other). How can we share our interaction ideas?…

Draw flows for small sections that could have multiple outputs for a single interaction.

A simple flow diagram is a great tool and you don’t always have to create Screen flows.

And if you do, Not every screen has to be a high fidelity design.

What makes a good user interaction flow:
A. Draw flows from the user’s perspective and not the backend.
B. Each point should be defined on how the user would view, receive and perceive the information.
C. Draw buttons and pages with the relevant text (and not always Lorem Ipsum) to show what the user will see in the UI.

Sketch Resources:
Basic Flow Template Sketch Resource

Screen Flow Kit Sketch Resource

Now that everyone understands the basic flow, Let’s start writing the user story!

2. Break down the features into multiple user stories with responses

Microsoft Visual Studio. Using these tools helps rather than creating pdfs and excel sheets.

Use your Information Architecture and Site map to create a list of features and sub-features. This will help you create the user stories that developers can use for their backend systems.

Pro Tip: Use each action as a sub-feature / user story. This will make you think about the different feedback that the user will/should receive.

Creating PDF documents or even Word Documents is a good way to communicate. These steps can change and modify depending on your team or also depending on an individual project.

3. Be more precise about the interactions… Write them down

By this stage we already have an understanding of what and where the users hesitate using the UI, not trusting the backend performance, unable to understand what to do next, and so on…

This brings us to another most important element: UX Content! The UI is just one of many interfaces.

Detailing these out to the developer is going to save a lot of time creating the “UX & UI fixes” document.

This is the moment where we work as a team: the UX hero, UI ninja, Content Genius and the Developer Wizard!

Our project team used Visual Studio. I learned how to use it by doing this activity…

No one remembers what we were discussing during meetings. Writing it down, makes it easy for the developers to be on the same page.

A: Write down the backend actions to be performed. If possible add in the content text as well:

On click of this button send an email to Owner.
Content: “John Doe has added you as the Owner of an account ‘XYZ Medium’. Accept the invitation to activate your account in the Customer platform.
CTAs (call to action): ‘Accept Invitation’ ‘Decline and send reason’ —
Footer: ‘Activate your account’ (Discreet CTA) to access your profile.”

B: Mention all the feedback that the user receives if the action is successful, unsuccessful, partially filled, etc. ( All the things we decide during our wireframing and UI design)

  1. Owner Accepts: Send a platform notification to the account creator.
  2. Owner Declines: Send an email and a platform notification to the account creator; In the platform open a pop-up for the creator to add a new owner;
  3. Owner Has Not Responded: Send a reminder email to the owner

Bonus Tip: Mention the subtle changes that the UI should perform: micro-interaction for on-hover states, awaiting-response state, complete-response state, etc.

You can reach out to me on Linked-in! Or even drop a mail to get in touch :)

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Megha Damani

Design, Foodie, Music, Roaming around and some more Designing! :D :D

No responses yet

What are your thoughts?