What true obsession with craft looks like 💡

Summary

Dive Club Episode Summary: "What True Obsession with Craft Looks Like 💡"

Host: Ridd
Guests: Julius Tarn & Raphael Shad
Release Date: December 23, 2024

---

Introduction: Defining Craft Beyond Aesthetics

In this insightful episode of Dive Club, host Ridd delves into the intricate world of design craftsmanship with Julius Tarn and Raphael Shad. The discussion centers on the often-overlooked details that elevate a product from merely functional to truly exceptional. Both guests emphasize that true obsession with craft involves a meticulous focus on every aspect of design, ensuring a seamless and engaging user experience.

---

The Significance of Edge Cases in Design

Understanding Edge Cases

Julius Tarn opens the conversation by redefining craft beyond superficial elements like "a shimmering landing page or micro animation." He asserts, “Craft is so much more than a shimmering landing page or micro animation. It's sweating all of the tiny little details and having a thorough understanding of the edge cases in your product” (00:00). This perspective sets the stage for a deeper exploration of what makes a product genuinely well-crafted.

Linear’s Attention to Detail

Raphael Shad shares his admiration for Linear, highlighting how the software’s success stems from its thoughtful consideration of edge cases. “That's what I think people appreciate about Linear as a piece of software is they use it and they're like, oh shit, this edge case, this one workflow, like Linear thought about that for me” (00:16). This focus on the minutiae accumulates to create a product that feels intuitive and robust to its users.

---

Dialogues and Toasts: The Conversation Between Product and User

The Underappreciated Elements

Julius Tarn brings attention to a critical yet often neglected aspect of design: dialogues and toasts. He notes, “there's one detail that a lot of designers, myself included, often ignore, and it has to do with our toasts and dialogues” (00:31). These elements, though small, play a pivotal role in how a product communicates with its users.

Raphael Shad on Dialogues and Toasts

Raphael elaborates on the importance of these conversational elements within applications. “Dialogs and toasts are kind of like the one way an application really has a conversation with the user” (00:46). He distinguishes between static design elements and dynamic interactions, emphasizing that while the former defines the app's initial appearance, the latter shapes the ongoing user experience through notifications, alerts, and informational messages.

---

Treating Dialogues as First-Class Citizens

Shift in Design Philosophy

Julius reflects on Raphael’s perspective, admitting that toasts and dialogues were often an afterthought in his design process. “Toasts are so often the thing that I flippantly do at the end of a project” (01:09). However, inspired by Raphael’s approach, he recognizes the need to prioritize these elements to enhance product quality.

Raphael’s Commitment to Consistency

Raphael underscores his dedication to crafting dialogues with precision and consistency. “I'm kind of like a stickler to really be like really crisp and clear and consistent in all these interactions because that's how Cron kind of like speaks to the user” (01:54). This meticulous attention ensures that every interaction, no matter how minor, aligns with the product’s overall voice and user experience strategy.

---

Integrating Design with Engineering: A Collaborative Effort

Managing Complexity

Julius discusses the complexities that arise when handling numerous edge cases through dialogues. “So many of the edge cases in our product are handled with these dialogues. So it can get kind of complex” (02:06). This complexity necessitates a seamless collaboration between designers and engineers to maintain coherence and functionality.

Raphael’s Strategy for Collaboration

Raphael details his approach to maintaining design consistency amidst technical challenges. “I have gigantic figma files where I keep all toasts and dialogues actually just like designed out, like spelled out, like every single permutation I have in there and really want to fight hard to keep it in sync with the code base” (02:15). He emphasizes the importance of integrating design elements directly into the development workflow to ensure that every dialogue and toast functions as intended within the product.

Enhancing Engineer-Designer Communication

To foster better collaboration, Raphael implemented a system within GitHub pull requests. “I added to the pull requests template on GitHub, added, like, a little step that engineers can, like, check off that says, you know, if this PR introduces a dialogue or a toast or something similar to other examples, Ping, you know, like Slack Channel X or something like that” (05:07). This proactive measure ensures that every addition or modification of dialogues is reviewed and aligned with the overall design language, reducing discrepancies and enhancing product quality.

---

Conclusion: The Pursuit of Well-Crafted Products

Julius concludes the discussion by affirming that achieving a truly well-crafted product requires an obsessive attention to detail at every level. “If you want to create a product that is truly well crafted, this is the level of obsession that it takes” (05:32). The collaborative efforts between designers and engineers, as exemplified by Raphael’s strategies, serve as a blueprint for others aiming to elevate their products through meticulous design craftsmanship.

---

Key Takeaways

• Beyond Aesthetics: True craft in design encompasses both visual appeal and the thoughtful handling of edge cases.
• Dialogues and Toasts: These elements are crucial for user interaction and should be treated as integral components of the design process.
• Consistency and Clarity: Maintaining a consistent design language through all interactions enhances the overall user experience.
• Collaborative Workflow: Effective collaboration between designers and engineers is essential for managing complex design elements and ensuring product cohesiveness.

---

