šŸ¤æ microwave moves

what it takes to design a breakthrough AI product šŸ‘€

I never got into Midjourney šŸ˜¬

But the first time I opened Visual Electric I knew immediately that it was the product I had been waiting forā€¦

They go wayyyy beyond a simple chatbot and offer pointed UI patterns on an infinite canvas.

Now I use Visual Electric for everything (including all of the cover photos on the new /ideas page).

Thatā€™s why I was so excited when their design founder Colin Dunn agreed to an interview šŸ™Œ

Hereā€™s what we can learn from him about designing a breakthrough AI product šŸ‘‡

So I was scrolling Twitter the other day and Fons Mans posted a card animation that I think I watched 10x in a rowā€¦

Obviously the visuals were great, but what made it really special was he used Jitterā€™s new audio feature.

Itā€™s a perfect example of how one simple feature can unlock so many new use cases and creative opportunities. Iā€™m even about to move all of my episode clips into Jitter now!

Audio is such a powerful way to level up your storytelling and bring life and emotion to your designs. I think youā€™ll have a lot of fun playing with this one šŸ‘‡

TOGETHER WITH

šŸš€ Designing a breakthrough AI product

1) Focus on the ā€œappliance layerā€

Once electricity came on the scene in the late 19th century, we quickly replaced candles with lights.

But it wouldā€™ve been impossible to predict the microwave. In fact it took 50+ years before many staple household appliances were invented.

Colin believes the electricity layer will quickly become commoditized and is solely focused on building ā€œappliancesā€ for AI.

Because someone is going to build the oven, the sewing machine, the coffee percolator, the electric can opener, etc. It might even be you šŸ˜‰

2) Obsess over the level of abstraction

Most users donā€™t want to be burdened by all of the knobs and levers of the underlying AI model.

Thatā€™s why itā€™s essential that we define new patterns and mental models that make AI easy to understand.

But you have to be careful, because ā€œthe more you abstract something, the less control users have over itā€.

One example Colin shares is why theyā€™re considering combining the ā€œreference sliderā€ and ā€œcreativity sliderā€. It simplifies the UX but at the cost of power. And striking that balance is one of the hardest parts about designing an AI-native product like Visual Electric.

ā€œThe majority of the work that we've done over the last couple of years is trying to identify the right level of abstractionā€

Colin Dunn

3) Push past natural language

Language is an awkward medium for expressing visual ideas.

If you want high quality visual outputs, then you need to help users provide the right visual inputs.

Itā€™s why I think weā€™re in the ā€œDiscord bot eraā€ of AI for interface design.

Hopefully soon weā€™ll have our Visual Electric moment šŸ˜‰

šŸ“ŗ THIS WEEKā€™S EPISODEā€‹

Meet the design founder of Visual Electric

In this weekā€™s episode we get to learn from founder and designer, Colin Dunn.

The whole discussion is an excellent look at the design founder journey as well as a deep dive into AI-native creative tools. We get into the weeds about:

  • The hidden challenges with designing AI products

  • Colin's approach to early user and market research

  • The art and science of raising funds for your startup

  • What it takes to reach ā€œinformed simplicityā€ in product design

  • Where the value will accrue in the landscape for creative tools

  • Where Colin draws the line between abstraction and power in UX

  • The wild backstory of how the company was named ā€œVisual Electricā€

  • Lessons learned from early startup ideas that were shot down

  • + a lot moreā€¦

Listen on YouTube, Spotify, Apple, or wherever you get your podcasts šŸ‘‡

btw I have an awesome opportunity for youā€¦

You know what I didnā€™t expect out of this weekā€™s episode? Colin announcing a massive update to their company strategyā€¦

Visual Electric is taking on Canva šŸ˜®

In the same way that Linear carved out market share from Jira, Colin believes thereā€™s an opportunity to create a premium graphic design tool that is purpose-built for design-driven companies.

If you want to be one of the first people to use the all-new Visual Electric, join the early access list (takes ~20 sec) šŸ‘‡

(donā€™t miss out on this one)

Watch a real CRIT from the Browser Company

Last weekā€™s episode with the founding designer of the Browser Company might be the most popular yet šŸ™Œ

So hereā€™s some more Arc content if you want to go even deeperā€¦

This video lets you be a fly on the wall during a CRIT with CEO, Josh Miller and Head of Design, Dustin Senos. Itā€™s as uncut and insightful as it gets šŸ‘‡

šŸ«° Create a design system that your team will love to use

Dan Mallā€™s Design Systems in 90 Days is back šŸ™Œ

If your team is ready to get a design system practice up and running then this 90-day live cohort is the ultimate next step.

And the best part?

You can use this link and save $1,300+ if you enroll in the next 8 days 

(yes, that is not a typo lol).

šŸ§ƒ This weekā€™s inspiration juice

Iā€™m obsessed with this Apple Mail login screen concept from Kumail.

Obviously the gradient and UI is gorgeous. But I really appreciate how intentionally he set up a composition to frame his work for Twitter. Itā€™s this level of detail that makes your designs scroll-stopping.

Thiago Costa spent some time imagining if Fey had light mode and then Paco from Linear did the Lordā€™s work and set up a codepen.

The reason I saved this one from Mariana Castilho is because the borders and dividing lines are much more stark than I would typically design. And yetā€¦ I think I love it?

btwā€¦ this was the first time I shared UI inspo in this email. Should I keep doing it? Reply and let me know šŸ™

Meet the Dive partners

I made a list of my favorite products and asked them to come on as sponsors of the newsletter/podcast. They said yes šŸ„¹

The #1 way to support Dive Club is to check them outšŸ‘‡

ā€‹ā€‹Jitterā€‹ ā†’ How I animate my designs

ā€‹ā€‹Framerā€‹ ā†’ How I build my websites

ā€‹ā€‹Mavenā€‹ā†’ How I invest in my career

ā€‹ā€‹Raycastā€‹ā†’ How I do pretty much everything on my computer

šŸ§  Ideas you might've missed

What makes design at Arc so unique (part 1)

Leaving fingerprints vs. putting consistency on a pedestal

How to spot the tiny design decisions like Linear

Dissolving the line between design and engineering

šŸ“ŗ Episodes you might've missed

How to turn a layoff into a dream jobā€‹
Amy Lima (Product designer at Duolingo)

Going from engineer to founding designer of Arcā€‹
Nate Parrott (Founding designer at the Browser Company)

Prototyping, interaction design, and SwiftUIā€‹
Gavin Nelson (Designer at Linear)

How much did you enjoy this issue?

Never hesitate to reply with feedback too :)

Login or Subscribe to participate in polls.

Thanks for reading! I'm working hard to bring you the best design resources on the planet ā¤ļø

If you want to go even deeper you can always:

See you next week šŸ¤æ

ā€” Ridd

P.S. if you were forwarded this email you can ā€‹subscribe here