Season 3

|

Episode 8

Meet the man who broke design Twitter

Marco Cornacchia

Designer @ Figma

Nov 30, 2023

Nov 30, 2023

|

47 min

47 min

music by Dennis

About this Episode

In 2022, Marco Cornacchia was coming off of a failed startup and started working on his new portfolio. Little did he know this project would land him a role as the founding designer at Diagram, lay the foundation for design Twitter’s most viral website, and spawn a talk at Webflow’s conference 🤯

In this episode, Marco shares how he (accidentally) created a new trend of animated bento grids. And we also get a behind the scenes of what it was like being the founding designer of Diagram and ultimately getting acquired by Figma. If you’re interested in designing at a startup then you’ll love this episode ✌️

Share on Twitter
Share on Twitter
Share on LinkedIn
Share on LinkedIn

Deep Dives

Get our weekly breakdowns

Insights + resources from top designers 👇

Lauren LoPrete

Director of Design Systems @ Cash App

David Hoang

VP of Marketing and Design @ Replit

Adrien Griveau

Founding Designer @ Linear

James McDonald

Designer @ Clerk

Femke

Design Lead @ Gusto

Join 10K+ designers

HC

HC

HC

HC

Deep Dives

Get our weekly breakdowns

Free lessons from 👇

Lauren LoPrete

Lead designer @ Netflix

David Hoang

VP of Marketing and Design @ Replit

Adrien Griveau

Founding Designer @ Linear

Femke

Design Lead @ Gusto

Join 10K+ designers

HC

HC

HC

Deep Dives

Get our weekly breakdowns

Insights + resources from top designers 👇

Lauren LoPrete

Director of Design Systems @ Cash App

David Hoang

VP of Marketing and Design @ Replit

Adrien Griveau

Founding Designer @ Linear

James McDonald

Designer @ Clerk

Femke

Design Lead @ Gusto

Join 10K+ designers

HC

HC

HC

HC

Transcript chapters

Welcome to Deep Dives with Marco Cornacchio

What pushes me to kind of go to the next level is when you're kind of forced to figure out something like I talked about my first startup job and we wanted to have this video hero and I didn't know how to make videos and I like discovered this whole other path of like, Oh, maybe I could just build the application inside of Webflow and like, have that be the actual thing that you interact with.

I would have never probably even thought of doing that if I wasn't forced, which is like a ton of startup work is just like, we need this thing and like somebody needs to figure it out, like who's down to go and like go down that path and so understand. What you like and what you like doing, because then you can kind of shape this career and role that you want to take with you to another company.

And you could really offer some really custom thing. Welcome to deep dives. My name is Ridd, and this is where we go deep with the best designers so that you can learn from their journey and apply it to your own career. Today, I'm talking with Marco Cornaccia, who broke design Twitter in the summer of 2023, when they released the all new diagram.

com. This conversation is all about the [00:01:00] finer details of craft, and we even get a behind the scenes look at what it's like to design AI tools at Figma. But first, I wanted to go back in time so that we could be a fly on the wall and see everything that led up to the process of releasing the new Diagram website.

Welcome to Deep Dives with Marco Cornacchio

What pushes me to kind of go to the next level is when you're kind of forced to figure out something like I talked about my first startup job and we wanted to have this video hero and I didn't know how to make videos and I like discovered this whole other path of like, Oh, maybe I could just build the application inside of Webflow and like, have that be the actual thing that you interact with.

I would have never probably even thought of doing that if I wasn't forced, which is like a ton of startup work is just like, we need this thing and like somebody needs to figure it out, like who's down to go and like go down that path and so understand. What you like and what you like doing, because then you can kind of shape this career and role that you want to take with you to another company.

And you could really offer some really custom thing. Welcome to deep dives. My name is Ridd, and this is where we go deep with the best designers so that you can learn from their journey and apply it to your own career. Today, I'm talking with Marco Cornaccia, who broke design Twitter in the summer of 2023, when they released the all new diagram.

com. This conversation is all about the [00:01:00] finer details of craft, and we even get a behind the scenes look at what it's like to design AI tools at Figma. But first, I wanted to go back in time so that we could be a fly on the wall and see everything that led up to the process of releasing the new Diagram website.

Process of releasing the new Diagram website

We had a bunch of products that we needed to kind of showcase on the website. Jordan had previously built a bunch of, uh, Landing pages for the products that we have, like automator or prototyper. Um, magician was in the works now and had its own landing page as well, but the homepage really needed to kind of, to be updated in general, just to have some of the new features from the products that we were working on.

Jordan was aware of my skills and using Webflow from like my portfolio and a bunch of, uh, some single landing page designs that I did for diagram early on. So he was like, he was always like teasing, like, you know, at some point we want to redo diagram. com and. It really needs like an update. And so I'm like, okay, like, and this is like a recurring theme with working under [00:02:00] Jordan at diagram as like a design founders that like, he'd be like, yeah, like this needs to be like touched up a little bit, or like, I want you to work on this exactly, and I'd always be like, it's like, it's pretty good already.

Like I can take it to the next level, but like a lot of the stuff that you would give me is just like, like out of the box, like kind of almost ready to ship in a way. And I felt like that about the landing page designs that were currently up. So I was like, okay, well, if he wants me to work on a new landing page based on what's currently up, like, I'll need to go like, like a really different level than what it's at right now, which it was a very like, clean design and everything.

And I just remember, yeah, having those conversations with him, and when I finally came down to it, and we, you know, we were working on magician and genius, which was our experimental AI design assistant. He was finally like, yeah, I think it's time to do this thing. And like, let's go after it. So we really want to like set the bar high and, you know, as a design company, it really needs to like shoot for the stars here.

And I want to have it to like that linear level quality. I want it to have that effect on people. And, you know, at the time I was [00:03:00] like, Oh yeah, like. Me too, you know, like, uh, like that sounds like a, like a reasonable goal. And I remember like after the college has been like, Oh man, I really have some work to put out for me.

So yeah, that was just kind of like the beginning of it. And yeah, it took a bunch of like different turns and I can get into different iterations and kind of what that process was like. But that was kind of setting the stage for, okay, you know, that like Stripe was the gold standard for a while. Linear has been the standard for a bunch of years now.

