Designing on expert mode

Summary

Dive Club 🤿: Episode Summary - "Designing on Expert Mode"

Host: Ridd
Episode Title: Designing on Expert Mode
Release Date: April 1, 2025

---

Introduction to Expert-Level Interaction Design

In this episode of Dive Club, host Ridd delves into the intricacies of advanced interaction design, exploring what it takes to elevate design work to an expert level. Ridd begins by expressing his admiration for designers like Gavin Nelson, whose work on the Linear Mobile app exemplifies pinnacle craftsmanship in design. He emphasizes the importance of moving beyond merely creating aesthetically pleasing interfaces to crafting complex interactions from first principles.

"I consider this the pinnacle of craft. Like, it's one thing to create gorgeous interfaces, but when you're thinking through complex interactions from first principles, that, to me, is design on expert mode."
— Ridd [00:00]

Ridd highlights the necessity for designers to engage directly with the materials they work with, drawing a parallel to Vincent from Figma who remarked that the final stages of design increasingly occur in code. He underscores that modern tools like Lovable for web and Play for mobile are bridging the gap between design and development, making it easier for designers to prototype and iterate effectively.

"Thankfully, it's never been easier to join in. If you're on web, then you can make incredible prototypes with Lovable. And if you're on mobile, you can design with native materials and ship them directly to Xcode with Play."
— Ridd [00:58]

Mastering Mobile Interaction Design

The conversation shifts to mobile app design, where touch gestures play a pivotal role in enhancing user interactions. Gavin Nelson shares his insights on designing for mobile platforms, noting the unique constraints and possibilities they present compared to desktop environments.

"You don't have things like hover states, but you do have things like multi-touch gestures on iOS, for example. It applies a unique set of constraints, but it also, like, opens up a whole new world of possibilities."
— Gavin Nelson [01:23]

Gavin further praises the Netflix mobile app as a source of inspiration, particularly highlighting its elegant header behavior during scrolling and the meticulous attention to detail that elevates the overall user experience.

"When you scroll down, the header kind of shrinks very elegantly and gets out of your way a little bit, which I love. Those are little details that I really think, like, together to put that extra layer of polish on an app."
— Gavin Nelson [01:48]

Behind the Scenes: Netflix Redesign Insights

To provide a deeper understanding of the design processes behind such refined interactions, Ridd interviews Jonam Trivedi, who contributed to the Netflix app redesign. Jonam discusses the team's objective to make the app feel more dynamic and immersive, emphasizing cohesive design where interactions are integral rather than superficial add-ons.

"We wanted the whole thing to feel very cohesive."
— Jonam Trivedi [02:16]

He elaborates on the decision to implement shared transitions from artwork to detail pages, ensuring that the interactivity aligns seamlessly with the visual design.

The Importance of Fluid, Pageless Design

Ridd references Alex Cornell's observations on how innovative interactions in apps like Amy's calendar app influence broader design thinking. This leads to an interview with Dennis, Amy’s founder and designer, who explains their intentional move towards a pageless, fluid design.

"If you look at our iOS app, it's actually very fluid, mainly because there is no real pagination. The rest is more free flowing, more like, you know, expands and collapses from somewhere."
— Dennis, Founder and Designer of Amy [03:38]

Dennis underscores that the behavior of interactive elements, such as split panels, is central to the app's design integrity, aligning user experience with the app's functional aesthetic.

Elevating Prototyping for Better Feedback

The discussion advances to the critical role of high-fidelity prototyping in interaction design. Gavin Nelson advocates for creating prototypes that closely mimic the final product to garner authentic user feedback.

"When the interaction is a core part of the design, then reaching a fidelity level that is indistinguishable from production is the only way to get real feedback on your work."
— Ridd [06:03]

Dan Lacivita, co-founder of Play, concurs, highlighting that tools enabling high-fidelity prototypes empower designers to test and validate interaction paradigms effectively.

"You need to test at the fidelity that you're prototyping at. So if you want to test an interaction paradigm or a different pattern, you actually need to prototype that thing."
— Dan Lacivita [07:16]

Ridd reflects on the evolution of design tools, reminiscing about the limitations of past tools like Flinto and expressing excitement about current advancements that bring prototypes closer to real-world functionality.

Accountability and Conviction in Design

In the concluding segment, Dan Lacivita emphasizes the importance of accountability in design, advocating for tools that allow designers to engage deeply with their creations to foster conviction and responsibility.

