Design Meets Dev: How Collaboration Shapes Better Digital Experiences

At Mercedes-Benz.io, crafting seamless digital experiences means more than just writing code or designing interfaces - it means building together. Between design systems and frontend logic, wireframes and production, pixels and components, there’s something deeper at play: a continuous dialogue between designers and developers.

To explore one of the many ways we collaborate to build digital experiences, we sat down with three MB.ioneers who know the handoff isn’t a handoff at all. Experience Designers Inês Marques and Mariana Finkenauer, along with Frontend Engineer Raphael Marques, walk us through how they work, communicate, challenge each other, and why this partnership is essential to shaping user-centric digital products**. This doesn't happen solemnly between experience designers and frontend engineers, but it is seen throughout many roles inside our company.** 

The magic is in the overlap, not the handoff

For Inês, collaboration starts with how we define it. “Design and development aren't two separate steps,” she says. “We create together from the beginning.” That co-creation often begins before there’s even a visual to look at, in conversations about purpose, goals, and user needs.

“The sooner we talk, the better we understand each other's context,” Raphael adds. “For example, what’s technically feasible, what we should challenge, and what we should simplify.”

This early sync isn’t just a nice-to-have, it’s a critical moment for alignment. “If I understand the designer’s logic from day one,” Raphael explains, “then implementation becomes smoother, and more meaningful.”

Mariana reinforces this: “When we co-create, we avoid the 'surprise effect'. No one wants to reach the dev phase and realise that the design isn’t realistic. Working side by side allows us to bridge that gap early on.”

Translation is part of the job

It’s no secret that design and engineering sometimes speak different languages. But at Mercedes-Benz.io, that’s not a blocker, it’s an opportunity to learn.

“As designers, we have to translate ideas visually,” Mariana says. “But we also need to translate them technically, to make sure our intention survives implementation.”

That means being precise, not just expressive. “A lot of my job is in the details,” Inês explains. “Spacing, colour, component behaviour; they all need to be documented in a way that engineers can use. It’s about turning design into something buildable.”

From Raphael’s perspective, the translation goes both ways. “I also need to make sure I’m translating constraints or improvements back to the design team,” he says. “It’s not just about saying what’s possible - it’s about saying why, and proposing alternatives when needed.”

They all agree that having a common reference, like a design system, makes this process easier. But communication remains the foundation. “Documentation helps,” Mariana says, “but nothing beats a real conversation.”

Feedback isn’t a hand grenade - it’s a handshake

Design critiques and code reviews are everyday moments where opinions surface, and tensions can rise. But for these three, feedback is part of the culture, not a confrontation.

“Constructive feedback is a sign of care,” Raphael says. “If I challenge a design, it’s because I’m thinking about scalability, accessibility, or performance. It’s not about ego.”

Inês agrees: “We’re all working towards the same goal. Feedback isn’t personal - it’s about making the product better.” She also highlights the importance of timing: “Give feedback early, give it often, and give it with context.”

Mariana adds, “We all have blind spots. Sometimes what makes sense in Figma doesn’t hold up in code, and that’s okay. The key is trusting that feedback is coming from a place of collaboration, not criticism.”

This culture of feedback creates a space where experimentation is possible and where it’s safe to get things wrong on the way to getting them right.

Empathy is the strongest skill in the room

For all their talk of systems, specs, and scalable components, what shines through is empathy.

“When I design something, I think about how the engineer will read it, interpret it, and build it,” says Inês. “I want to make that process as smooth as possible.”

On the flip side, Raphael says that empathy helps him see beyond the ticket. “Sometimes a design seems ‘off’ from a code point of view, but when I understand the user story behind it, it clicks. That’s when you stop resisting and start co-creating.”

Mariana puts it simply: “If you want to build good products, you need to care about the people building with you.”

This mutual respect shows up in small moments - the extra Teams message, the meeting where there's a walkthrough, the shared document - all signals that someone thought about the person on the other side.

Why this relationship matters - for the user

It’s easy to talk about internal collaboration like it’s an end in itself. But for these MB.ioneers, the ultimate goal is clear: creating better products for real people.

“The collaboration between designers and developers directly impacts the quality of the user experience,” says Inês. “If we work in silos, things break. But when we collaborate, users feel it: in the flow, in the clarity, in the ease of use.”

Mariana adds, “A seamless experience is only possible when the teams behind it are aligned. If design and code are in sync, the user gets something that just works.”

Raphael takes it even further: “It’s not just about clean code or clean visuals, it’s about coherence. That coherence builds trust. And trust is everything in a digital product.”

Lessons learned from the craft of collaboration

After years of working across teams, what’s stayed with them most isn’t a process or a tool, it’s an attitude.

“Curiosity is key,” says Mariana. “Don’t be afraid to ask how things work, why they’re built that way, or what could be better.”

For Raphael, it’s about being open: “Collaboration means giving up the idea of owning every decision. The best solutions often come from merging perspectives.”

Inês adds: “Patience, too. Sometimes it takes a few iterations to get it right. But that’s part of the process, and it’s worth it.”

Final thoughts: building better, together

At Mercedes-Benz.io, we know that digital experiences aren’t just designed or engineered, they’re co-created. Every product, every interaction, every detail is the result of people working together, thinking together, and challenging each other with care.

As Inês, Mariana, and Raphael show us, when designers and developers treat each other not as checkpoints but as partners, something powerful happens: We build not just faster or better - we build more meaningfully. And that makes all the difference.