Not even saying that diagram has achieved to that level to the end result, but just to, you know, get to that conversation and be in that mind space of, okay, we want to be able to like, be at that level was definitely a challenge, but it was something that was really awesome to even try to, you know, strive for.

I mean, I put out two different polls on Twitter now. We've had basically like a thousand designers vote between the linear website and the diagram website. And both times you've come out victorious. So I think it's pretty safe to say you've, you've inserted yourself into the conversation. We can put it [00:04:00] that way.

Process of releasing the new Diagram website

We had a bunch of products that we needed to kind of showcase on the website. Jordan had previously built a bunch of, uh, Landing pages for the products that we have, like automator or prototyper. Um, magician was in the works now and had its own landing page as well, but the homepage really needed to kind of, to be updated in general, just to have some of the new features from the products that we were working on.

Jordan was aware of my skills and using Webflow from like my portfolio and a bunch of, uh, some single landing page designs that I did for diagram early on. So he was like, he was always like teasing, like, you know, at some point we want to redo diagram. com and. It really needs like an update. And so I'm like, okay, like, and this is like a recurring theme with working under [00:02:00] Jordan at diagram as like a design founders that like, he'd be like, yeah, like this needs to be like touched up a little bit, or like, I want you to work on this exactly, and I'd always be like, it's like, it's pretty good already.

Like I can take it to the next level, but like a lot of the stuff that you would give me is just like, like out of the box, like kind of almost ready to ship in a way. And I felt like that about the landing page designs that were currently up. So I was like, okay, well, if he wants me to work on a new landing page based on what's currently up, like, I'll need to go like, like a really different level than what it's at right now, which it was a very like, clean design and everything.

And I just remember, yeah, having those conversations with him, and when I finally came down to it, and we, you know, we were working on magician and genius, which was our experimental AI design assistant. He was finally like, yeah, I think it's time to do this thing. And like, let's go after it. So we really want to like set the bar high and, you know, as a design company, it really needs to like shoot for the stars here.

And I want to have it to like that linear level quality. I want it to have that effect on people. And, you know, at the time I was [00:03:00] like, Oh yeah, like. Me too, you know, like, uh, like that sounds like a, like a reasonable goal. And I remember like after the college has been like, Oh man, I really have some work to put out for me.

So yeah, that was just kind of like the beginning of it. And yeah, it took a bunch of like different turns and I can get into different iterations and kind of what that process was like. But that was kind of setting the stage for, okay, you know, that like Stripe was the gold standard for a while. Linear has been the standard for a bunch of years now.

Not even saying that diagram has achieved to that level to the end result, but just to, you know, get to that conversation and be in that mind space of, okay, we want to be able to like, be at that level was definitely a challenge, but it was something that was really awesome to even try to, you know, strive for.

I mean, I put out two different polls on Twitter now. We've had basically like a thousand designers vote between the linear website and the diagram website. And both times you've come out victorious. So I think it's pretty safe to say you've, you've inserted yourself into the conversation. We can put it [00:04:00] that way.

Working toward brand transformation

I'd like to continue with the story a little bit, like you get off that call and you realize that you have this ambitious project in front of you. What were some of those next steps that you took?

It kind of turned into more than kind of just a landing page at that point. And kind of was like almost a revisiting of the brand.

And again, we're just looking at all the different tools and things that we were working on, um, like Magician, which is a plugin inside of Figma that had a bunch of different AI utilities that you could use, like Magic Copy, Magic Image, um, even Rename Your Layers, and then Genius, which is, again, this AI, uh, assistant inside of Figma that can help you design, um, alongside of you and has its own cursor and all these things.

So the, all these ideas, and even including the products that, um, We're at diagram even before I joined like automator and prototyper had this like futuristic feel to them Like oh like this kid if you put all these things together and you made a new design tool This would feel like a very futuristic so that kind of became the theme that I was going with was like, you know, the future of design tools or Design tools from the [00:05:00] future.

So that was kind of like Where we started to kind of think about a little bit more of brand transformation. And then from there, yeah, I can get more into detail around what was the thinking around the structure and all that, but it really became a brand conversation first, just spinning out visuals and getting with Jordan and seeing what he thought about them.

Let's double click into the brand transformation part then, because there are a lot of really interesting motifs on the page. You have that kind of space vibe and then you have the magic wand, which makes an appearance in a lot of places and has even kind of now made an appearance on other people's websites as well.

Working toward brand transformation

I'd like to continue with the story a little bit, like you get off that call and you realize that you have this ambitious project in front of you. What were some of those next steps that you took?

It kind of turned into more than kind of just a landing page at that point. And kind of was like almost a revisiting of the brand.

And again, we're just looking at all the different tools and things that we were working on, um, like Magician, which is a plugin inside of Figma that had a bunch of different AI utilities that you could use, like Magic Copy, Magic Image, um, even Rename Your Layers, and then Genius, which is, again, this AI, uh, assistant inside of Figma that can help you design, um, alongside of you and has its own cursor and all these things.

So the, all these ideas, and even including the products that, um, We're at diagram even before I joined like automator and prototyper had this like futuristic feel to them Like oh like this kid if you put all these things together and you made a new design tool This would feel like a very futuristic so that kind of became the theme that I was going with was like, you know, the future of design tools or Design tools from the [00:05:00] future.

So that was kind of like Where we started to kind of think about a little bit more of brand transformation. And then from there, yeah, I can get more into detail around what was the thinking around the structure and all that, but it really became a brand conversation first, just spinning out visuals and getting with Jordan and seeing what he thought about them.

Let's double click into the brand transformation part then, because there are a lot of really interesting motifs on the page. You have that kind of space vibe and then you have the magic wand, which makes an appearance in a lot of places and has even kind of now made an appearance on other people's websites as well.

Nailing down the overarching creative direction

So can you talk a little bit about how you nailed down the overarching creative direction for the site? I, I started off, if you look at the page, like the magician section is actually the first section after kind of that, like. Uh, galaxy hero, if you will, a thing with the bento grids, if you looked at like my website and it's obviously like really trending now and taking off, I started building out, like, what could a bento grid section look like for magician?

