Design “handoff” is changing forever 💡

Summary

Dive Club 🤿 Episode Summary: "Design “handoff” is changing forever 💡"

Release Date: February 11, 2025
Host: Ridd
Guests: Jenny Nguyen (figjam and Anthropic), Tay O'Connor (VP of Design at Airbnb), Vincent Vandermeulen (Diagram), Alejandro (Co-founder & Chief Design Officer at Runway), Derek Briggs (Clerk), John Pham (Vercel), Henry Modiset (Perplexity), Amar Reshi (Eleven Labs)

---

Introduction

In this compelling episode of Dive Club 🤿, host Ridd delves into the evolving landscape of design and engineering collaboration, particularly focusing on the transformation of the traditional design handoff process. Through insightful conversations with leading designers and engineers, the episode uncovers how high-functioning product teams are redefining collaboration to foster innovation, efficiency, and superior product outcomes.

The Changing Nature of Design Handoff

Embracing Iteration and Code Exploration

Ridd begins by highlighting a notable trend observed across top-tier product teams: the frequent discarding of code as part of the iterative design process. This approach shifts the perception of "wasted" code from a negative to a foundational element that propels projects forward.

"The highest functioning product teams throw away a lot of code."
— Ridd [00:00]

Jenny Nguyen on Progressive Design Practices

Jenny Nguyen from figjam and Anthropic echoes this sentiment, emphasizing that iterative changes are integral rather than wasteful.

"We have this unique iteration and sort of like tension between design and engineering where it helps actually make the product better."
— Jenny Nguyen [00:51]

Ridd’s Hypothesis on Collaboration Quality

Ridd posits that the quality of design-engineering collaboration is reflected in the volume of exploratory code discarded, suggesting a dynamic and co-creative environment.

"The quality of collaboration between design and engineering is best represented by the amount of exploratory code that is thrown away."
— Ridd [01:12]

Tay O'Connor on Prototyping Evolution at Airbnb

Tay O'Connor from Airbnb shares how transitioning from static designs in Figma to real code prototypes earlier in the development cycle has enhanced their design validation process.

"We move now into prototype and using real code much earlier on in the product development life cycle."
— Tay O'Connor [01:50]

Vincent Vandermeulen on the Cost of Doing Good Work

Vincent Vandermeulen discusses the necessity of discarding code to achieve high-quality outcomes, framing it as an investment in excellence.

"That's just the cost of doing good work."
— Vincent Vandermeulen [02:28]

Collaborative Processes in Design and Engineering

Alejandro’s Rotational Engineering Program at Runway

Alejandro, Co-founder and Chief Design Officer at Runway, introduces an innovative rotation program where product engineers integrate with the design team monthly. This initiative fosters mutual understanding and collaboration, enhancing the overall design process.

"They have a deep respect for each other, design and engineering... you can move faster and you can do stuff."
— Alejandro [03:52]

Derek Briggs on the Synergy Between UI Engineers and Designers

Derek Briggs from Clerk emphasizes the symbiotic relationship between talented UI engineers and designers, noting how this partnership minimizes back-and-forth and enhances design implementation.

"The users never see the profiles like your design quality and your design capabilities of your team is only as good as the UI engineers that are implementing it."
— Derek Briggs [04:03]

John Pham on Collaborative Design Engineering at Vercel

John Pham highlights Vercel’s departure from traditional handoff methods towards a more collaborative approach, where engineers are involved in the design process rather than merely executing predefined designs.

"There's no handoff versus previous companies... there's collaboration on the artifact that's being handed off."
— John Pham [04:58]

Building Trust and Understanding Between Designers and Engineers

Ridd’s Strategies for Enhanced Collaboration

Ridd shares practical tactics to foster trust and empathy, such as embedding brief Loom videos to explain design intents and using sticky notes on unfinished UI elements to invite collaborative problem-solving.

"Establishing this type of trust and empathy for engineers goes a long way."
— Ridd [07:34]

Henry Modiset on Broadening Design Teams’ Technical Understanding

