Stop Redesigning! Your Graphics Can Update Themselves.

All right, so for our first sneak, I hope you're ready for it. I'm I'm here. I'm ready. You've been We've been talking about real-time data, and that's a big focus for everyone in this audience. And it's more than just being real-time, it's being accessible. And so we thought, what if we could bring that data into creative assets? And so to show us how to do this, we have Project Concurrent, and we have Tonyu to show it off. Woo! Guys, come on. Come on, you guys. >> [cheering] >> SHE'S GOING TO HAVE TO FIGHT another woman. woman. That's why she's here. >> [gasps] >> All right. Thanks, Eric. So, hi Eliza. Hi, everyone. Check out my sneaks, bro. >> that. Look at that. >> [cheering] >> Okay.

>> Okay. So, I'm sure all of you here at some point you had to create designs with data. And for example, and Eliza, this may be a situation you're all too familiar with. Let's say you're trying to create a poster for your next event tour. You design the cities, the dates, and ticket prices, and of course, things change last minute. Right? Cities get added, ticket prices change. And so, Eliza, in these scenarios, what do you usually do when plans change after the flyers go live? After the flyer what? Goes live. Oh, I call my web team who does what you guys do, and I'm like, someone's getting fired. Oh. >> [laughter] >> [laughter] >> Build my own flyer. Oh, no. So, your web team might have to go back into the into the editor, maybe change some of these fields, change the dates, and do it enough times, and you may end up with a scenario like this. Right? Tour poster two, three, revised, new, final, actual final, etc. Too much. Exactly. Too many options. So, instead, what if you only had to make one design? And this design somehow magically updates even after you export

it. So, introducing Project Concurrent, a tool that allows users to create living canvases and living designs that self-update each time information changes online. I have this idea. Oh. Like like on a like a lot of NyQuil like a year ago, I was like, what if it could just do it itself? >> [laughter] >> This is [ __ ] brilliant. You made my tour look like an advertisement for a dog grooming salon, but [laughter] that's cool that we're touring that. Okay. So, let's say we have this website

where we can go on and vote for which cities you want to see on this next tour. As well as as a summary page of all the rankings of the top ranked cities. So, let's go ahead and copy this URL and add it to our tool. So, this opens up an interactive browser, which we can then use to select different elements to link to our design. So, for example, let's select the first city, Atlanta, which is the most popular right now, and link it to the first city on our design. So, hit bam and link, and select text, and just like that, we have a mapping between our website and the canvas. Woo! Yeah. Very cool. So, you don't have to change the actual flyer, you can change it behind the scenes, and then the flyer updates. >> Yes. So, as long as as it's linked, everything will update afterwards. That's amazing. So, now let's do

something more complex, right? Let's say we want to apply a 40% discount to the ticket price of the of the top ranked city. >> Oh. >> Oh. I guess it's not common. Are we not doing well? Okay. Okay. So, to do that, let's go ahead and as before, select the corresponding element and link them. But this time, instead of copying it one for one, we're going to switch modes to our formula, and on this dollar lecture, we're going to say apply a 40% discount. 10. 10%? Okay. Okay. Does it understand BOGO? Okay. Okay. Let's do 10. We'll we'll So, hit generate, and after a quick while, it'll return our formula, which we can then apply. And so, that's our new price. We can add back the dollar sign, hit save, and here we go. Here's our new ticket price. Yeah. Woah. $67. Just a 10% >> amazing. Okay. >> amazing. Okay. So, you can imagine that we can keep repeating this process for the rest of the data fields, right? But that's also kind of tedious. And so instead, we also