And what, what's some of the features that we want to highlight here and, and started to build that out and actually started to feel [00:06:00] more like a magician landing page more so than an actual, like, okay, this is a small section on the website that's going to lead into other products. And remember having this conversation with Jordan around, you know, this.

Maybe we save some of this stuff for the actual magician landing page. And I don't know if this exactly might land on diagram. com and tell the story in the right way. I just kind of built momentum up and I was like, let me do one of these bento grid sections for each of the products and just like, see how that feels.

Like, what would it feel like to have like a little bit of experience from all the different products and be able to interact directly with some of the products that we have and these like interactive prototypes on the page. What could that feel like? And how does it feel to kind of play around with those things?

And I think there's a thing around too, around just. With the designs and with the interactiveness of them of, like, discoverability, I think they tell their own story when you 1st see them and you interact with them, but we wanted them to really feel like. Almost like little games and challenges in a way.

I think there's some other things that I can address here as well. I've [00:07:00] seen. Uh, Brian Levin's interview about, you know, kind of like these crazy bento grids with a bunch of different interactions and animations. And I would just respond to that with saying, like, you have to like, know what your audience is like that approach I probably wouldn't do for any other company or website.

Our audience in a whole is almost, you know, Twitter designers, like designers on Twitter. Like that's the audience that we're trying to reach that was, you know. Jordan has a huge following of designers, and we wanted that to kind of be like, the, the gist of the conversation that kind of spills out into other areas.

But we knew that we really wanted to put this out there and while designers have them play around with things, but that's not to say that the approach wasn't to be informational or to have a page. That's kind of just like all over the place. Like. I would say that the bento grid layout and the copy and everything is like cohesively understanding and does sell the products as well.

I mean, I totally agree. And I was going to ask you about this [00:08:00] anyway, so we can talk about it now, which is trying to get at like the underlying strategy for like why diagram is a company where this did work. I think you hit the nail on the head. Like. Your target audience is designers and people who are pretty likely to be wowed by a landing page and share it on Twitter.

And it turned out to be this incredible marketing tactic for you, but you can't look at that and just copy and paste it into a variety of different industries because it's not going to have the same effect. I do think that makes a lot of sense. I do think people were. We're very impressed by the attention to detail that you put into, you know, an animated grid.

Nailing down the overarching creative direction

So can you talk a little bit about how you nailed down the overarching creative direction for the site? I, I started off, if you look at the page, like the magician section is actually the first section after kind of that, like. Uh, galaxy hero, if you will, a thing with the bento grids, if you looked at like my website and it's obviously like really trending now and taking off, I started building out, like, what could a bento grid section look like for magician?

And what, what's some of the features that we want to highlight here and, and started to build that out and actually started to feel [00:06:00] more like a magician landing page more so than an actual, like, okay, this is a small section on the website that's going to lead into other products. And remember having this conversation with Jordan around, you know, this.

Maybe we save some of this stuff for the actual magician landing page. And I don't know if this exactly might land on diagram. com and tell the story in the right way. I just kind of built momentum up and I was like, let me do one of these bento grid sections for each of the products and just like, see how that feels.

Like, what would it feel like to have like a little bit of experience from all the different products and be able to interact directly with some of the products that we have and these like interactive prototypes on the page. What could that feel like? And how does it feel to kind of play around with those things?

And I think there's a thing around too, around just. With the designs and with the interactiveness of them of, like, discoverability, I think they tell their own story when you 1st see them and you interact with them, but we wanted them to really feel like. Almost like little games and challenges in a way.

I think there's some other things that I can address here as well. I've [00:07:00] seen. Uh, Brian Levin's interview about, you know, kind of like these crazy bento grids with a bunch of different interactions and animations. And I would just respond to that with saying, like, you have to like, know what your audience is like that approach I probably wouldn't do for any other company or website.

Our audience in a whole is almost, you know, Twitter designers, like designers on Twitter. Like that's the audience that we're trying to reach that was, you know. Jordan has a huge following of designers, and we wanted that to kind of be like, the, the gist of the conversation that kind of spills out into other areas.

But we knew that we really wanted to put this out there and while designers have them play around with things, but that's not to say that the approach wasn't to be informational or to have a page. That's kind of just like all over the place. Like. I would say that the bento grid layout and the copy and everything is like cohesively understanding and does sell the products as well.

I mean, I totally agree. And I was going to ask you about this [00:08:00] anyway, so we can talk about it now, which is trying to get at like the underlying strategy for like why diagram is a company where this did work. I think you hit the nail on the head. Like. Your target audience is designers and people who are pretty likely to be wowed by a landing page and share it on Twitter.

And it turned out to be this incredible marketing tactic for you, but you can't look at that and just copy and paste it into a variety of different industries because it's not going to have the same effect. I do think that makes a lot of sense. I do think people were. We're very impressed by the attention to detail that you put into, you know, an animated grid.

Testing specific design details

But like you said, these little challenges and games, it does feel more like challenges and games than pure animations. And I know that you built these in Webflow and I still don't get it. What did it actually take to create these games inside of a bento cart? Like, can [00:09:00] you get to a more specificity on like, how the heck did you make that magic happen?

I kind of went into my first design job having Webflow as kind of a thing in my toolkit. I was doing freelance website designs at the time. Um, for some freelance clients, and I remember, yeah, doing the 1st landing page for that startup. And, uh, the startup was for, like, this command line interface that can help you schedule.

And it was like, this, uh, command line that comes up on your screen, and you're able to interact with it and type things into it. And. I remember the founder wanted me to create a video for that hero section of that first website that I was working on for the startup. And I was like, man, I don't even really know, like I've never, you know, done animation design.

I've never really created a video. I don't even know where to get started. You know, I didn't have a good workflow set up or even skill set developed around creating like interactive videos or not even interactive videos, just video and motion design in general. So, but what I did know, I was like, you know, Webflow has these interactions and animations that I [00:10:00] could put together.

Like, what if I just built like a wrapper of the application that we're selling or and that we're marketing inside of Webflow? And then I'll just do the animations with HTML, CSS, JavaScript and move things around and. Let me see how that feels. And like, yeah, I remember doing it and be like, Oh, I'm like, this is like a waste of time.

