Episode Summary: "A Designer's Guide to AI" with Joel Unger

Podcast: How I AI
Host: Claire Vo
Guest: Joel Unger, Design Director at Atlassian
Release Date: May 12, 2025

Introduction

In this episode of How I AI, host Claire Vo engages in an insightful conversation with Joel Unger, the Design Director at Atlassian. With over a decade of experience in creating popular products like Confluence, BitBucket, and Trello, Joel shares his expertise on integrating AI into the design process to enhance efficiency and creativity.

Current Work at Trello

Joel begins by discussing his current projects at Trello, highlighting the significant changes and feature additions aimed at transforming Trello into a personal productivity powerhouse.

• Enhanced Feature Integration: Joel explains how Trello has evolved from a traditional Kanban-style tool to incorporate features like Inbox and Planner, which allow users to capture tasks from various sources (e.g., Slack, email, voice notes) and plan their execution.

  [02:59] Joel Unger: "Recently we've been pivoting Trello to become your personal productivity powerhouse. [...] There's not really a center to this view anymore. It's all of these can be up beside each other at any time."

• User-Centric Design: Emphasizing Trello's tactile principles, Joel describes the drag-and-drop interactions between different features, ensuring a seamless and intuitive user experience.

AI in Prototyping with Cursor

Transitioning to the role of AI in design, Joel shares his journey of leveraging AI tools to accelerate the prototyping process.

• From Figma to Cursor: Initially using traditional design tools like Figma to create multiple design variations, Joel found the process tedious and time-consuming. The introduction of Cursor, an AI-powered tool, revolutionized his workflow by automating complex tasks.

  [04:43] Joel Unger: "I jumped into Figma and specked out like a ton of variations [...] But it didn't quite get me where I wanted to go with the product."

• Efficient Code Generation: By integrating Cursor, Joel was able to generate responsive, drag-and-drop capable code directly from design images, significantly reducing the time from concept to prototype.

  [06:41] Joel Unger: "I paste in my image from Figma and say, okay, build me a three panel system with a toolbar to toggle on and off panels. [...] It'll interpret it fine."

• Collaboration with Developers: The AI-generated code served as a starting point for discussions with the engineering team, facilitating clearer communication and faster iteration based on user feedback.

  [07:54] Joel Unger: "It got the conversation started and I could start to tell them like, okay, look, the min width needs to be this [...] Instantly understood."

AI in Product Development and Collaboration

Joel elaborates on the practical benefits of using AI in product development, particularly in handling nuanced design challenges that traditional tools struggle with.

• Responsive Design Enhancements: AI tools like Cursor enabled Joel to experiment with complex responsive design scenarios that would have been difficult to prototype manually.

  [07:14] Joel Unger: "Really nuanced responsive design choices that I would have never encountered in Figma."

• Iterative Development: The ability to quickly generate and modify design prototypes allowed for rapid testing and incorporation of user feedback, ensuring the final product met diverse user needs.

  [08:00] Joel Unger: "And just shout out to my developers, they caught things that I didn't even catch."

AI in Preparing for the Podcast

Demonstrating AI's versatility, Joel shares how he utilized ChatGPT to prepare for the podcast itself.

• Automated Preparation: By inputting a run sheet of topics into ChatGPT, Joel was able to generate a preliminary script, streamlining the preparation process.

  [09:07] Joel Unger: "I pasted them in the chat GPT and said, okay, voice mode, let's prep."

• Human Touch: While the AI-assisted preparation was efficient, Joel notes that the AI lacked the personal charm of a human host, highlighting the importance of human oversight.

  [09:24] Joel Unger: "It didn't give me a lightning round question. [...] It just wasn't as charming as your human host."

AI in Design Asset Creation: Animated Logos

Joel recounts a last-minute challenge involving animated logos and how AI facilitated a swift solution.

• Quick Asset Replacement: Faced with the need to replace animated logos across products before a team launch, Joel leveraged Cursor to convert SVGs into animated formats without the extensive time investment typically required.

  [11:35] Joel Unger: "I threw the vector art in there just to get a little start and ask DID to do a clipping mask and it could do that."

• Precision and Iteration: Although some manual adjustments were necessary, the AI provided a substantial head start, enabling Joel to finalize animations efficiently.

  [13:34] Joel Unger: "And it's exactly what we needed."

AI in Illustration and Mood Boards with Midjourney

Exploring further creative applications, Joel discusses his use of Midjourney to generate illustrative assets and mood boards for Trello's mascot, Taco.

• Creating Mood Boards: By inputting black-and-white vector images into Midjourney, Joel generated varied illustrations that served as a foundation for refining the mascot's design.

  [14:14] Joel Unger: "Midjourney is amazing. [...] It's more like a mood board. Right."

• Collaborative Design Process: The AI-generated images acted as a starting point for the design team to establish consistent character traits and design standards.

  [16:10] Joel Unger: "We need to make these choices and make a consistent character clearly. And this is a great starting point for that."

Re-defining Design Process with AI

Reflecting on the broader impact of AI on design, Joel shares his evolving perspective on the role of designers in an AI-augmented workflow.

• From Anxiety to Empowerment: Initially concerned about AI potentially replacing his role, Joel realized that AI tools primarily serve to expedite idea generation and implementation, enhancing his creative value.

  [17:26] Joel Unger: "I was a little anxious, like, is this thing going to take my job? [...] All it really does is accelerate getting those ideas out of your head faster."

• Focus on High-Level Craftsmanship: With AI handling repetitive and time-consuming tasks, designers can dedicate more time to intricate aspects like motion, interaction, and brand consistency.

  [17:55] Joel Unger: "It's pretty eye opening to me, is realizing how much more value I have actually after using these tools."

Lightning Round: Quick Insights and Tips

In a rapid-fire segment, Joel shares his top AI tool recommendations and experiences:

• Top AI Tool Recommendation: Cursor

  [18:33] Joel Unger: "I'm biased, but I think you should jump into cursor [...] your speed just is 10x amazing."

• Challenges with AI in Design: Responsive Design

  [18:47] Joel Unger: "Responsive stuff was surprisingly hard. [...] that problem will be solved very soon once the agent gets access to be able, like, see the browser."

• AI Interaction Techniques: Dealing with Cursor's Limitations

  [19:33] Joel Unger: "It makes me feel bad because if you turn on thinking mode, it will say, user is angry at me. [...]"

Conclusion

Joel Unger's integration of AI tools like Cursor and Midjourney into his design workflow exemplifies the transformative potential of AI in product design. By automating mundane tasks and enabling rapid prototyping, AI empowers designers to focus on creative and strategic aspects of their work. Joel's experiences highlight the importance of embracing AI as a collaborative tool that enhances, rather than replaces, human creativity.

For more insights and to follow Joel Unger's work, visit JoelUnger.com or explore Atlassian's Trello platform.

Notable Quotes:

• "All it really does is accelerate getting those ideas out of your head faster." — Joel Unger 00:04
• "Figma is maybe 10% of the job, and a lot of the rest of it is just thinking about the problems." — Joel Unger 00:04
• "Responsive stuff was surprisingly hard. Like, it can't see your browser, so you have to kind of like take a bunch of screenshots and send it what it looks like at various sizes." — Joel Unger 18:47

This episode offers a comprehensive look into how AI is reshaping the design landscape, providing practical applications and inspiring designers to harness these tools for greater creativity and efficiency.