have a recommendation system that provides all of these mappings for us. So, to see that, let's start with the fresh design. So, Eliza, out of these three templates, one, two, and three, which one do you like the most? Oh, I don't remember what one was, so let's go with three. >> Oh, wait. Or either, you know, not that. Not that. Okay. This one? No, that looks like a camp flyer. >> [laughter] >> Okay. This one? >> This one feels sleek. It feels now, right? We can go with this one. >> Mostly men here, so why am I asking? Okay. Well, look at who I'm invited. Okay. So, let's go ahead and click auto recommend links, and it's going to take a couple of seconds, and hopefully it will spit out all of our mappings for us. Just like that. Woo! Woo! Yeah. So, everything got automatically linked. Yes. So, yeah, so you don't ever have to take your flyer down and repost it. >> Exactly. >> Exactly. >> Yeah. That's awesome. >> Did you You wrote this code yourself? Yes. That is blowing my [ __ ] mind. Like I have trouble with Word on my computer sometimes, and you did this. That's amazing. Thank you. So, we can also hover over these question marks to understand why some of these mappings were created. So, for example, right, it's linking Atlanta, which has the highest number of votes, to the first place holder city. Um similarly, it's coloring this text uh this box yellow because it's also related uh color coding it based on popularity. And again, all of these mappings will persist um when you export it. So, this

means that even after you change the canvas itself, all of these changes will actually persist onto the image file. So, let's go ahead and do that. We're going to hit export live SVG, and let me just drag this side by side so we can actually see the updates as they happen live. Okay. So, now let's try changing our uh design. So, Eliza, um out of all of these city options outside of the top three, which one do you want to see the most on your own tour in the future? Oh my gosh. Well, I guess I have to say Las Vegas. I don't know. Where should I play next year? Totally I can totally understand all of that. Ph- Philly, they're always the loudest. Eagles, you guys are always the loudest. Let's say Philly cuz we love the Met, okay? >> Philly. >> Philly. My people. They were just the rudest, just to be clear. It's the only reason it's up. Okay. So, let's try changing the third op- uh option Austin to Philly. And to do that, I'm going to be dragging these selection boxes all the way down to Philly, and as I do that, I want you to watch the image carefully cuz it's going to change very quickly. So, one, two, and three. And just like that, our last option became Philly. That's so cool. Woo! And remember, this is just an image, not a not a website, so there we have it.

Tonyu, so how did you get inspired for this? You were like on the Insane Clown Posse website, it wasn't updating. You were like, how do I get crunk? Like, how do I do this? What made you want to do this? Cuz for someone like me, this is groundbreaking. Uh probably laziness mostly. Like, I don't want to go back and keep changing things, updating again. So, I want it to be like once and done, and yeah. Laziness is the mother of invention. Thank you. This is incredible. Okay. So, lastly, let's also try

changing the website. So, we're going to do a little bit of audience participation here. Um so, it seems like the next runners-up for popular cities are New York City and Detroit. So, I'm going to read these names out loud, and I want you guys to cheer for which option you want to see the most on the top of this poster. So, anyone for New York City? >> [cheering] >> Okay. >> Okay. What about Detroit? What about Detroit? >> [screaming] >> [screaming] >> Okay. >> Okay. It seems like Detroit has won out, so I'm going to go ahead and go to this voting tab, and where is Detroit? Okay. Where is it? Am I blind? Oh, right here. Okay. So, I'm going to spam the vote button for Detroit so that it becomes the top of the list. And there we go. And And our poster, we're going to give it a couple of seconds to update, and there we have it. Detroit. >> Wow. Woo! >> [applause] >> [applause] >> Okay. >> Okay. >> [cheering]

>> [cheering] >> So, previously, we lived in a static world where we had to we had to recreate images to reflect different marketing trends, moods, and temporal moments. But now, with Project Concurrent, the data will do the work for you. Thank you. That was amazing. Thank you. >> Woo! >> [applause] >> [applause] >> Thank you, Tonyu. Can I have your email so that if this doesn't go today, like I could still have access Oh, yeah, for sure. >> technology? >> technology? >> it out. It's in the It's in the microsite. It's on the what? >> There's a microsite demo that we're going to release for folks. I'm going to be on the microsite. I'll see you guys on the microsite. >> [laughter] >> [laughter] >> Whatever smaller. >> Whatever smaller. Well, Well, awesome. Thank you, Tonyu. >> Woo! >> [cheering] >> [cheering] [applause]