Like, why am I trying to rebuild this application inside of a web builder? Like, it just seemed really insane and kind of silly in the moment. Um, but I remember, like, getting to a point where, like, things were working and moving around and it was also, I can control the responsiveness of it. And I didn't have all these kind of blockers around, you know, background videos and having to, you know, have them.

I remember there was like a gradient background. Gradients were like, I mean, they're still kind of in, but like, they're like really in at the time. And so I was like, I can't even really make a video that has a transparent background that will like work on this like gradient that I'm doing. So I don't even know if like a video is an option right now.

So it just pushed me further down that path to be like, how far can I really push the Webflow platform? [00:11:00] To have the correct animations to make this application feel like it's the real thing on your screen. Um, and the end result was, was, was pretty good. Like I remember the founder was very happy with it.

I remember the conversion rates were pretty well. So that was my first like dive and attempt to be like, Oh, wow. Maybe I could just for marketing websites, just like build a very simple version of different parts of the application and just show exactly what they do in that way.

Testing specific design details

But like you said, these little challenges and games, it does feel more like challenges and games than pure animations. And I know that you built these in Webflow and I still don't get it. What did it actually take to create these games inside of a bento cart? Like, can [00:09:00] you get to a more specificity on like, how the heck did you make that magic happen?

I kind of went into my first design job having Webflow as kind of a thing in my toolkit. I was doing freelance website designs at the time. Um, for some freelance clients, and I remember, yeah, doing the 1st landing page for that startup. And, uh, the startup was for, like, this command line interface that can help you schedule.

And it was like, this, uh, command line that comes up on your screen, and you're able to interact with it and type things into it. And. I remember the founder wanted me to create a video for that hero section of that first website that I was working on for the startup. And I was like, man, I don't even really know, like I've never, you know, done animation design.

I've never really created a video. I don't even know where to get started. You know, I didn't have a good workflow set up or even skill set developed around creating like interactive videos or not even interactive videos, just video and motion design in general. So, but what I did know, I was like, you know, Webflow has these interactions and animations that I [00:10:00] could put together.

Like, what if I just built like a wrapper of the application that we're selling or and that we're marketing inside of Webflow? And then I'll just do the animations with HTML, CSS, JavaScript and move things around and. Let me see how that feels. And like, yeah, I remember doing it and be like, Oh, I'm like, this is like a waste of time.

Like, why am I trying to rebuild this application inside of a web builder? Like, it just seemed really insane and kind of silly in the moment. Um, but I remember, like, getting to a point where, like, things were working and moving around and it was also, I can control the responsiveness of it. And I didn't have all these kind of blockers around, you know, background videos and having to, you know, have them.

I remember there was like a gradient background. Gradients were like, I mean, they're still kind of in, but like, they're like really in at the time. And so I was like, I can't even really make a video that has a transparent background that will like work on this like gradient that I'm doing. So I don't even know if like a video is an option right now.

So it just pushed me further down that path to be like, how far can I really push the Webflow platform? [00:11:00] To have the correct animations to make this application feel like it's the real thing on your screen. Um, and the end result was, was, was pretty good. Like I remember the founder was very happy with it.

I remember the conversion rates were pretty well. So that was my first like dive and attempt to be like, Oh, wow. Maybe I could just for marketing websites, just like build a very simple version of different parts of the application and just show exactly what they do in that way.

Deciding on what to create within Figma

It's amazing. I mean how many different states are you even keeping track of and also a question I have is how much of this is being figured out in figma Obviously Figma is very limited in the types of prototypes that you're creating, but I would imagine like there's some visual mapping that maybe has to happen.

So can you talk to us about how you actually figured out what you were going to make? Kind of fast forwarding again to diagram things and, you know, doing this a few times where I kind of know the things that I'm going to animate and what type of assets I'm going to need. Um, and I said this in my talk at Webflow Conf [00:12:00] that was kind of around this idea of like creating websites that speak for themselves and being very almost literal on your landing page of like, here's the product.

You can interact with it. Here's different parts of it. And you can see exactly what these things do and how they're, how could they benefit you. I'd sit like, this is just like, breaking down my time, like, for the diagram site, specifically, where there was a lot of different animations. It was like, 30 percent of my time inside of, uh, figma, just kind of laying things out, getting the lay of the land, seeing what the overall structure was going to be.

And then the rest, like, 70 percent of the time is inside of webflow, like, actually figuring out what those animations are going to be exactly. And kind of like spent, you know, rebuilding parts of the UI there. And, you know, I think it's just a, a balancing act of like, if you went through doing a bunch of these, like what things you need, like you might need the, like SVG icons for the specific parts of the application, but you know that you could like build the wrapper and HTML and CSS, you don't need to export anything from Figma.

So it's just kind of a learning process. And, um, yeah, something that I've [00:13:00] just, it's just like such a weird little thing that I picked up. Over the years of just like taking this approach.

Deciding on what to create within Figma

It's amazing. I mean how many different states are you even keeping track of and also a question I have is how much of this is being figured out in figma Obviously Figma is very limited in the types of prototypes that you're creating, but I would imagine like there's some visual mapping that maybe has to happen.

So can you talk to us about how you actually figured out what you were going to make? Kind of fast forwarding again to diagram things and, you know, doing this a few times where I kind of know the things that I'm going to animate and what type of assets I'm going to need. Um, and I said this in my talk at Webflow Conf [00:12:00] that was kind of around this idea of like creating websites that speak for themselves and being very almost literal on your landing page of like, here's the product.

You can interact with it. Here's different parts of it. And you can see exactly what these things do and how they're, how could they benefit you. I'd sit like, this is just like, breaking down my time, like, for the diagram site, specifically, where there was a lot of different animations. It was like, 30 percent of my time inside of, uh, figma, just kind of laying things out, getting the lay of the land, seeing what the overall structure was going to be.

And then the rest, like, 70 percent of the time is inside of webflow, like, actually figuring out what those animations are going to be exactly. And kind of like spent, you know, rebuilding parts of the UI there. And, you know, I think it's just a, a balancing act of like, if you went through doing a bunch of these, like what things you need, like you might need the, like SVG icons for the specific parts of the application, but you know that you could like build the wrapper and HTML and CSS, you don't need to export anything from Figma.