Henry Modiset from Perplexity discusses the importance of design teams investing time to understand front-end development, which strengthens partnerships and enhances product design.

"Carving out time each week to sit with front end devs to understand how the code base works."
— Henry Modiset [08:42]

Amar Reshi on Dynamic Design in AI-Driven Products

Amar Reshi, Head of Design at Eleven Labs, underscores the necessity of a fluid and experimental design process when dealing with AI products, advocating for real-time collaboration and iteration between designers and engineers.

"Design is very dynamic and not static at all... It becomes a very collaborative conversational process."
— Amar Reshi [10:01]

The Impact of AI on Design-Engineering Collaboration

As AI becomes central to product development, the episode explores how non-deterministic outputs necessitate a shift from static design handoffs to ongoing, conversational collaboration. This evolution requires designers and engineers to co-create and adapt continuously, ensuring that AI-driven products meet user needs effectively.

"In that world, collaboration is everything."
— Ridd [10:31]

Conclusion

This episode of Dive Club 🤿 masterfully illustrates the paradigm shift in design and engineering collaboration. By embracing iterative processes, fostering mutual respect, and leveraging innovative programs, modern product teams are transcending traditional handoff barriers. The integration of AI further amplifies the need for dynamic, conversational collaboration, positioning these teams at the forefront of innovative product design.

Listeners are encouraged to reflect on their own design practices and consider adopting these collaborative strategies to enhance their product development workflows.

---

Key Takeaways:

• Iterative Collaboration: High-functioning teams thrive on iterative processes, viewing discarded code as a pathway to excellence.

• Early Prototyping with Code: Transitioning from static designs to code-based prototypes early in the development cycle enhances design validation.

• Mutual Respect and Understanding: Building trust and technical understanding between designers and engineers leads to more cohesive and efficient product development.

• AI’s Role in Collaboration: The rise of AI necessitates a more fluid and conversational collaboration model to accommodate non-deterministic outputs.

Notable Quotes:

• "The highest functioning product teams throw away a lot of code." — Ridd [00:00]

• "We have this unique iteration and sort of like tension between design and engineering where it helps actually make the product better." — Jenny Nguyen [00:51]

• "We move now into prototype and using real code much earlier on in the product development life cycle." — Tay O'Connor [01:50]

• "That's just the cost of doing good work." — Vincent Vandermeulen [02:28]

• "They have a deep respect for each other, design and engineering... you can move faster and you can do stuff." — Alejandro [03:52]

• "There's no handoff versus previous companies... there's collaboration on the artifact that's being handed off." — John Pham [04:58]

• "Establishing this type of trust and empathy for engineers goes a long way." — Ridd [07:34]

• "Carving out time each week to sit with front end devs to understand how the code base works." — Henry Modiset [08:42]

• "Design is very dynamic and not static at all... It becomes a very collaborative conversational process." — Amar Reshi [10:01]

---

For more insights, episodes, key takeaways, and bonus resources, visit Dive.club.

Transcript

[Host]

I've interviewed a lot of designers working on some of the best teams in the world to figure out how they collaborate with engineers and what does success look like. And I'm starting to notice a trend. The highest functioning product teams throw away a lot of code.

[Jenny Nguyen]

I think at a lot of other teams and whatnot. You know, the norm is that, you know, if it gets built and it changes, it's sort of like throw away work and it's a waste of time. But we actually see that as like, it's not a waste of time. It sort of moves the project forward and it's a part of the design process.

[Host]

That's Jenny Nguyen from figjam and now Anthropic. And I think she hits on something that I've experienced a lot in my career, this pressure as a designer to get it right. Because if engineers write code that doesn't ship to production, it's a waste of precious resources. But the best teams operate with a completely different mentality.

[Jenny Nguyen]

We have this like, unique iteration and sort of like tension between design and engineering where it helps actually make the product better. And I think that's a big part of just like how design works on the figjam team, but also at Figma together, because it really helps us get to the final really great product together as opposed to, you know, design working in a silo, handing something off to engineering and then it just like going out the door right away.

[Host]

