5 Tips for a Successful Design Handoff
We know that the interaction between designers and developers isn’t always the smoothest, which in some cases can make the whole design handoff seem like a scene straight out of Game of Thrones (ok, this might be a bit of a stretch, but you get my point).
The problem is that many companies still operate within a siloed infrastructure and the handoff moment is the only time designer and developer share information.
This is particularly painful in a time like today, where user experience can make or break an app and when the ability to rapidly deliver and change an app is more important than ever. It doesn't matter how quickly designers can turn out fantastic user interfaces if front-end developers aren't able to implement them in the required timeframe.
So, to help you, designers and developers out there, give peace a chance, here are 5 tips to make you a group of happy campers:
1. Bridge the Gap
Development teams nowadays are mostly agile. However, there is generally a detachment between development and design teams which is not very agile-like.
You really need to avoid the static, one-way deliverables, which lack the iterations that will eventually give the end result a much higher quality. So, get in there! Join the discussion, get into the scrums, receive and provide feedback, try to speak their language and teach them some of yours.
Agile is all about the back-and-forth, with smaller and constant deliverables.
2. Keep It Real
This process starts with an inter-team collaboration. In a nutshell, UX clarifies the business and specific user needs, identifies the user flows and develops wireframes accordingly.
The UX team creates a high-fidelity representation on these wireframes and then development works its magic on all of it.
Therefore, UX and Front-end teams need to walk hand-in-hand. At OutSystems, we do work very closely; we sit together; we have design reviews where we trade ideas. You grow with constructive feedback. Not a single day goes by that we’re not speaking constantly, feeding and bouncing ideas off each other.
Developers do their wizardry, but we try to make their lives as easy as possible by doing all this prep work beforehand.
3. Pick Your Battles
This one rings particularly true when you’re designing for B2E (business-to-enterprise for those of you who are new) instead of B2C which is a whole different ball game, in terms of design.
In B2C, you can go crazier, designing every detail, because you’re trying to woo users with your application. Every screen matters.
With B2E, you need to focus on the main use cases, so you need to get ready to win some, and lose some. You should focus on the fights you really need to win, as those will define the rest of the project. Don’t bicker over things that are not so important, focus on the critical user path because that’s what will deliver more value.
Imagine this iceberg is your project.
You’re designing for the tip of the iceberg — the main use cases. But you can do it so it positively affects the part of the iceberg that’s under the water.
Does this seem too much like common sense? That’s because it is.
If you set foundations, in the form of a style guide for instance, that developers can work on when they’re usually left alone, their love for you will grow accordingly.
4. Think of Design as a Whole
“We’re not designing pages, we’re designing systems of components.”
— Stephen Hay.
What does Stephen mean by this?
You’re not just designing standalone pages to beautify portfolios. You’re designing components that belong to an overall design system. They have to speak the same design language and fit well together. They should be modular, reusable and scalable.
In OutSystems, you already have frameworks that help you attain this.
They accelerate the design and development processes and ensure consistency while using a shared vocabulary.
OutSystems UI is the OutSystems framework of choice for design. It allows us to create seamless experiences for web and mobile apps.
These are the advantages of using OutSystems UI:
- It’s fully integrated, so you can drag and drop UI patterns and screen templates from Service Studio, OutSystems IDE
- It’s responsive by default, so it includes ready-to-use layouts and UI patterns that automatically adapt to the device screen size
- You won’t hit a wall because you can always extend the styles of over 70 UI patterns and screen templates to customize them for your app or customer needs.
My fellow colleague and UX/UI designer Juliana Ciarlini and front-end developer João Carvalho delivered a great talk on this subject, covering everything you need to know about OutSystems UI, all the way from the basics to its advanced use.
5. Hand Over Something Usable
One of the complaints we keep registering is that translating a designer’s vision into something developers can work with is usually a chore. The tool sets they use are very different from one another and aren’t usually integrated well. It’s a game of give-and-take, but you don’t have to limit yourselves or compromise too much of your vision.
To ease the transition and provide guidance, we use InVision to map the user flow. With InVision you can also establish a simple two-way communication with developers and customers and you can leave or reply comments on any given element that is on screen.
What’s the magic step that turns a design into something developers can actually use?
This is what apps like Avocode and Zeplin do. You feed them a design and they “translate” that design into something developers can use. You can pick every single style that is present on screen and get the corresponding CSS.
And if you want to reduce your tool stack, you now have Figma that you can use to design and translate it to code with just one tool. Which is just absolutely amazing!
These very simple tips can have a great outcome and impact on your work.
Transforming that design vision into something that is consistent and reusable by developers in a project is made that much easier by following this very simple set of guidelines.
And if you want to learn more, take a look at the webinar From Design to Implementation: Front-end Development Best Practices.