So it's just kind of a learning process. And, um, yeah, something that I've [00:13:00] just, it's just like such a weird little thing that I picked up. Over the years of just like taking this approach.

Leading with your work

I mean, it is a niche skill.

I haven't really seen it done before and yet it's pretty interesting because you have designers all over the world are kind of trying to copy you a little bit.

Like you've definitely kickstarted a pretty significant trend. And maybe people who first saw it on the diagram website, but man, if you're listening to this and you haven't been to Marco's portfolio, you should go to Marco dot FYI, because that was actually the first place that I saw it. And it's just incredible.

Like it's incredible. The intricacies that he has created and everything feels so alive. And we talk a lot about this idea of not burying your work in a case study and like putting it on the homepage. And man, this is the example of what it looks like to lead with your work. Yeah, to speak a little bit about, I guess, my portfolio in that sense, that was kind of my thinking around.

It was, I remember at the time, again, this is like my first design [00:14:00] job that I was leaving. Um, and I felt like I had very limited design work, even, you know, even though I was like the solo designer at the startup, it wasn't necessarily a success or something that people knew of. Um, and there was only a few projects, uh, that I actually had a hand in, you know, crafting.

It was a couple, it was like 2 products that we, we tried out. Um, and I just remember feeling this, like, overwhelming sense of like, oh, man, like, I don't know if I have enough work to, like, get that next job that I want. And like, how do I. What can I do to like, really bring this life to work and like, put it in people's faces as soon as they visit the site where they don't have to like, dive through project pages and and all that stuff.

And, you know, I still wanted to have those things on the website, but I really wanted to make a good 1st impression of, like, you on the site, you can see the work immediately you can interact with it. And this is, again, coming from that 1st startup job where I had to make that landing page, um, and decided to make the application enemy and interact and be interactive.

And saying, like, what if I just apply that [00:15:00] thinking and that framework to my own work and that way I'll just spread it all out on the page and people can interact with things immediately as soon as they get on there, you can get a sense of, like, how the design works, what it's for. Um, and yeah, again, it was just hoping that that, like, left a good impression on people when they first visited my site, you could immediately get to the work and and kind of experience it firsthand.

I think one of the reasons I'm so inspired by your story is you didn't really have this big name background before Diagram, like you kind of came out of left field where similar to myself, even like a startup that you put probably a lot into that didn't ultimately get to the place where you thought it might go and you're kind of just left like, okay, now what the fact that you then created this portfolio, which one.

What a Twitter DM from Jordan is in itself like incredible and then led to the creation of one of the best websites on the internet and an entire design trend. [00:16:00] I mean, can you imagine if someone would have told you that in early 2022, what your reaction would be? Even when I put my portfolio out, like I wasn't like, Oh, this is going to be like, this is going to be the thing.

Like this is going to lock so many doors. I was just like, man, like this is really my best attempt. And like, I don't know what the next step is going to be for me. Like maybe I'll join another startup or maybe, you know, I'll go back to agency life, which is what I originally started out with, but yeah, I put this site out there and like literally overnight I had DMS from pretty much any top company that you could ever dream of wanting to be at.

Like somebody reached out, tried to set up an interview and like at the time I was like. I, I didn't have my job. My partner was also looking for a career. We were like, in the midst of moving was actually on the moving day that I just like, put it out there and I was like, let me put this out there. So, like, hopefully, I'll get a couple of leads.

And like, once we're done, like, moving and switching things around and everything and getting settled, like, also to take interviews and all that. It was just like, this influx of people. And it was [00:17:00] like, wow, like, this is. Like, this is amazing. This is all you can ask for. And, um, yeah, the cherry on top was just Jordan reaching out in the way that he did and kind of having and starting those conversations with him and yeah, it just, it all worked out really well.

Leading with your work

I mean, it is a niche skill.

I haven't really seen it done before and yet it's pretty interesting because you have designers all over the world are kind of trying to copy you a little bit.

Like you've definitely kickstarted a pretty significant trend. And maybe people who first saw it on the diagram website, but man, if you're listening to this and you haven't been to Marco's portfolio, you should go to Marco dot FYI, because that was actually the first place that I saw it. And it's just incredible.

Like it's incredible. The intricacies that he has created and everything feels so alive. And we talk a lot about this idea of not burying your work in a case study and like putting it on the homepage. And man, this is the example of what it looks like to lead with your work. Yeah, to speak a little bit about, I guess, my portfolio in that sense, that was kind of my thinking around.

It was, I remember at the time, again, this is like my first design [00:14:00] job that I was leaving. Um, and I felt like I had very limited design work, even, you know, even though I was like the solo designer at the startup, it wasn't necessarily a success or something that people knew of. Um, and there was only a few projects, uh, that I actually had a hand in, you know, crafting.

It was a couple, it was like 2 products that we, we tried out. Um, and I just remember feeling this, like, overwhelming sense of like, oh, man, like, I don't know if I have enough work to, like, get that next job that I want. And like, how do I. What can I do to like, really bring this life to work and like, put it in people's faces as soon as they visit the site where they don't have to like, dive through project pages and and all that stuff.

And, you know, I still wanted to have those things on the website, but I really wanted to make a good 1st impression of, like, you on the site, you can see the work immediately you can interact with it. And this is, again, coming from that 1st startup job where I had to make that landing page, um, and decided to make the application enemy and interact and be interactive.

And saying, like, what if I just apply that [00:15:00] thinking and that framework to my own work and that way I'll just spread it all out on the page and people can interact with things immediately as soon as they get on there, you can get a sense of, like, how the design works, what it's for. Um, and yeah, again, it was just hoping that that, like, left a good impression on people when they first visited my site, you could immediately get to the work and and kind of experience it firsthand.

I think one of the reasons I'm so inspired by your story is you didn't really have this big name background before Diagram, like you kind of came out of left field where similar to myself, even like a startup that you put probably a lot into that didn't ultimately get to the place where you thought it might go and you're kind of just left like, okay, now what the fact that you then created this portfolio, which one.

What a Twitter DM from Jordan is in itself like incredible and then led to the creation of one of the best websites on the internet and an entire design trend. [00:16:00] I mean, can you imagine if someone would have told you that in early 2022, what your reaction would be? Even when I put my portfolio out, like I wasn't like, Oh, this is going to be like, this is going to be the thing.