This episode of Dive Club offers a profound exploration of what it takes to obsess over craft in design. By sharing their experiences and strategies, Julius Tarn and Raphael Shad provide valuable insights for designers striving to create products that are not only visually stunning but also functionally impeccable.

Transcript

[Julius Tarn]

Craft is so much more than a shimmering landing page or micro animation. It's sweating all of the tiny little details and having a thorough understanding of the edge cases in your product. It reminds me of something Julius Tarn shared about his time at Linear.

[Raphael Shad]

That's what I think people appreciate about Linear as a piece of software is they use it and they're like, oh shit, this edge case, this one workflow, like Linear thought about that for me. So there's a lot of these, like little decisions, tiny little edge cases that kind of collect up into what is the final product.

[Julius Tarn]

But there's one detail that a lot of designers, myself included, often ignore, and it has to do with our toasts and dialogues. Here's Raphael Shad, the founder of Cron, who's now leading calendar at Notion, to share a little bit more.

[Raphael Shad]

And so I really think that dialogs and toasts are kind of like the one way an application really has a conversation with the user. Static mocks and kind of like the face of the app are good and fine and they define sort of like the look and feel when you land in an app. But then once you use a piece of software, the conversation is really like all the little sort of like interruptions and FYIs, et cetera, that the software presents to the user.

[Julius Tarn]

That last idea has really stuck with me since our interview that toasts are the way that our product talks to our users, how it interrupts, guides and informs them. Raphael called it one of the most undervalued skills in all of design. And he's right. I mean, even reflecting on my own process, toasts are so often the thing that I flippantly do at the end of a project. Project right before my design ship. I mean, sometimes they're not even in figma. It's just a slack message to an engineer. And if I do design the dialogues in figma, then I normally just dump them alongside the relevant frame. So they're scattered throughout my organization and I pretty much forget about them. But after listening to Raphael, it's clear that he treats his dialogues as a first class citizen.

[Raphael Shad]

And so I'm kind of like a stickler to really be like really crisp and clear and consistent in all these interactions because that's how Cron kind of like speaks to the user.

[Julius Tarn]

And going back to Julius's comment in the beginning, so many of the edge cases in our product are handled with these dialogues. So it can get kind of complex.

[Raphael Shad]

It's really hard because all these special cases, edge cases, options, FYI, error States, they all live in code. They don't live in design. In design, you maybe have a component for what an error toast looks like or dialogue with the primary and secondary and cancel button. But that's just the visual design of the dialogue. I don't care about that as much. Of course, I kind of want to make it gorgeous and nice and drop shadow and dims the background and has like a little hover state and it's all nifty. But really, the content of this component is where I think kind of, I guess, uppercase D design shines versus kind of like the pixels lowercase D design. And so, for example, I just have gigantic figma files where I keep all toasts and dialogues actually just like designed out, like, spelled out, like every single permutation I have in there and really want to fight hard to keep it in sync with the code base.

[Julius Tarn]

Real quick message, and then we can jump back into it. There's been a lot of talk on this show about quality and velocity. And the biggest hack that I've seen is having designers who can ship directly to production. And now desen is making it so that designers everywhere can do just that without having to write any code. Now everyone's talking about how LLMs can 10x developers, but Desen is laser focused on how LLMs can 10x designers. It's one of the tools I'm most excited about right now. And they're giving away early access to the dive community. So head to Dive Club Desen to learn more. That's D E S S N. All right, I have a secret for you. I'm working on a new company behind the scenes, and it's built specifically for designers like you that listen to this show. And honestly, I'm just too excited about. So I have to give you a sneak peek. Head to Dive Club Startup to get a little glimpse of what's coming next. Okay, now onto the episode. I love how seriously Raphael takes the content inside of the dialogues. Not only writing the best copy to solve that specific edge case, but also ensuring that it fits within the broader voice of the product.

[Raphael Shad]

Oftentimes when I add a new dialogue, then or an engineer hits me up, hey, like, we need a new, you know, dialog to handle this. I will go and compare, like, what are all the similar, similar dialogues that we already have? Or there's some tooltips, even that refer to similar concepts, copy them all into that file and kind of build, like, a little context, kind of, you know, bubble around that one dialogue that I need to design. And again, the component is already done. I'm not actually designing the component, but now I'm, like, really thinking about what are the options, what are the words, what are the nouns, what are the verbs, what are the adjectives? Like, how do we refer to the same concepts?

[Julius Tarn]

Consistently sweating the details at this level probably requires you to go to a deeper level of collaboration with engineers, too. Here's what Raphael did.

[Raphael Shad]

Engineers, they love to just kind of, like, throw in, like, a little line of code that adds, like, a little toast dialogue to kind of handle a special case. So I added to the pull requests template on GitHub, added, like, a little step that engineers can, like, check off that says, you know, if this PR introduces a dialogue or a toast or something similar to other examples, Ping, you know, like Slack Channel X or something like that. So I really want to be aware of the surface area.

[Julius Tarn]

If you want to create a product that is truly well crafted, this is the level of obsession that it takes. So I hope that you found Raphael's story as inspiring as I did.