Imagine a world in which engineers were part of the design team. If engineers saw the product — and the customer — the way designers do (and vice versa), overcoming challenges becomes much easier.
Companies are composed of engineers, marketers, executives and everyone has an opinion on design. Social media, devices, and world views have all changed the way we look at design. So how do we all play together, nicely?
What follows are aspirational and highly useful approaches to connect engineering and design. Like everything in product development, they are a work in progress.
First, let’s walk through a quick definition of design. Setting context is critical because design directly impacts how we work with others.
The definition of iterative design
At its core, design is iterative problem-solving for people.
The word iterative is an important qualifier: it’s what keeps us humble. Designs won’t be right the first time and are a never-ending process as things evolve and change.
If we don’t have an audience in mind or aren’t explicit about who we’re designing (and engineering) for, many things get lost along the way. Since design is iterative, it shouldn’t be a mystery to the rest of the team, especially since engineering solves problems all day long.
We’ve collected ten ways to create synergy between design and engineering, in the hopes of bridging some much-needed gaps.
FullStory’s Digital Experience Intelligence solution brings disparate teams together by acting as a source of truth for customer experience data, making decision-making easier. Reach out to us for a free demo to try it for your team.
10 ways to bridge the gap between engineering and design
1. Engage with engineers early on
Fundamentally, engineers are pragmatic in that they solve problems and make things work. The earlier the engineering team is involved, the quicker constraints and frustrations will become visible.
When it comes to the digital experience, engineers look at errors in a different light than product management and design teams. While the team is concerned about aesthetics and optimization, engineers are focused on the system working correctly.
Sit with the engineers—early on. Listening to your team’s conversations is the easiest way to soak in knowledge, to get to know the product’s hard edges, build relationships, and bridge gaps.
A helpful tool is a Digital Experience Intelligence (DXI) solution like FullStory. When engineering is a part of the early process, the faster the designs get into the environment where the customer will interact on a browser, mobile device or tablet. The team will be able to see on-page signals like Rage Clicks or Dead Clicks, for a quicker resolution.
2. Be the backend engineer’s BFF
Your backend engineer is your best friend.
They can help understand how the app’s infrastructure works, and the process of how tasks occur. They know how the sequence of events from a button-click on the front end affects the back end.
Ask the questions that a customer would ask, talk to them about the process and be mindful of their answers. A great way to do this is to take some engineers to lunch and pick their brains.
3. Provide efficient deliverables
Deliverables can be an easy place to figure out how to better engage with the process.
Delivering a final design as a stack of slides or a PDF, something the developer could click through, sounds good in practice. It’s how users experience the app: a series of screens, never seeing two different states at once. But it’s not conducive for working with the engineering world.
Instead, present the various states of the interaction design side by side on a single canvas, it’s easier for everyone to see connections. It also means fewer files, since every state is contained in one PNG or PDF.
For customers, a DXI platform like FullStory sees the design and engineering all in one and in action with session replay. Even during the design process, this has oodles of benefits for the product roadmap.
4. Have a modular view
The context of the app is important for all parties involved. When the entire app is shown in context in every state, all the details tend to wash away and get overlooked. Showing them too much may lead to details being skipped.
FullStory’s DXI platform dashboard can be used to invite teammates to your workflow. As a part of the onboarding flow, or permanently in the settings, you can remove all the surrounding context of the app, and allow the team to think of the areas where actions could be useful.
When looking at things from a modular point of view, the right role fits into the process at the right time. Being transparent about the workflow and looking at it as a vignette helps to discover that insight.
5. Use code in your creative toolbox
Code is beautifully unforgiving: it either works or it doesn’t. Thinking of code as another tool in your creative toolbox can be immensely useful in broadening your understanding of a problem.
In the design process, there are a lot of tiny puzzle pieces to work with and it can become difficult to see how they all fit together, whereas coding gives a chance for engineers to step in.
For example, a problem may begin with high-fidelity mock-ups and wireframing, only to return to pen and paper. At times, there is a longer slog of problem-solving in design, when there may be a quick win with code.
6. Swap meetings
You can’t be the only person on your team who understands customers and still expect your team to agree with every decision made, especially if the “problem” isn’t something inherently broken.
Invite the engineering teams to sit in on usability studies together. It may be an effort at first, but once they sit through one session, they’ll be hooked and want to watch the next round of studies.
At the heart of this process, it’s about sharing empathy and the ability to expose everyone that we work with to the feelings about the product. Taking the time to care about how others feel keeps the mind open to other valuable insights and viewpoints, which can lead to better decisions.
7. Stick around until the end
It’s not ideal to wash your hands of something and say, “I’ve done my part, it’s on you now.”
Inevitably, towards the end of a project, some new constraint or other will become apparent to your team which could have been circumvented if you had only kept your hands on the work.
This extremely apt tweet from Responsive Design sums it up: “Thinking of design and implementation as separate concerns impact the quality of both.”
8. Cozy up with constraints
Creativity loves constraints, and there are a lot of ways to impose constraints on a design.
Set a deadline
Give the problem to fewer people
Have a chat with engineering
When you’re explicit and upfront about all the weird corner cases for a given interaction, it can lead to a design breakthrough, and due to the way engineers work, they can help you short-circuit the discovery of those constraints.
The irony is that with code, it’s typical to check for the edge cases first. With design, you usually get to them last—so cozy up to constraints.
9. Make decisions just-in-time
The just-in-time philosophy stems from the agile development movement. In essence, it’s about waiting until you have real information before a decision is made about a problem with a lot of nuances.
With complex problems and uncertainty, committing too early to a solution could lead to unhealthy assumptions. Deferring until there is tangible evidence lets you make decisions centered on something real.
With a DXI solution, digital insights are tangible enough to make decisions based on customer experience alone.
Team synergy: include, inform and accept
A solid design process includes, informs, and pushes team members in the same direction. The key to creating an atmosphere of acceptance for design and engineering is to get everyone at the same table.
Maybe you have some of these tips in practice at your company, or maybe you’ve learned some new ideas. Hopefully, some takeaways are to engage with your team members early on, sit in on each other’s meetings, listen to different viewpoints and use technology to bring you together.
With a Digital Experience Intelligence solution, UX designers can make improvements by providing visual evidence about frustrating customer experiences and qualitative data all in one place. Reach out to us to request a demo for your team.