Like this is going to lock so many doors. I was just like, man, like this is really my best attempt. And like, I don't know what the next step is going to be for me. Like maybe I'll join another startup or maybe, you know, I'll go back to agency life, which is what I originally started out with, but yeah, I put this site out there and like literally overnight I had DMS from pretty much any top company that you could ever dream of wanting to be at.

Like somebody reached out, tried to set up an interview and like at the time I was like. I, I didn't have my job. My partner was also looking for a career. We were like, in the midst of moving was actually on the moving day that I just like, put it out there and I was like, let me put this out there. So, like, hopefully, I'll get a couple of leads.

And like, once we're done, like, moving and switching things around and everything and getting settled, like, also to take interviews and all that. It was just like, this influx of people. And it was [00:17:00] like, wow, like, this is. Like, this is amazing. This is all you can ask for. And, um, yeah, the cherry on top was just Jordan reaching out in the way that he did and kind of having and starting those conversations with him and yeah, it just, it all worked out really well.

Working at Diagram

I find it inspiring and I'm sure a lot of people listening do as well. I want to talk a little bit more broadly about your time at Diagram, not just as like, you know, the diagram. com designer, but as the. Founding product designer and everything that went into that role, because you joined at a really interesting time where people didn't even know what chat GPT was yet.

Like we hadn't really hit the AI hype cycle. So can you give us a little bit more of a behind the scenes of what that role looked like and some of the key moments before the acquisition happened? I guess I'll just pick off from some of the early conversations I had with Jordan about the founding designer role there.

And yeah, this, again, this was at a time like. Pre chat GBT the public having this like awareness of AI even like it was like [00:18:00] trickling in on Twitter And I'd like read a little bit about it But I wasn't like full be like okay like AI is the next thing and I don't think a majority of people were Jordan of course like is always out of the curve and like you know built like a GPT three thing inside of figma that he was like taking screenshots of designs like having it like assemble inside of figma and Just having early conversations with him and, like, getting really excited about what he was working on and, like, how he saw the vision of the company going before again, before all this hype cycle and again, they had some products that were doing really well, like automator, where you can do automations inside of Figma.

It's like a drag and drop interface. So I just got really sold on the vision and we had 1 of our 1st off sites in New York where we. We had this Magician plugin, which again was like AI utilities inside of Figma. We were using GPT 3 at the time. Again, chat GPT wasn't really a thing. People were, not a ton of people were kind of exploring this space at the time.

So, it felt like a very novel idea to like, even inside of Figma to be able to like, manipulate text and like make this sound casual or make this longer. And, um, seeing some of [00:19:00] those things come to life like before. It was kind of table stakes, like what it is now in different products was like, super exciting and super inspiring.

Um, but the end goal we always wanted to reach towards was this really like design assistant inside of Figma or inside of a design tool in general that could like, really level up your work and like, help you, you know, design alongside you or generate designs or, you know, do accessibility checks, all these different things that we had ideas around.

And so I remember sitting at the offsite and. We're all kind of just thinking like, like, yeah, what should we work on to like, get towards this assistant thing. And we always wanted to do, we always take a lot of inspiration from, uh, get hubs, uh, co pilot if you, if you're familiar, I'm sure a lot of people like use it, that do engineering work, but basically just like.

Uh, we'll spit out the next line of code that, and think you might need inside of your thing that you're building. And so we thought, what does this mean in the design sense? Like, how could we build this copilot experience for a designer? And like, we all know that like designing is not a very like linear [00:20:00] path in the way that coding might be where the next thing you want is like based on your selection.

It's like the next thing after it, like, it's not this linear path. In fact, it's really more like a circle. You're kind of going back and forth and the kind of always. Uh, tweaking things and so we were thinking, so what could this copilot experience be for a designer? And what would that feel like? And so, um, it was actually Vincent, our design engineers, like, 1st week.

It might, it might even been his, like, 1st day there. Um, and it was just so we had an offsite to kind of just to get to know each other. And we thought, like, I don't know, maybe we'll, like, make something cool. So. I think in, like, 3 hours, maybe less, we got something working where, um, based on your selection side of figment was, like, guessing in the next.

Component or button or anything in the design, in the design that should go there. Um, it was just this like moment of like, wow, like within like two or three hours of work, like we have something very promising here. Um, and we went home, you know, super excited about, you know, what can we do with [00:21:00] this? And I think it was that night that chat GPT came out as well.

So I remember I remember sitting in the hotel with sid, which is a founding engineer at diagram and like messing around with this thing. And just like being like, like just completely blown away. And you could just tell that, like, based on what we were working on and kind of, it was just this moment of like, okay, AI has definitely arrived.

And like, yeah. And the next like two, three months from there, you just saw this complete explosion of all these different AI experiments and people being very aware of it, using chat to BT. And it's kind of just kind of like off to the races since then.

Working at Diagram

I find it inspiring and I'm sure a lot of people listening do as well. I want to talk a little bit more broadly about your time at Diagram, not just as like, you know, the diagram. com designer, but as the. Founding product designer and everything that went into that role, because you joined at a really interesting time where people didn't even know what chat GPT was yet.

Like we hadn't really hit the AI hype cycle. So can you give us a little bit more of a behind the scenes of what that role looked like and some of the key moments before the acquisition happened? I guess I'll just pick off from some of the early conversations I had with Jordan about the founding designer role there.

And yeah, this, again, this was at a time like. Pre chat GBT the public having this like awareness of AI even like it was like [00:18:00] trickling in on Twitter And I'd like read a little bit about it But I wasn't like full be like okay like AI is the next thing and I don't think a majority of people were Jordan of course like is always out of the curve and like you know built like a GPT three thing inside of figma that he was like taking screenshots of designs like having it like assemble inside of figma and Just having early conversations with him and, like, getting really excited about what he was working on and, like, how he saw the vision of the company going before again, before all this hype cycle and again, they had some products that were doing really well, like automator, where you can do automations inside of Figma.

It's like a drag and drop interface. So I just got really sold on the vision and we had 1 of our 1st off sites in New York where we. We had this Magician plugin, which again was like AI utilities inside of Figma. We were using GPT 3 at the time. Again, chat GPT wasn't really a thing. People were, not a ton of people were kind of exploring this space at the time.

