How to collaborate and conquer when creating digital experiences

More and more brands are unlocking the potential in digital products as an integral part of their offer. Now, consumers not only demand consistently high quality, but a seamless experience across their work and personal lives. And it jars when something falls short.

“Your smartphone is used for everything from making payments, to socialising, to ordering a taxi, to taking photos,” begins Joel Miller, product designer at Figma. “These devices are ingrained in everyday life and essential for completing daily tasks. When something is used so much, our expectations of its capabilities and quality increase. The baseline of what is ‘good’ increases and the standard shifts.”

As Miller points out, it’s common to transition from smartwatch, to mobile, to tablet, to large-screen desktop in any given day – and we expect smooth, unbroken services. “Instead of competing on the feature level, which you could argue is developer-led, software starts to shift and compete on the experience level – which is more design-led,” he adds.

To get this balance right and stay ahead in a fast-changing market, designers and developers must form a united front based on mutual respect and minimise the chance of anything getting lost in translation.

Establish a design system

“Miscommunication happens by default because of the tools used,” suggests Miller. “Designers have historically used visual tools that allow them to explore in a freeform way with little constraint. Developers use code that is intentional and built around logic. By nature, these two things conflict, leaving designers and developers with different levels of expectations of how software should be built.”

The solution: a design system that can bridge the divide. “This is a complete set of standards intended to manage design at scale using reusable components and patterns,” he explains. “By bringing the design and code worlds closer together, we can reduce miscommunication.”

Without enough preparation, teams may fall at the final hurdle. “In the past, I’ve noticed developers filling in gaps when it comes to animating designs or load states,” says Alex Harding, head of design at Made By Many, which has developed digital products across a broad range of sectors for clients such as Carlsberg, Colgate, the V&A and Nando’s. “Why? Because it’s not been properly defined beforehand. Designers should spend more time documenting or prototyping this, so it’s not forgotten.”

At the heart of any useful design system are elements that can be reused to create and manage consistent designs across projects. “As you build out your design system, you’ll find a need for components that are similar to each other, with only slight differences,” Miller continues, giving the example of buttons with varying states and sizes, which can be created and managed using Figma’s Components tool.

These can be grouped and used to create dynamic layouts that grow to fill or shrink to fit, reflowing as content changes – following similar principles to CSS. “Whether coding or purely visual, design systems break down design in a structured way,” adds Helen Fuchs, executive director of design at digital product studio ustwo. “It’s a great meeting point for developers and designers to establish rules and talk about them.”

Pay attention to the details

According to Ana Oliveira, senior product designer on Fuchs’ team at ustwo, it pays to make technical information as well-organised, easy-to-find and context-specific as possible. For instance, with Figma’s Inspect function a dev can jump straight to the specs required for any specific element – and if all its variants are already stored within the design system, the build process is clearer and smoother too.

“It’s helpful to create a separate page for handoff,” suggests Miller. “Give developers just the screens they need, and name it ‘Ready to build’.” To ensure consistency across projects, he advises building a starter file template – including pages for research, inspiration, exploration, components, and handoff. “That way developers get the same collaboration experience, whoever they work with,” he adds.

“Little tricks like these save time for both devs and designers,” agrees Oliveira. “It’s always good to share knowledge, and onboarding is definitely easier when you can just send a Figma link, rather than having to upload things to separate programs – which gets cumbersome and confusing.”

Keep all eyes on the prize

The best digital products provide a genuinely useful service, but they’re more than just functional: they become a pivotal part of how consumers engage with brands. “Often the product is the face of the brand,” says Fuchs. “You’re connecting with it every day, so it needs to connect emotionally too.

“In design there’s this notion of the ‘big idea’; a big creative thought,” she continues. “Product design, by comparison, is very pragmatic and iterative. It’s heavily based on utility, research, and testing. But if that’s our sole focus, we’ve missed an opportunity to differentiate and connect emotionally. It can be important to hold onto a big picture, a North Star, so we know where we’re headed.”

“There are moments where you need a creative concept to carry it,” Fuchs continues, giving the example of a digital product that ustwo produced for The Body Coach. “We wanted it to feel like a feel-good battery powered by you,” she explains. “That helped us keep an energetic feel in the visual expression.”

Sometimes, Fuchs concedes, a big idea isn’t needed: she gives the example of a B2B healthcare product for clinicians who need to study data sets. “Then it’s just about being super clear and precise, delivering information at just the right moment,” she says.

Harding adds that sometimes being too fixated on a big idea at the start can drive everyone in the wrong direction: products need room to evolve throughout the making process. “Usually we have a big vision, but a deliberately fuzzy idea about what that means, along with some hypotheses and ideas about how to test them to see if they’re true,” he says. “We start with the premise that we don’t know the answer.”

Keep your process fluid

While establishing rules and systems makes it smoother and more efficient to build digital products, it’s crucial to factor enough flexibility into the overall process to avoid the team becoming too blinkered.

“Our process is not linear at all,” reveals Fuchs. “We work as cross-functional teams: it’s not a waterfall process of designing and handing it over. That interaction, those trade-offs, are what makes it so effective. So much of it is about people, dialogue, and collaboration. Easy to say, hard to do.”

It’s a similar story at Made By Many, where core teams include product managers, designers, technologists, strategists and QA. “We don’t believe in a conga-line approach,” agrees Harding. “Healthy collaboration between designer, strategist and developer creates a stronger end-product.”

While Fuchs acknowledges the rise in ‘designers that code’, ustwo maintains two distinct disciplines. “That said, there’s always crossover, and we try to see things from each other’s perspective,” she adds. “There’s great respect between design and engineering. Everyone wants to ship and is motivated by getting something out. It brings everyone together.”

Figma is a design platform for teams who build products together. Born on the web, Figma helps teams brainstorm, design and build better products – from start to finish. See for yourself, Figma Starter is free – forever.