"The closer you get to the real thing also increases your level of accountability and responsibility. And so why wouldn't we want tools that can give us greater conviction in the things that we are going to ship?"
— Dan Lacivita [08:08]

Ridd wraps up the episode by celebrating the ongoing renaissance in design tools, acknowledging the vital role podcasts like Dive Club play in fostering knowledge and innovation within the design community.

"The design tool renaissance is officially here and I'm pretty grateful that having a podcast means that I get to have a front row seat."
— Ridd [09:02]

---

This episode of Dive Club offers a comprehensive exploration of advanced interaction design, underscoring the necessity of high-fidelity prototyping, the impact of fluid design practices, and the evolving landscape of design tools that empower designers to create more intuitive and dynamic user experiences. Whether you're an aspiring designer or a seasoned professional, the insights shared by Ridd, Gavin, Jonam, Dennis, and Dan provide valuable perspectives on mastering design at an expert level.

Transcript

[Host]

My number one source of imposter syndrome is when I see designers prototyping these beautiful interactions. Like, maybe you've seen some of Gavin's recent explorations for the Linear Mobile app. I mean, I consider this the pinnacle of craft. Like, it's one thing to create gorgeous interfaces, but when you're thinking through complex interactions from first principles, that, to me, is design on expert mode. And it's a big reason why Linear listed as a requirement three separate times in their job description for principal designer. So how do you become become a great interaction designer? Well, I think it requires you to design with the materials, and having your hands in the clay is the only way to unlock interaction design as a core skill. It reminds me of a tweet from Vincent at Figma where he says that the last 40% of the design process happens in code. You can either accept that you won't be part of that design process or join in. Thankfully, it's never been easier to join in. If you're on web, then you can make incredible prototypes with lovable. And if you're on mobile, you can design with native materials and ship them directly to Xcode with play. I mean, it's getting harder for designers to make excuses for why they're not working directly with the materials. And this becomes especially true when you're designing for mobile because touch gestures really raise the ceiling for interaction design. Just take it from Gavin Nelson, who's designing the Linear mobile app.

[Gavin Nelson]

You don't have things like hover states, but you do have things like multi touch gestures on iOS, for example. It applies a unique set of constraints, but it also, like, opens up a whole new world of possibilities. And that's where a lot of I find nice interaction design to come in on mobile.

[Host]

All of a sudden, the interactions aren't the easing curves that you're slapping on at the end of the process. They're the design itself. So I asked Gavin, what's a mobile app that you're inspired by?

[Gavin Nelson]

I've used Netflix for years, but almost always just through the website. And I download the app and the app, it feels like one of those things that has, like, no right to be as well crafted as it is, but it's incredibly well done. When you scroll down, the header kind of shrinks very elegantly and gets out of your way a little bit, which I love. Those are little details that I really think, like, together to put that extra layer of polish on an app.

[Host]

So I caught up with Jonam Trivedi, who worked on the Netflix redesign, to Get a little bit of the backstory.

[Jonam Trivedi]

They wanted to figure out how can we make this app feel a little bit more alive and dynamic, Right. Versus kind of like a vending machine or something like that. I think one of the first ones that we knew we wanted to do was that shared transition from the artwork to the detail page. That seemed kind of like a no brainer, right? It's like, okay, we have this like beautiful artwork already. We can make that detail page more immersive, right? It wasn't like we designed this new art direction for the homepage and then figured out like, oh, how do we, like, tack on interactions? Right? We wanted the whole thing to feel very cohesive.

[Host]

We talk a lot about improving your taste by paying attention to pixel level details and recreating the UI of your favorite apps. But the thing that I'm paying attention to more and more is how apps move and the little details that make an interaction special. It reminds me of something that Alex Cornell said.

[Alex Cornell]

If you only interact with system apps and don't really mess with your phone too much, it's like you're kind of only really going to be exposed to those moves, you know? Whereas if you take an app like Amy, the calendar app, they've got like a little panel, the little pane that slides around, there's a really cool interaction when you tap on any of things in between the panes. And it's like just being exposed to that idea that somebody had now makes you think like, oh, yeah, what if apps did have like multiplane, you know, And I saw it actually there was somebody on Twitter the other day, they posted an idea and it was a little panel back and forth like this. And I was like, I know where that came from.

[Host]

I actually interviewed Dennis, the founder and designer of Amy, and it was interesting to hear him talk about how intentionally they made their app pageless. When people have a bottom tapper, they just say like, yeah, it's fine if everything's a page. I think if you look at our iOS app, it's actually very fluid, mainly because there is no, no real pagination. I think the only real page we have is the settings page. The rest is like more free flowing, more like, you know, expands and collapses from somewhere. In Amy's case, the way that the split panel moves is the design. I mean, if it doesn't feel or behave in the right way, then it doesn't matter how pretty the static mocks are. It's like when Jonam was talking about working on interactions for the iPad pointer.