So, it felt like a very novel idea to like, even inside of Figma to be able to like, manipulate text and like make this sound casual or make this longer. And, um, seeing some of [00:19:00] those things come to life like before. It was kind of table stakes, like what it is now in different products was like, super exciting and super inspiring.

Um, but the end goal we always wanted to reach towards was this really like design assistant inside of Figma or inside of a design tool in general that could like, really level up your work and like, help you, you know, design alongside you or generate designs or, you know, do accessibility checks, all these different things that we had ideas around.

And so I remember sitting at the offsite and. We're all kind of just thinking like, like, yeah, what should we work on to like, get towards this assistant thing. And we always wanted to do, we always take a lot of inspiration from, uh, get hubs, uh, co pilot if you, if you're familiar, I'm sure a lot of people like use it, that do engineering work, but basically just like.

Uh, we'll spit out the next line of code that, and think you might need inside of your thing that you're building. And so we thought, what does this mean in the design sense? Like, how could we build this copilot experience for a designer? And like, we all know that like designing is not a very like linear [00:20:00] path in the way that coding might be where the next thing you want is like based on your selection.

It's like the next thing after it, like, it's not this linear path. In fact, it's really more like a circle. You're kind of going back and forth and the kind of always. Uh, tweaking things and so we were thinking, so what could this copilot experience be for a designer? And what would that feel like? And so, um, it was actually Vincent, our design engineers, like, 1st week.

It might, it might even been his, like, 1st day there. Um, and it was just so we had an offsite to kind of just to get to know each other. And we thought, like, I don't know, maybe we'll, like, make something cool. So. I think in, like, 3 hours, maybe less, we got something working where, um, based on your selection side of figment was, like, guessing in the next.

Component or button or anything in the design, in the design that should go there. Um, it was just this like moment of like, wow, like within like two or three hours of work, like we have something very promising here. Um, and we went home, you know, super excited about, you know, what can we do with [00:21:00] this? And I think it was that night that chat GPT came out as well.

So I remember I remember sitting in the hotel with sid, which is a founding engineer at diagram and like messing around with this thing. And just like being like, like just completely blown away. And you could just tell that, like, based on what we were working on and kind of, it was just this moment of like, okay, AI has definitely arrived.

And like, yeah. And the next like two, three months from there, you just saw this complete explosion of all these different AI experiments and people being very aware of it, using chat to BT. And it's kind of just kind of like off to the races since then.

What the daily design role at Diagram looked like

Something that I think that's really interesting about your role versus roles that.

I've had in the past is I think a lot of designers, you know, they set up to solve problems and in some ways you kind of are, but it feels a little bit more indirect than a traditional product design role. Like you're more just tinkering at the very fringe of technology and a big part of what it looks like to [00:22:00] design is to figure out.

What's even possible. So can you talk a little bit about what did design at diagram on a daily basis actually look like? What, what were the kinds of things that you were exploring? And, you know, in my head, I can't even begin to imagine what you were even creating inside of Figma versus just playing with chat to BT and working with engineering.

So can you just shed a little bit of light? To help people understand what it was like in the early days to be a designer at diagram. It was very, very experimental and very exploratory heavy. Like, and I think Jordan just has a way of working like this in a very like visionary way of let's try a bunch of little different things and see like what feels good.

Um, if there's any promise here, like what should we kind of go after, and he's totally like comfortable with like putting the experiments out there and like seeing what people think about them and having people try them out. And I think that's, like, almost the perfect mindset to kind of have with some of the stuff, knowing [00:23:00] that the speed that it moves as so ridiculously fast, like, something so new and novel that we haven't seen that.

You almost have to kind of operate under that impression or under that assumption that, you know, in a week from now, things can be like, completely different. The whole landscape could shift. And I think that's what you saw again with, like. Talking back to back to like early genius days when we were trying to do like auto complete and then chat GPT releases that night and suddenly it's like.

Wait, like maybe chat is the experience. Maybe that's what we should go after. And you've seen like a bunch of people sprint after that, but again, it's just like trying to stay up on the trends, trying to stay up on like, what's the latest models, what can they handle? What can they do? And I think it was a really good approach to like, let's try all these different little different things.

Like, how does it feel to have an agent inside of Figma that like can have its own cursor and feels like an assistant, or, you know, maybe you have these building blocks that you're putting individual prompts in and you're kind of placing them around on your design. And. You know, you're hitting generate and it based on the prompts and based on the positioning, it could design for you.

[00:24:00] And it was just all these different explorations that we were kind of building up to, and we're like, okay, which ones can we take, which ones feel good that we can put into a product and kind of release there, what, what are these things that we need to like, really, truly make an assistant that could help you inside of a design tool.

And so again, it was just all these different explorations that we're still trying out.

And I like the emphasis on explorations and. You know, you mentioned GitHub's Copilot earlier, which is a parallel that I like to draw as well. And I think you kind of nailed it. I like this emphasis on the linear path versus more of a circular path.

And I think that's probably the dominant reason for why we don't have designs equivalent of Copilot quite yet. And yet we still see all these explorations. And you know, my Twitter feed's been flooded with the build it button over the last week. And... You kind of start to picture like, what could this look like?

What could this look like? So I'd love to hear from you. And AI assistant for designers. I think that still can look like a million different [00:25:00] things as I'm sure you know, better than all of us. And I've heard people talk about it as, you know, expanding creative explorations and some people refer to it more as like a janitor or a linter, and some people are looking at it really as like, okay, just help me think about that next step.

And more of a sequential process. What do you think? Dominant breakthrough use case would be for AI where designers actually would be using it in their day to day, like something like a GitHub co pilot.

What the daily design role at Diagram looked like

Something that I think that's really interesting about your role versus roles that.

I've had in the past is I think a lot of designers, you know, they set up to solve problems and in some ways you kind of are, but it feels a little bit more indirect than a traditional product design role. Like you're more just tinkering at the very fringe of technology and a big part of what it looks like to [00:22:00] design is to figure out.

What's even possible. So can you talk a little bit about what did design at diagram on a daily basis actually look like? What, what were the kinds of things that you were exploring? And, you know, in my head, I can't even begin to imagine what you were even creating inside of Figma versus just playing with chat to BT and working with engineering.