I have a hypothesis the quality of collaboration between design and engineering is best represented by the amount of exploratory code that is thrown away. Because that's how you know that you're exploring in tandem with developers and looping them in early to the process. If you're only showing developers your polished work, then, yeah, you know, you're not wasting any code. But you're also missing opportunities that are only spotted if engineers are helping you push past what's obvious and easy to make in Figma. It's a big reason why the VP of Design at Airbnb, Tay O'Connor, said they're changing the way that they prototype.

[Tay O'Connor]

We used to do a lot of work where we'd be designing only, you know, in Figma for a really long time. And we'd then take flat designs and show them. And really, you only understand when a design is going to work, when you see it on device, when you're actually playing around with it. We move now into prototype and using real code much earlier on in the product development life cycle.

[Host]

The more quickly you move into exploring ideas in code. Inevitably the more code that's going to go into the trash. But as Vincent Vandermeulen mentioned while talking about the early days of Diagram, that's the cost of doing good work.

[Vincent Vandermeulen]

You can't really get a sense of what they feel like, right? Like when you're just like drawing them out. So you really want to get to a point either via a prototype or just by actually coding it up that you can verify. It's like often whenever someone designs something, I don't even bother saying like, oh, A or B is better. I just say like, okay, make them both. Send us deploy links and we'll try them out. Both, we'll throw one away. That's fine. That's just the cost of doing good work.

[Host]

In an upcoming interview, I talk with Alejandro, who's a co founder and the chief design officer at Runway, and they do something I've never seen before. Every month they have a different product engineer join the design team as a part of a rotation program. It propagates engineering knowledge for the design team and creates a ton of space for collaboration throughout the entire design process. It reminds me of some of the things that Valent Oroz was talking about when describing the culture at Craft Docs.

[Alejandro]

Engineering is not pissed off if we need to throw away something. They're not saying, hey, you should have done a better design job at designing in the first place. And kind of designers are not upset if they need to change the design for some performance considerations. And they have a deep respect for each other, design and engineering. And the really good thing about this is that as the more engineers interact with designers and vice versa, each of them understands domain better. They train each other, which results in having better partners in your work because you you can move faster and you can do stuff.

[Host]

This process of leveling each other up increases dramatically once you start adding dedicated design or UI engineers into the equation. Here's Derek Briggs talking about his experience at Clerk.

[Derek Briggs]

It's so motivating, it's so magical to see putting a extremely talented visual designer with an extremely talented UI engineer and watch them level each other. I say all the time that the users never see the profiles like your design quality and your design capabilities of your team is only as good as the UI engineers that are implementing it. And that is a good like case for Velocity as well. You have a whole lot less back and forth between the engineering and design. There's a lot less throwing over the wall because you have UI engineers that care a lot about making those pixel perfect figma mockups come to life and then you have designers who are less concerned about the translation process and having to, hey, will you move that one pixel? Like this is. This is off a little bit. Because they're communicating to people that care.

[Host]

John Pham hit on this same idea when described how design engineering works at Vercel.

[John Pham]

I think a nice thing about our relationship with designers and design engineers and everyone across the company is there's no handoff versus previous companies. Where I've worked at, like, the handoff is like, here's the final like version. Like, like you need to implement it or like you need to contribute your part. There's no collaboration on like the artifact that's being handed off.

[Host]

Real quick message. And then we can jump back into it. You know what? I can't stop thinking about cursor. But for designers. And that's why I'm all in on Desen. It's not another zero to one tool for prototypes or side projects. It's a visual interface that gives you access to your company's existing code base so you can make updates to things like components, typography, properties, and push your designs to production without having to go through an engineer. That's what the future of product design will feel like. And you can start experiencing it today. Just head to Dive Club Desen to get started. That's dessn. Look, you know how big of a Jitter fan I am, but their latest release is hands down the best one yet. Now, Jitter has an infinite canvas for animation design. And I mean, within 30 seconds of using it, I knew that this was always the way that it should be for motion design. It makes iteration 10 times easier. Collaborating with team members makes way more sense. And you can scale content across formats using multiple art boards in a single file. Jitter is crazy. Like, this product is so incredibly good. Now you got to try it out. Just head to dive.club/jitter to get started. That's J I T E R. Okay, now on to the episode. Now, maybe you're like me and you don't have dedicated design engineers. I mean, maybe your company still does. Quote, unquote handoff. And that's okay. It can still be collaborative. Just listen to John describe the process before and after joining Vercel.

[John Pham]

Vercel was the first place where, like, I collaborated with designers versus being handed off something. When I was handed off something, like, I didn't understand the why or intent behind the design. So, like, I never learned why. Like, a certain layout was used at Vercel. Every designer wants to collaborate with you because they want to ensure that the thing that that gets shipped is the thing that they design. Because we've probably all experienced where like the Design handles like 100% of the user's problem, but because of engineering constraints we have to cut scope and now only 70% of the solution gets shipped. No one wants to end up on this situation. So collaborating with all designers like that taught me like, why and what good design is. And as you work with them, they're basically mentoring you for free instead of paying for like a masterclass. If you pair with a designer at Vercel, that's your free masterclass.

[Host]

I want to highlight one key word that he just said, intent. No engineer wants to be handed a file that feels like you're saying, here, build this. Exactly. Ask for input, share a couple of different ideas in the final file and see what they think. A tactic I love doing is embedding little one minute loom videos where I talk through a specific UI detail and say, hey, here's my intent. This is what I'm trying to accomplish. And a lot of times the engineer sparks a totally new set of ideas. I mean, maybe something that I thought was technically challenging turns out to be pretty straightforward and they just build it and it turns out to be awesome. I can think of many examples where that has happened for me. But you have to create that space for collaboration. And sometimes I'll even put a sticky note on a piece of UI that I haven't finished yet and say, hey, you know, I haven't figured this out yet, but whenever you get to this part, ping me on Slack and we can just have a quick huddle about it. Establishing this type of trust and empathy for engineers goes a long way. It's a big reason why Anthony Manicola invested into building those relationships with front end engineers at Shopify, something that I.

[Henry Modiset]

Have been working on. And this goes back to kind of like broadening your tea is just really trying to understand engineers, understand the front end, understand how things work under the hood. And so one of the things that I really started doing when I joined the Inbox team was carving out time each week to sit with front end devs to understand how the code base works.

[Host]

Now this relationship between design and engineering totally changes once AI becomes a focal point of your product, because, I mean, it's so much harder to account for non deterministic output with static figma mocks. I mean, you simply can't cover all of the states and use cases. Henry Modiset who is the head of design at Perplexity, says it has to turn into more a collaborative conversational process.

[Henry Modiset]

It becomes much more of a collaborative end to end product crafting process rather than like design handoff to engineering. And then something's working right, because you cannot design all the cases. You have to just explain what the user's going to get and what the vision for the product experience is. And then, you know, you and the.

[Amar Reshi]

Engineers, you build it together in a.

[Henry Modiset]

Very collaborative conversational process.

[Host]

In an upcoming interview, the head of design at eleven Labs, Amar Reshi, shares this same sentiment.

[Amar Reshi]

I love showing the engineers very early on, like the early explorations, they'll go back and forth and like build prototypes so we can like test out how it's working. And it's very much, especially with models that are this early, it's very much an experimentation game where you try it, you see how it feels in real life, you tune it and you go back and forth and change the design. So design is very dynamic and not static at all. It's not like I made this handoff, it's like, oh, interesting. Like that part of the experience might need a tweak here, might need a tweak there.

[Host]

We're experimenting with different AI ideas for inflight right now and honestly, it's kind of pointless to start off in figma. Instead we're just going to make code prototypes, play with them, see what's possible. And yeah, maybe once we get a little bit further, I'll move into Figma and refine some of the visual details. But we're kind of flipping the design process on its head a bit. And I'll admit, like, it feels uncomfortable as a designer, but it's also where the world is headed. But we're not going to have these clean lines where this is the design process and this is the engineering process. And in that world, collaboration is everything. That's all for now and I will see you next week.