[Jonam Trivedi]

You can't fake anything there, right? If you make something and for some reason it feels off or it feels bad, the experience of using this product just now feels bad.

[Host]

Real quick message and then we can jump back into it. So here's the thing. The last few prototypes that I've made haven't been in Figma. Instead, I'm using Lovable. And honestly, it feels like magic to create real software without touching a single line of code. I mean, you could literally build whatever you can come up with. And it's good. Like, I'm genuinely proud of the prototypes that I'm making and developers can't believe how quickly I'm able to bring my ideas to life. So this is your wake up call. Don't stay stuck in a rectangle land. I mean, I promise Lovable is way easier than you think. And I'm having more fun designing right now than I have in a long time. So head to Dive Club slash Lovable to start building today. That's L O V A B L E. As a designer, I'm always talking to people, team meetings, design crit, user interviews. So it's super important to capture the ideas and the feedback that I'm getting. And that's why I never, ever, ever, ever, ever have a conversation about design without running granola in the background. It's like Apple notes, but it transcribes my meetings for me. So when the meeting ends, Granola enhances the notes I've written and I can even ask questions or get tailored summaries from the call. I mean, it's very quickly become a staple tool in my design practice. Every single designer should be using this. And if you want to go to the secret link Dive Club Granola, then you and your team can get three months free. That's Dive Club Granola.

[Jonam Trivedi]

Okay, now onto the episode.

[Host]

When the quality of what you're designing is dictated by the interaction itself, you can't wait too long in the design process to make something that feels real.

[Gavin Nelson]

At that point, I might turn to prototyping to put together a very low fidelity prototype that has kind of a higher fidelity implementation of the interaction just to test it out and see, like, okay, that doesn't work, or it needs to change in this way, make it as kind of indistinguishable from what I might see in production if it was built over an engineering cycle. And the goal with that being is you can just hand that to someone and say, what do you think of this? Does it work? Maybe there's a little context Setting of what the goal is of this, what you're trying to get done. But you hand it to someone and you say change the properties on this linear issue. And that is a real life user test in a way. Can they do it? Do they find it easy? Does it take them way too many tasks to do? When you have that prototype that may be just entirely spaghetti code that's never actually going to ship in the background, but it's creates this very high fidelity thing that's indistinguishable from production. That's like the universal language of getting feedback and just testing your idea for real.

[Host]

If the interaction is a core part of the design, then reaching a fidelity level that is indistinguishable from production is the only way to get real feedback on your work. And this is why I'm so fascinated with a tool like Play. Here's co founder Dan Lacivita to share more.

[Dan Lacivita]

Could a designer that maybe doesn't have as much experience in Swift deliver the same level of fidelity with a tool like Play and be able to get their ideas to a level of conviction that is what the product unlocks?

[Host]

It doesn't matter if you're using Play. Lovable cursor arrive. The point is that high quality interaction design demands high fidelity prototypes.

[Dan Lacivita]

You need to test at the fidelity that you're prototyping at. So if you want to test an interaction paradigm or a different pattern, you actually need to prototype that thing. You can't prototype half of that thing and expect to get the feedback that is going to be usable.

[Host]

I think this is why I'm so excited about all the latest advancements in AI. I mean, 10 years ago I was drawing invisible rectangles as click targets for page transitions in a tool called Flinto. And here we are. I mean, we're so close to the real thing. So I want to end with one more clip from Dan.

[Dan Lacivita]

One of the most important jobs of a designer is choosing between the best options. Of course you're going to rely on your gut and your intuition, but you want to have conviction with whatever solution you're putting forward. How can we get to that conviction if we don't even touch and feel our designs? It's like a sculptor that spends all their time drawing a picture of the 3D sculpture and then spends the last 10% with their hands in the clay. The more layers of abstraction that we add, it increases our comfort zone because for every layer of abstraction is an excuse or a finger point to something else or someone else. Where I'd then don't have to take accountability. The closer you get to the real thing also increases your level of accountability and responsibility. And so why wouldn't we want tools that can give us greater conviction in the things that we are going to ship?

[Host]

The design tool renaissance is officially here and I'm pretty grateful that having a podcast means that I get to have a front row seat. So definitely more to come on this topic and I will see you next.