So can you just shed a little bit of light? To help people understand what it was like in the early days to be a designer at diagram. It was very, very experimental and very exploratory heavy. Like, and I think Jordan just has a way of working like this in a very like visionary way of let's try a bunch of little different things and see like what feels good.

Um, if there's any promise here, like what should we kind of go after, and he's totally like comfortable with like putting the experiments out there and like seeing what people think about them and having people try them out. And I think that's, like, almost the perfect mindset to kind of have with some of the stuff, knowing [00:23:00] that the speed that it moves as so ridiculously fast, like, something so new and novel that we haven't seen that.

You almost have to kind of operate under that impression or under that assumption that, you know, in a week from now, things can be like, completely different. The whole landscape could shift. And I think that's what you saw again with, like. Talking back to back to like early genius days when we were trying to do like auto complete and then chat GPT releases that night and suddenly it's like.

Wait, like maybe chat is the experience. Maybe that's what we should go after. And you've seen like a bunch of people sprint after that, but again, it's just like trying to stay up on the trends, trying to stay up on like, what's the latest models, what can they handle? What can they do? And I think it was a really good approach to like, let's try all these different little different things.

Like, how does it feel to have an agent inside of Figma that like can have its own cursor and feels like an assistant, or, you know, maybe you have these building blocks that you're putting individual prompts in and you're kind of placing them around on your design. And. You know, you're hitting generate and it based on the prompts and based on the positioning, it could design for you.

[00:24:00] And it was just all these different explorations that we were kind of building up to, and we're like, okay, which ones can we take, which ones feel good that we can put into a product and kind of release there, what, what are these things that we need to like, really, truly make an assistant that could help you inside of a design tool.

And so again, it was just all these different explorations that we're still trying out.

And I like the emphasis on explorations and. You know, you mentioned GitHub's Copilot earlier, which is a parallel that I like to draw as well. And I think you kind of nailed it. I like this emphasis on the linear path versus more of a circular path.

And I think that's probably the dominant reason for why we don't have designs equivalent of Copilot quite yet. And yet we still see all these explorations. And you know, my Twitter feed's been flooded with the build it button over the last week. And... You kind of start to picture like, what could this look like?

What could this look like? So I'd love to hear from you. And AI assistant for designers. I think that still can look like a million different [00:25:00] things as I'm sure you know, better than all of us. And I've heard people talk about it as, you know, expanding creative explorations and some people refer to it more as like a janitor or a linter, and some people are looking at it really as like, okay, just help me think about that next step.

And more of a sequential process. What do you think? Dominant breakthrough use case would be for AI where designers actually would be using it in their day to day, like something like a GitHub co pilot.

Dominant breakthorugh use cases in AI for designers

Yeah. I don't know if I'd like call out in a specific dominant form that could take four designers, but I'll just say that, and this might be true with other, Applications as well and other, you know, practices is just, I think it'll just kind of be everywhere and you won't even actually know some of the time that it's AI.

It's doing some of this, like, heavy lifting for you again. I could take the form of a tool and you kind of like, no, and we've seen all like the magic wands and sparkles and different things that people are manifesting now to kind of get this idea of [00:26:00] this tool that can create things for you or edit things for you a little bit more magically and a little bit less manual than you'd have to do on your own.

But. Yeah. I think there's a ton of uplifting that we can do across the products and even figment specifically where. Um, again, like, just being in places that maybe the user isn't even aware that this is kind of doing some of the uplifting and doing some of the heavy lifting for you, but just kind of meet you where you're already expected to be as a designer.

If you're in a panel, or you're in a specific part of a design. Um, it's just making those interactions easier. And, um, I think if you put a bunch of those things together and stack a bunch of those little wins, even if you didn't add this, like, major AI features, your product, you immediately have a way better experience.

You immediately let way more people inside of the door. And like, for us, I think we're thinking about that mindset too. And we're also thinking. You know, what's the North star. What's the, what's the vision of this, but also let's not forget like what we can do in the intermediate term to really like uplevel the product and make, make design accessible to more [00:27:00] people.

Dominant breakthorugh use cases in AI for designers

Yeah. I don't know if I'd like call out in a specific dominant form that could take four designers, but I'll just say that, and this might be true with other, Applications as well and other, you know, practices is just, I think it'll just kind of be everywhere and you won't even actually know some of the time that it's AI.

It's doing some of this, like, heavy lifting for you again. I could take the form of a tool and you kind of like, no, and we've seen all like the magic wands and sparkles and different things that people are manifesting now to kind of get this idea of [00:26:00] this tool that can create things for you or edit things for you a little bit more magically and a little bit less manual than you'd have to do on your own.

But. Yeah. I think there's a ton of uplifting that we can do across the products and even figment specifically where. Um, again, like, just being in places that maybe the user isn't even aware that this is kind of doing some of the uplifting and doing some of the heavy lifting for you, but just kind of meet you where you're already expected to be as a designer.

If you're in a panel, or you're in a specific part of a design. Um, it's just making those interactions easier. And, um, I think if you put a bunch of those things together and stack a bunch of those little wins, even if you didn't add this, like, major AI features, your product, you immediately have a way better experience.

You immediately let way more people inside of the door. And like, for us, I think we're thinking about that mindset too. And we're also thinking. You know, what's the North star. What's the, what's the vision of this, but also let's not forget like what we can do in the intermediate term to really like uplevel the product and make, make design accessible to more [00:27:00] people.

Deep Dives

Get our weekly breakdowns

Insights + resources from top designers 👇

Lauren LoPrete

Director of Design Systems @ Cash App

David Hoang

VP of Marketing and Design @ Replit

Adrien Griveau

Founding Designer @ Linear

James McDonald

Designer @ Clerk

Femke

Design Lead @ Gusto

Join 10K+ designers

HC

HC

HC

HC

"

I've been binging Dive Club lately and the quality is nuts

Literally the only show about design I watch”

Eugene Fedorenko

"

I've been binging Dive Club lately and the quality is nuts

Literally the only show about design I watch”

Eugene Fedorenko

hello@dive.club

Ⓒ Dive 2024