Designer at Ramp shows Advanced AI Design Process

So George, can you show us at a high level from designing to handoff? What

does your role process look like using AI tools?

>> Instead of starting with a wireframe, I start with a prototype. Really, that

starts with making a prototype on magic patterns. And just a bit of background,

patterns. And just a bit of background, ramp is a spend management company. And

we are building the operating system for finance teams. So, I started if I go all the way back up to this prompt, started with this really long prompt, but I just talked into the mic. Easiest way to do

this is to just show you like I'm just going to input $10,000.

I'm going to move it from my Chase savings account to my RAM business account.

And this transfer method got automatically populated.

But I'm going to increase that to 10 million up to 100 million. And now it's wire. So

I wanted a smart form, right, that like detects the amount, makes a call to the back end to see what the fastest available payment method is, and then automatically selects that in

the form for you.

So a prototype like this in Figma would have taken a lot of work and then also maybe like five different prototype

states like if you open the prototype manager in Figma, you know, you have to like different starting points is what they're called. Here you kind of get

they're called. Here you kind of get that for free and then I shared it in five. You can tell that like there's no

five. You can tell that like there's no designs included here and at the end of the discussion there's no designs. I

want to pause right here. This is the new era for design crits. I feel like the old way was everybody gets on a call, you share the Figma prototype or

Figma designs, you screen share them, somebody's taking notes and people are giving live feedback. But here, this is

all async and it's all using VIP coded prototypes. Yep. At RAMP we do a lot of

prototypes. Yep. At RAMP we do a lot of Hey folks this is Jay and welcome to sneak peek and today with me I have George who is a product designer on RAM

and he's going to show us how ramp uses AI as part of the design process. George

super stoked to have you on sneak peek >> Jay this is one of my favorite topics so I'm excited to be here.

>> Let me ask you this. When a project comes in and you're thinking of creating some quick concepts or just some design

ideas, do you like go into Figma and do some design explorations or you use an AI tool to create some design mockups?

>> I think it depends on the type of deliverable being asked for. But more

often than not in project, the deliverable relies on interaction. you

need to click at least one thing.

And so when you have to click at least one thing, a prototype is a is a much better way to give the the reviewer or the person requesting the feature or

collaborators. It really helps them get

collaborators. It really helps them get a sense of what the end product's going to feel like if I go in and make an AI prototype versus delivering even a

noodled Figma prototype. I think the fidelity you can't argue with one versus the other. So that's that's when I go to AI.

other. So that's that's when I go to AI.

Got it. So there's a million different AI design tools popping up right now.

George, which is your go-to AI design tool when you're just trying to like come up with different concepts or prototypes to show stakeholders and get their initial feedback?

Yeah, I've been vocal about magic patterns and it I think there a lot of them are approaching, you know, homeostasis v0ero is pretty

competitive with magic patterns as well.

But I like this tool because I can create components to make my prototypes look and feel like ramp. But that's kind of like a cherry on top. Really the meat

and potatoes for me with magic patterns is speed and how less or how infrequently it errors. So

it really doesn't try to write much backend code. It's very focused on a

backend code. It's very focused on a front-end experience. So I'm very very

front-end experience. So I'm very very fast using this compared to vzero or replet. And confession I haven't used

replet. And confession I haven't used magic patterns before this interview on purpose. So, why don't you give me a

purpose. So, why don't you give me a demo and show me why this tool is so cool? Yeah, sure. Let's do that. Um, I'm

cool? Yeah, sure. Let's do that. Um, I'm

going to take a design here, a Figma mock, and I'm not going to paste it in, okay? But I did come up with an idea. And so, what we're

looking at is kind of like a bank account overview. We've got a couple

account overview. We've got a couple accounts listed here, a bit of a setup guide. And so I'm just going to come

guide. And so I'm just going to come into magic patterns or from scratch. So if you were to hand me a product spec, I wouldn't do it this

way, but I would frontload a bunch of context. And so that's what I'm going to

context. And so that's what I'm going to do with magic patterns today. And I'm

too lazy to type it all out. So I'm just going to enter microphone mode and start talking.

Let's build a overview page for a bank account feature within ramp. RAMP is new to the banking and investment space now offering something called a business

account and an investment account.

Obviously, investment account is a an investment product. The business account

investment product. The business account is for things like payroll and bills and receiving revenue.

This homepage is going to have a section at the top called overview, another tab called automations, and another tab called documents for things like bank

statements. In the overview section,

statements. In the overview section, let's just help help me understand how much money I have overall. Show me a list of my accounts and then show me a

section ideally collapsible for approval for things that need review. Maybe

that's like my treasurer wants to withdraw money from the investment account. Since I'm the owner of this

account. Since I'm the owner of this account, I should be able to approve or reject that. Let's use a stacked hero

reject that. Let's use a stacked hero graph below the total balance at the top. I don't have to type any of that.

top. I don't have to type any of that.

I'm just going to add in one thing and say at ramp treasury side of at ramp

treasury account graph and at ramp treasury account row at ramp treasury approval card. So these are components that I've

card. So these are components that I've built within magic patterns. They are

they're like shad CNN versions of our actual design system. They're not

onetoone. I don't want them to be onetoone. And then lastly, I'm only

onetoone. And then lastly, I'm only typing these cuz I have very low confidence that the speechtoext tool would have like accurately done this. So

we'll hit next and see what happens. The

way that I treat this tool Jay is giving my stakeholders the experience of using software. So as IC's and builders, we're

software. So as IC's and builders, we're the creators of software and the reviewers of software, especially with static Figma mocks. We really have to

put on our like reviewer hat. And it

could be hard to empathize with the customer. But the browser uses the

customer. But the browser uses the substrate of the internet, which is code. And by working with that substrate

code. And by working with that substrate as a designer, you get so much for free like upper states interaction. When you

click something and nothing happens, that is feedback that you need to go down that rabbit hole. None of that exists in Figma. And also, none of that has anything to do with looking like our

design system. This is actually ramp,

design system. This is actually ramp, right? So, it looks really nice. There's

right? So, it looks really nice. There's

colors in here that you're not going to see. There's no rounded corners really.

see. There's no rounded corners really.

And you'll notice in magic patterns that the fidelity visually is not the same.

But at this stage, it's not really what I'm evaluating uh or testing or or sending to my cross functional team.

What I'm trying to send over is the experience of using this app and seeing what I want next. So this is what I came up with. We've got the ramp treasury

up with. We've got the ramp treasury side. We can see that there are some

side. We can see that there are some like pixel issues. there's this opening right next to $0. So you said that at this stage you don't care about the

visual like fidelity or the pixel perfection. Why is that? Like a lot of

perfection. Why is that? Like a lot of people obsess over I want to get everything single thing right. I want to prompt it till every single pixel is right. Why don't you worry about it?

right. Why don't you worry about it?

>> It's a great question. I don't worry about it because there is another stage in the design process where we can worry about that kind of thing. It's like the application of the design system, the

application of of visual language. But

first and foremost, I'm trying to solve a separate problem which is like if I were to give this project a brief, maybe

something that we can focus on for this recording is like how might a company with 200 bank accounts

use ramp treasury or ramp banking?

That's a very different experience than like a startup with one or two bank accounts. And so first I want to solve

accounts. And so first I want to solve for the experience of navigating a table and filtering and sorting and how the UI might change as a result. But the visual

stuff we can kind of just defer to later. At least that's been my

later. At least that's been my experience. Got it. And then remind me

experience. Got it. And then remind me once again, you said that V 0ero is also very competitive with magic patterns, but I think you mentioned if I'm not

mistaken, you prefer magic patterns over V 0 because the error rate in magic patterns is significantly lower.

Yes, my experience with Vzero, it might try to write an entire database or something seems like it might call for it and then you'll be dealing with a lot of backend errors that are, you know,

pretty much for a quick front-end React project.

>> Got it.

>> I really like what this thing created.

Like it's pretty functional. Are there

approvals?

>> So, let's let's ask it to change something here because this is obviously pretty bad. I think remove the

pretty bad. I think remove the treasury account graph entirely. Don't

want a graph. Also, let's uh make it so that the business account is clickable.

And you're going to take me to the business account detail screen, which looks like this.

And uh quickly screenshot this. And then

I went ahead and selected this thing, this tile. And so that's going to add

this tile. And so that's going to add context to my chat and see if it if it does it.

>> Something I also noticed that's unique about your approach to AI is that you talk with it a lot. A lot of times I've seen people they just type it. They

don't dictate or use the microphone.

I don't know why though. Maybe it's a Yeah, it's definitely a personal take.

If I was to examine it more meta, I kind of think that talking is non-deterministic and sometimes the words come out before you really know what you've said. In

this case, the stakes are hol like it's not really a problem. If you're typing an important email, that could be bad.

The nice thing about talking to an AI is over is you end up with a lot more creativity if something is non-deterministic. So if

you go down a rabbit hole and you start ranting, you end up in a in a cool place you weren't expecting. But you know what? This actually doesn't look too

what? This actually doesn't look too bad. So it removed the graph.

bad. So it removed the graph.

We're using pretty similar to like ramp colors. Obviously, you know, there's

colors. Obviously, you know, there's some spacing and whatever. I'm going to go ahead and click on this business account. And doesn't look that bad.

account. And doesn't look that bad.

We've got a history of transactions, a balance, buttons that imported correctly.

>> So let me ask you this right here.

There's a lot of like interactions that is created here like the first of all the tabs overview automations documents then there's the back navigation

there's that whole graph that you've got did you specify all these interactions I didn't see you specify all these interactions in the prompt you gave to magic patterns so the question is did

magic patterns just intuitively create all these interactions I definitely did not specify So, it did.

I also want to give credit where credit's due because it didn't add interactions. It added like entry point

interactions. It added like entry point to interactions, but like these things are not clickable, right? They they're

just UI. Yeah. So, it didn't do the full job of extrapolating what should go on this next page. Like, I don't think it understands what should go under

documents. Um, but let's make that

documents. Um, but let's make that happen.

Let's create a table of different possible account documents. They're

going to be mostly sorted chronologically. They'll have several

chronologically. They'll have several different columns. One column will be

different columns. One column will be called document name. One will be called statement date. One will be called

statement date. One will be called account last four digits and another one will be called actions. So in the actions column, you'll put a a download button and then you just figure out what

to do for the rest of the columns. But I

want you to add filtering and grouping.

Filtering obviously limits the number of things that go in the table. And

grouping will change the ordering of things. So for example, if I want to

things. So for example, if I want to group by uh bank statement, then I'll have a horizontal row in the table non-interactive called bank statement and then listing all of those below

which then proceeds to the next grouping which might be like trade confirmation letter for investment products. uh but

by default let's just do a table of chronological ordering with all possible account types and go from there. So I

just want to like for all the designers in the in the audience who've designed a table you know how much of a of a pain in the ass it is and you'll design a

table and then you'll go to resize it by one pixel and something breaks even if you're using auto layout. So, what's

amazing about this is the browser will do all of that for free. That's what I love about the substrate of the internet is you don't need to instruct magic patterns to do this because the

instructions are in the DNA of the browser. It's like they're genetically

browser. It's like they're genetically they just exist already. So, it's like your genes come with instructions to convert oxygen into ATP through mitochondria. This is like the same

mitochondria. This is like the same thing for the browser, but Figma has none of that. There's no genetic instructions to like make designs behave a specific way. It's so deterministic

which means a lot of extra work for the designer.

>> Makes sense. And actually, you know what? Just to prove that point, I think

what? Just to prove that point, I think once it generates that table, let's try to resize it.

Nice. Okay. Yeah. So, I'll open this in a new window. Go to the documents tab.

All right. So, account documents account last four group by document type. Boom. Bank statement. No grouping.

type. Boom. Bank statement. No grouping.

Group by month.

Wow. And then, yeah, I'll try to resize it. I got to exit full screen, I think.

it. I got to exit full screen, I think.

Oh wow.

This is unbelievable. Like, literally,

what is it? 5 minutes of just chatting with me and VIP coding, you created this whole documents tab. And I think if you were to share this with your

stakeholder, it gives them a more profound experience of what the product you're imagining rather than some design prototype or some Figma link

you could share with them. Yeah, that's

the goal. So, well, I think one thing that is an opportunity for magic patterns, these prototyping tools of choice, is learning a little bit more about what collaboration and feedback

looks like. So, you just pointed out

looks like. So, you just pointed out that I'm going to share this with a stakeholder, and my goal is to make them feel like the customer, make them feel

like a user of this software and not like a stakeholder at RAMP because ultimately that's who we're designing for. So maybe I want to filter by like

for. So maybe I want to filter by like tax form and this account, but the feedback that that stakeholder gives me is probably going to be on Slack and I'm

going to have to go to Slack, read that, come back to this, and so the collaboration starts to become like multi-channel, but the the work is

actually just happening on magic patterns. And so what I would like to

patterns. And so what I would like to see is a way to, you know, leave this open canvas, this prototype for people to click around, but then enter almost

like a feedback mode where you can highlight something, add a comment just like in Figma, and I can like action that comment through the through the chat interface and make it a little bit

more collaborative.

Makes sense. And what percentage would you say you're targeting using magic patterns? Is it like you're targeting

patterns? Is it like you're targeting from 0 to 50%, 0 to 80% of the design when you're using magic patterns before maybe going to some other tool? What's

the target you're hoping for?

>> Yeah. 0 to 70ish.

>> Okay.

>> And then after that, what for the last finer details, what are you then using?

Going back to Figma or some other tool?

>> I I am going back to Figma. Most of the stuff that I'm working on is not a small front-end lift. So, I don't have the

front-end lift. So, I don't have the confidence to go into cursor and like redesign the entire architecture of the product. So, at that point, I'll go back

product. So, at that point, I'll go back into Figma and I'll create like maybe a good example would be to create just sections of this product at a high

fidelity with different variations and all the different Yeah. like component

types, grouping, maybe there's examples where like you have currencies displayed, no currencies displayed, empty states, stuff like that. And then this will

represent the like the the red line or the source of truth for for handoff. But

I'll usually still include a link to this prototype for for interaction design.

>> Where would you include a link to this?

In the handoff, where do you put the link to this magic patterns prototype?

I'll usually just put it like right in another section right here. In this

case, people had clicked on that link at Nauseium, so I didn't include it, but >> Okay, got it. So, essentially like you're using magic patterns to get to

the 70% of the design, share the prototype with the stakeholders, get their alignment. Once the alignment's

their alignment. Once the alignment's there, then you go back into Figma, create the different use cases, then do the handoff using Figma, which is a more

traditional way. Got it. Yeah, exactly.

traditional way. Got it. Yeah, exactly.

So George can you show us at a high level from designing to handoff, what does your role process look like using AI tools?

Beautiful. So, u instead of starting with a wireframe, I start with a prototype. If I told you I was going to

prototype. If I told you I was going to make you a taco, I would rather make you a taco than just show you a picture of a

taco. So really that starts with making

taco. So really that starts with making a prototype on magic patterns. I have

one great example here that will outline the process.

And just a bit of background, RAMP is a spend management company and we are building the operating system for finance teams. Part of that is something

called Treasury, which is a business account where you store cash, make payroll, and an investment account where you can store your excess cash and earn earn yield on funds you aren't using

right away. We noticed and this is like

right away. We noticed and this is like in QA this is our sandbox environment that there's just like one way to get

money into RAT which is like if you've used Robin Hood it just you can link your checking account and Robin Hood will like do an a debit from whatever account you link. It's kind of the same

thing here. You link this checking

thing here. You link this checking account and you transfer money into Rant. But there's actually so many ways

Rant. But there's actually so many ways to move money. There's wires. There's

something called real-time payments. You

could go into your checking account and like send money to Robin Hood. So, what

we wanted to build was a more robust way of getting money into RAMP. So, I

started, if I go all the way back up to this prompt, started with this really long prompt, but I just talked into the mic. So just

at a high level like I want this transfer funds flow to obviously have an amount field and then obviously I'm moving money from one place to another

place and the new addition was this thing called the transfer method. So, we

didn't have a transfer method on RAM, but what it would do is help people get money to where they want faster, but like with most things, fintech, there's

like regulations and limits. Easiest way

to do this is to just show you like I'm just going to input $10,000.

I'm going to move it from my Chase savings account to my ramp business account.

And this transfer method got automatically populated.

But I'm going to increase that to 10 million up to 100 million and now it's wire

because the limit for realtime payment is 10 mil. So I wanted a smart form right that like detects the amount,

makes a call to the backend to see what the fastest available payment method is and then automatically selects that in the form for you. And then also wanted

it to limit the number of options if I was moving money between ramp accounts.

So it's like if it's moving from here to here, then the transfer method is instant and all the other options get deleted. So a prototype like this in

deleted. So a prototype like this in Figma would have taken a lot of work and then also maybe like five different prototype states. It's like if you open

prototype states. It's like if you open the prototype manager in Figma, you know, you have to like you create different starting points is what they're called. Here you kind of

get that for free. So let's just see what happened. I'm going to go back

what happened. I'm going to go back here. I have no idea what this version

here. I have no idea what this version looked like, but I'm going to go back to the very first thing it created.

So 10,000 from business account. No,

from Chase savings to business account.

The transfer method did not automatically select. There's also no

automatically select. There's also no metadata here, which was like kind of nice in the more recent version.

But after I spent maybe like an hour getting it to a place where I thought the UX matched what I'd like to see in

prod, I went and just open this in a new tab. Copy this link.

tab. Copy this link.

This has sharing settings so that anyone can can view it but you can password protect so that only specific people can can access this. And then I shared it in

Slack. I shared two examples. There's um

Slack. I shared two examples. There's um

the smart form which I showed today and then more of a progressive disclosure where like okay how much is the amount next? Which accounts are you moving from

next? Which accounts are you moving from next?

I outlined that I have a bit of a priority and then asked people to just use the prototypes. You can tell that like there's no designs included here

and at the end of the discussion there's no designs. I want to pause right here.

no designs. I want to pause right here.

This is the new era for design crits.

feel like the old way was everybody gets on a call, you share the Figma prototype or Figma designs, you screen share them, somebody's taking notes and people are

giving live feedback. But here, this is all async and it's all using vibe coded prototypes.

Yeah, I think it's the era >> as well. And there's a lot of value to live crit, but at ramp we do a lot of asynchronous critique and gathering

feedback. So, it helps me stay focused.

feedback. So, it helps me stay focused.

It also helps people, I think, pay a little bit more attention to the prototype or the design and like take a bit more care. But I want to highlight

one comment here. So, we've got Nico who wanted a mix of the two and then later said that ramp accounts and external

accounts should be like split up in the menu. Um and I was like 100% we'll get

menu. Um and I was like 100% we'll get to this in the craft portion. So what I meant by craft portion is

the phase where after myself and my stakeholders have aligned that like this experience of clicking things makes the

most sense and is fast. Then we'll go into Figma and we will redline specifics

about how this thing works and use our design system apply it show things like upper states metadata um and go into a

bit more detail here. So

I took his feedback and you can see how we use this like external accounts divider in the drop down. Um doesn't look like Grant but it

down. Um doesn't look like Grant but it like meets the needs of what the stakeholder wanted and it's something that we have an exact replica of in our

design system. So is getting added there

design system. So is getting added there as well. So question here do you see a

as well. So question here do you see a future where maybe even the handoff stuff entirely happens in magic pattern.

So let's say you created the entire components that you have in your design system for ramp pixel by pixel complete match in magic patterns so that you

don't even have to come into Figma. Do

you see that happening or do you see that no for handoff and pixel perfection we have to come to Figma for the handoff whoever solves that problem will be a

very rich man or woman I don't think Figma is the ideal place to be doing handoff it's just kind of the best thing

we have today and were I to invest in making you know onetoone components started there's Like this sidenav is

pretty close.

>> Yep. It looks very similar.

>> Quite a bit more time. I think what we would need is I don't even know if an MCP is the right tool for the job. But

>> yeah, I was going to ask you why do you not use Figma MCP for this with magic patterns?

>> I don't know if it works with magic patterns. I I haven't investigated.

patterns. I I haven't investigated.

Okay, that's a good question. Maybe

maybe someone on my team or or someone in the audience will will reach out and and call this out, but um I think it brings the the other point which is that

the MCP would solve for the last 20%.

But I think it would solve for it poorly.

And I'm much more invested in using magic patterns for the first like 80% of a project life cycle. And I think it does that really really well. To chase

the last 20% with an MCP would probably have me encountering more issues than it would save me time. Like for me to redline something in Figma is incredibly

fast and well-maintained and clean. Um

but like the second a token gets updated now you got to go back into magic patterns and fix it. It seems like the >> I mean that's just an assumption. Sorry.

Um, >> yeah, >> it just seems like, you know, the juice is not worth the squeeze.

>> Yes. Now, what I'm curious about is, so just to rec recap that whole thing. So,

going back to the Figma thing, the handoff, the way you're doing it still is the traditional way where you've got all the states and oh, okay, you also got the prototype link to magic patterns

there and you've got the final screens along with the different use cases.

And then going back to Magic Patterns, how do you go about creating a new component in Magic Patterns? Is it like from scratch you have to wipe code it?

Is there maybe an extension they have to speed up the process?

Let's go Jay. All right. So,

what's a good example? Okay. In

Treasury, we're going to come in and tell all the audience this is this is fake information. Okay. So, these don't

fake information. Okay. So, these don't work, but we're going to go ahead and grab this header, and it's going to boom create a component.

>> Yeah.

>> So, I'm going to go ahead and convert to a component.

>> Yeah. To the treasury library. Open a

new tab. It's just going to start writing code.

>> This saved you. I'm trying to think of using any other AI tool, you would have to prompt it. You would to take a screenshot, give it reference.

But here, oh my god, you just have to select it, Tim. Yeah. Out of curiosity, let's see what happens if I if I just ask it to

rebuild that header.

Bill, they'll pay with the buttons from scratch.

Match as closely as possible.

I think the one with the extension is going to be more closer. That's my

guess.

>> Yeah. Yeah, I think so, too.

All right, we'll pit them side by side and see what happens.

One thing to call out with the the Chrome extension is that it is not that fast. I think it depends on the

fast. I think it depends on the complexity of the design system. Like

ours uses an atomic design framework. So

there's a lot of nested components here.

This group is a set and then each individual button is a set and then that. So we'll see what finished first.

that. So we'll see what finished first.

Okay, the Chrome extension finished first. Okay, let's add 32 pixels top and

first. Okay, let's add 32 pixels top and bottom padding for more white space.

And then the other one finished.

Okay, so this is the other one. First of

all, it didn't only recreate the header.

It also went and did the tabs in the entire table. The type face is quite

entire table. The type face is quite different. The color is wrong. The

different. The color is wrong. The

corners are rounded. The location of the more menu is wrong.

>> Yeah.

>> So, that Chrome extension worked really well.

>> Wow.

So, Chrome extension is the way to go.

>> Oh, that looks way better now. So, if I just go side by side here and Okay, there we go. So,

it's pretty damn good.

>> Yep. Yep. It's very close to the real thing. Damn. Amazing.

thing. Damn. Amazing.

>> Oh, the final step here, um, which is just publishing this component. So, once

I do that, it is just going to be available for use on any prototype that I use. So let's put the ramp

I use. So let's put the ramp treasury sidenav and rent treasury

bill pay header together to form a page called upcoming bills.

And what it should do is those two components exactly as they are without changes and just insert them so that anytime I use those components, they're

the same. Uh unless I come in here, make

the same. Uh unless I come in here, make changes, publish a new version of the component, and then that version will propagate to all instances and

prototypes that are that are using it.

All right, so this looks exactly like the component that it made. And then this is sidenav is the same as the component that I made. That's great. There's some, you

made. That's great. There's some, you know, minor inconsistencies like um these don't have rounded corners, but that's fine. We can we can do a couple

that's fine. We can we can do a couple of things here. So, magic patterns has things like suggested actions. You can

also open it from this command menu and explore multiple variations or you can polish. You can tidy up your file by

polish. You can tidy up your file by like deleting unused code. In this case, I'm just going to polish by saying keep

all radi at zero and make sure using the same type face. Well, I don't think this is going to work, but

that's the iPhone 16 breakpoint. Okay.

See? All right. No more border erases.

Tight ball looks consistent. So, that's

how I go from, you know, live >> design from our sandbox into a prototype environment.

>> This is amazing. So George, I have a question. You've shared a lot of these

question. You've shared a lot of these vibecoded prototypes with stakeholders and a lot of these stakeholders, product managers, engineers are still new to the

whole AI space interacting with VIP coded prototypes. So what are some best

coded prototypes. So what are some best practices that you would share with the audience? Yeah. So one of the best

audience? Yeah. So one of the best practices that I can share when when using prototypes to gather feedback is to try to simulate different customer

environments. So

environments. So designers will be so familiar with the term happy path. We love to share happy path prototypes or designs

and tell stakeholders don't worry like edge cases have been considered.

>> Yeah. Um everyone has been through that.

But one thing that prototypes do really well is once you've got that core use case, that happy path, you can very very quickly iterate into edge cases or unhappy paths. So I've got a good

unhappy paths. So I've got a good example here. And

example here. And this this looks pretty bad. That's fine.

But um obviously here's an interface.

Here's a sidenav. There's like a functional graph. I'm not sure if you

functional graph. I'm not sure if you noticed, but there's something at the top called fixture tools. Devs will be familiar with this. Designers less so unless y'all are queuing a lot. But

essentially what this fixture tool does is it lets you change the page. Okay, so

here's a good example. There are three entities right now. They're called

United States, Canada, and Mexico. And

so each one has two accounts. I want to see what happens if we've got a multinational company on ramp treasury with like 40 entities. What happens to your page if you've got like 40

countries signed up for it? That's a

classic chaos question. So, I'm just going to type whatever. I'll just do two. Okay. So, now what happened is it

two. Okay. So, now what happened is it automatically transformed into a table instead of a list. And the prototype knew to start grouping these by entity.

So, you've got US, Canada, Mexico, Brazil. And I set it so that it

Brazil. And I set it so that it automatically chooses a country name and creates an entity. And then it automatically chooses the local currency of that country and displays the

currency in a in a truncated format. So

you can come in here and you can group by entity or you can group by currency and account type. And although these are not functional like they give the stakeholder an example. I'm going to

start increasing the number of business accounts to like yeah a max of five. As

I go up and down, you can see the total balance changing because presumably the more bank accounts you have, the more money you have overall. And now there's one, two, three, four, five bank

accounts per entity. And the page gets extremely long. Items for approval. Uh,

extremely long. Items for approval. Uh,

this one is not working for some reason, but this fixture tool helps you sim simulate unhappy paths. And I tend to include this in most of the designs that

I go through. uh or the prototypes that I go through. And another good example is like phasing. So the changes are quite minor between phase one and phase

2. But

2. But this is another way to say, hey, the experience looks like this for alpha, the experience looks like this for beta, and this is what we're going to go to GA

with. and stakeholders can understand

with. and stakeholders can understand like what the timeline looks like and what the pro product is going to look like at different stages in the the life

cycle at RAMP we don't ship to GA like immediately we use a process called alpha beta GA just to reduce the blast radius so alpha will typically include

like you know five to 20 friendly customers who know your product well and you'll email them, say, "Hey, we're working on

a new feature. We think you're going to get a lot of use out of it." And then we'll use those as design partners. And

if the test goes well and there's no big red flags, we'll move on to beta, which in this case is like phase two, and then we'll move on to GA, which is phase three. So I tend to include that in

three. So I tend to include that in these prototypes because another thing that every designer will be familiar with is like oh well why don't we just

do this additional feature now or we don't have time for that let's do it later. Those are really really valid

later. Those are really really valid points. It's like resourcing is a

points. It's like resourcing is a difficult problem to solve, but giving people a sense of like the trade-offs via a prototype can be a really effective way to

manage stakeholders.

>> Makes sense. George, my next question to you is how do you use AI to get close to the customer or even more, how do you use AI to figure out what is the next

thing you should work on instead of relying on the PM to come and tell you, hey, can you fix this or can you create a design for this?

Yeah, that's a great question. Okay,

there is a tool called Log Rocket.

Basically, Log Rocket records sessions.

So, when people are ramp customers are clicking around ramp and they're getting frustrated, you can watch these sessions on Log Rocket. These are like live replays. So,

Rocket. These are like live replays. So,

I'll come into Log Rocket and I'll spend two or three hours a week, usually like the first thing that I do in the morning while I drink a coffee and come in here,

just hit a save segment. So basically

these videos contain a URL that is relevant to me like business accounts or investment accounts or treasury and then I'll just come through and and watch

these videos and literally watch people use the thing that I've designed. I'll just watch them for an

designed. I'll just watch them for an hour back to back. I'll watch them on on separate parts of RAM and anything like is obfiscated so it's blurred out. It's

completely unavailable to to ramp employees. This is pretty interesting. I

employees. This is pretty interesting. I

actually quite like starting my day like this. But our internal team built

this. But our internal team built something called the voice of the customer analytics suite. And you can tell it was built by engineers cuz that's a terrible name. But I'm going to

go ahead and come into log rocket sessions. While this is loading, it's

sessions. While this is loading, it's going to ask me to define some filters.

So I'm going to say clicked on a URL contains treasury.

Clicked on text contains treasury, business accounts, investment accounts,

and that's it actually.

Okay. Um

and and yeah, so like find some rage clicks or points of frustration.

What are users doing the most here?

Finding relevant session. These are

basically videos that match the criteria and instead of me watching all of them, it's going to ideally find things that contain my filters, summarize them, and

generate an aggregated summary. Okay.

So, while this is running, I'm going to try to also gather some context from notion. Find some research calls that

notion. Find some research calls that let me understand frustrations with rent, treasury,

business accounts, investment accounts yield etc. Oh, wow. So you basically start your day

Oh, wow. So you basically start your day ask Notion AI these pain points or customer codes that talk about the pain points.

Yeah. So here's a customer example uh customer feedback example transfer balance discrepancies. Going to go ahead

balance discrepancies. Going to go ahead and open this link.

And we've got an example of inconsistent balances. This was submitted on

balances. This was submitted on September 29th and it's saying client has configured automations to move surplus funds from the operating account into the investment account. Transfers

between these accounts are clearing on different dates and during the transfer period only one side of the transfer is reflected in the available balance which makes the displayed balance appear lower than it actually is. It's causing

reconciliation issues. Client would like both accounts as balances to reflect transfers more consistently so that available balances are accurate during intransit periods. Okay, I think I

intransit periods. Okay, I think I understand. So if I go back to ramp over

understand. So if I go back to ramp over here, I think what they're saying is that this business account and investment account, the balances don't add up when you move money. So I'm going

to go ahead and make this investment account work.

brokerage account, state machine and restrictions, investment account.

So, we have this like awesome QA tool that lets us basically simulate anything we want.

Now, this account is open. So, I'm going to go ahead and move money into it.

Wait, first let's figure out how much I have. It says I have 119K.

have. It says I have 119K.

If I understood the notion correctly, it says during the transit period only one side of the transfer is reflected in the available balance.

So I'm assuming that if I move, let's just say 19,812, it's going to seem like that amount has disappeared.

Okay, I can't do it today. It's going to auto invest in the next day. schedule the

transfer. So, this says scheduled. Let's

see if I can make this transfer state machine desired state initiated.

I need to grab this long code.

I think that's it.

All right. Well, I don't know how to make this initiate, but I'm going to try to solve the problem, which is that the balance is inconsistent. So, what we're

going to do is open ramp inspect, which is like our very own version of cursor in the browser. And I'm going to enter a

prompt.

Highlight this account value and say add a string below account value that indicates

ending deposits.

Since account value only registers settled transactions, there is an issue that a customer experienced with money in transit not being correctly recorded.

So, we need to store pending transactions in the back end and display it here anytime a transfer has not completely settled into the account. So,

while it's doing that, what I'm curious to know is why did you not just go to the cursor the proper cursor website and then do all this rather than just using version of cursor in the browser right

here? This is meant to lower the bar of

here? This is meant to lower the bar of entry for people that either don't have cursor set up on their machines or who don't yet know how to create a branch

and use git. So yeah, I mean like even you you have to tell curser yarn start to run something locally or you have to update packages. You need to understand

update packages. You need to understand how to navigate to the right row.

mostly meant for more non-technical people to get started and make changes in the front end. Yeah. So, it's asking me a couple questions. It says it's already implemented. When it pending

already implemented. When it pending deposits, it's going to say pending 100.

So, like let's show it when it's also zero. So, it it finished. I asked it to

zero. So, it it finished. I asked it to do something. All I have to do is open

do something. All I have to do is open the preview link. This is, you know, just like opening local host when you're in your ID of choice. So, I'm going to

just sign in. And what it should do is, yep, now we've got a pending label in the investment account even when it's zero. So if I want to, I can just create

zero. So if I want to, I can just create a PR for this.

Now look at the PR on GitHub. I'm going

to archive this because my engineer will think I actually want to make this change. But the cool thing is that I

change. But the cool thing is that I didn't have to go into cursor at all and now I've got appending balance which the customer all they want to see is that

something is reflected in the available balance and it looks like it's lower than it actually is. So they would like both accounts to reflect transfers more consistently so that available balances

are accurate during intransit periods.

So, what I would probably do is to contact this customer.

Yeah. Send them a screenshot, send them a loom, and ask them if this would help with reconciliation. And I'm happy to

with reconciliation. And I'm happy to just do that myself. Like, I don't need to ask the PM or the UXR team for permission. So, going back to that

permission. So, going back to that notion AI, how you're using it. What's

mind-blowing to me, George, is that if you have some downtime, a lot of times designers complain that, oh, I don't know what to focus on next. I have a lot of downtime. The PMs are still figuring

of downtime. The PMs are still figuring out the road map. What you can do here is literally use notion AI and be like, let me just go through all the customer

complaints and stuff, find issues and directly start working on them because I have some downtime.

>> Totally. anyone has,

you know, not even the downtime, but the tools to make that happen. Now, I think the people who do really well at RAMP succeed because they're customer obsessed. And we definitely give you the

obsessed. And we definitely give you the tools to be customer obsessed.

>> Wow. So, the UXR team does a really good job, it seems, of uploading all the customer interviews in Notion and then all the customer codes and everything in there. So, then you can just use Notion

there. So, then you can just use Notion AI to find all those transcripts. Got

it. Yeah. Everything's everything's

automated. Even even where is my draft?

I'll show you a draft that I'm working on. So in this UXR tool, basically when

on. So in this UXR tool, basically when you are creating a research plan, one of the hardest parts is creating a useful research plan. Like not any question is

research plan. Like not any question is a good question. There's this awesome book that I recommend to all designers called the mom test.

The mom test. Okay. Mom test will be summarized so simply. The mom test goes like this. If you go to your mom with a

like this. If you go to your mom with a plate of cookies and you ask your mom if she likes these cookies, she's going to say, "These are great cookies, honey. A,

they're chocolate chip. I know they're your favorite. Great job."

your favorite. Great job."

But your mom just wants the path of least resistance. If you ask a smarter

least resistance. If you ask a smarter question like, "Hey, mom. How are these different than the cookies that you make?" and what process do you usually

make?" and what process do you usually follow to make cookies?

That's a very different outcome for you.

She might explain how these are a little crumblier, more crumbly because there's not enough butter, right? And that's a UXR finding that would not have existed

in the in the initial world. So anyways,

back to the notion. You can basically generate questions and it will generate audiences for you

like 50% SMB accountants and finance team members. All you have to do is

team members. All you have to do is enter like a bit of a research goal what problems you're trying to solve and the UXR team basically yeah built this tool that will like even find the people that

you should talk to to really really lower the bar of entry to talking to customers. Wow. All right, George. This

customers. Wow. All right, George. This

is my favorite part, which is like rapidfire questions from the sneak peek design community. One of the questions

design community. One of the questions is from Diane, and she says, "I want to know now that AI is helping to design and ship faster, where is the biggest

bottleneck in the product process?"

What's your answer to that, George? Wow.

I think that the biggest bottleneck is probably defining what you want to build and getting alignment on that first. Just

because everyone has a 3D printer, it doesn't make them an engineer and all of a sudden you just like end up with, you know, dozens of artifacts and it's work for people to go through these artifacts

and evaluate them. I think that the biggest bottleneck is a really good starting document. aligning everyone

starting document. aligning everyone around the problem that you're solving.

This could look like a product spec, but it doesn't have to come from PM.

Especially in a world where like prototypes are disposable and I'll share one link and then maybe the link updates like a central area uh that serves as a

source of truth for the project has become a blocker in some project and then like the thing that really unlocks speed in others because

anyone can build anything now and there therefore like what's important like which one of these prototypes is successful? you you really need a a

successful? you you really need a a strong written document to start in my perspective. But what do you think Jay?

perspective. But what do you think Jay?

>> See, I come from a place where I've worked in mostly like behemoth design teams. I worked on

teams that are like 500 people big, 200 people like that big. And

while it's true what Diane is saying that AI is helping to design and ship faster for me I still feel that this what the comment that she made is still only

applicable to like startups to like design teams like you like know at ramp where Diego the head of design is all about we got to have every designer

everybody using AI. So to me that's like the exception. Still a lot of Fortune

the exception. Still a lot of Fortune 500 companies are not even at the level at which you're operating Georgia, you and your team. So before we even answer

that, I think that a lot of these teams have to start doing what you all are doing before we even worry about the bottleneck. So to me the bottleneck in

bottleneck. So to me the bottleneck in these bigger teams and bigger companies is more of like the fear or the like

waiting for permission to explore like when I think about you showing what you did with magic patterns. No one came and told you like oh like George I think you

should be assigned for exploring magic patterns till you took it upon yourself to do it. So I feel like the biggest bottleneck I at least see in big

enterprise teams is that we need more entrepreneurs like you that are pushing the boundary and setting the precedent of how everybody on the team should use

AI. And I think once we get there then

AI. And I think once we get there then we can say that well majority of the design teams across the board are using AI to kind of design and shift faster.

And I think once we get there, then I think the answer to my answer to Dan's original question would be like the biggest bottleneck then would be coming

up with something that's original, something that's ingenuine, right? Like

I'm seeing a lot of people just publish something for the sake of it or create something for the heck of it just because they can say, "Oh, I'm using AI to do it." But I still think before

jumping to AI, you got to have something that's very unique, something that's very true, something that's really solving a true customer problem. And I

think that's something that like AI is not going to help you. AI, it's going to help you design and ship, but it's not going to help you come up with all like the pain points to solve or come up with solutions. So

solutions. So that's my long-winded answer. I don't

know if that made sense, but that's what I feel.

I like your point about originality and and finding the right problem to solve in the first place because to hammer everything looks like a nail and an AI

is just going to like be your cute little buddy that wants to do it all for you. You got to figure out when to say

you. You got to figure out when to say yes, when to say no. Like for example, like this screen that you're seeing here, the pattern here, the title AI design with magic pattern, someone's oh

just feed it to chat GPT. It will come up with thumbnails. It will come up with the questions. It will come up with a

the questions. It will come up with a post here, right? Like no AI told me to come up with this subject line for my post. Like I'm interviewing the RAM

post. Like I'm interviewing the RAM design team on how they design using that was just my intuition. And what is that intuition based on? That's based on hundreds and hundreds of LinkedIn posts

that I've created. So could I have used Chat GB to create it? Probably. But this

is just something where I felt like, hey, I'm noticing a lot of designers DM me, ask me, talk about this. I think it makes sense. So this is where the

makes sense. So this is where the originality or my Jace POV comes into play. No Chad GPT is going to tell me to

play. No Chad GPT is going to tell me to do it. Like even the whole interview

do it. Like even the whole interview today or the topics we focused on these topics, these are not sourced from Chad GPT. This is just like Jay's observation

GPT. This is just like Jay's observation on what could be relevant or what the design community needs. So I think having a strong POV is going to be the

biggest bottleneck like people having a strong POE that is not backed by LLM, not backed by any of these agents.

>> Yeah, exactly. You got to know what you want to work on and you got to be able to convince other people of it too. So

chat is not going to be bad for us. And

before I go to that, I'm still one of those creators that is not using AI tools in many ways in my process. And I

still feel like I get it's just if I have to forcefully use something just for the heck of it so I can be like, oh look, this is how I use chat GPT plus Journey to create my

YouTube thumbnails. I'm like, no, it's

YouTube thumbnails. I'm like, no, it's super easy for me to just quickly go in Figma and update my thumbnails. That's

my process. That's it. It's not fancy.

It's not sexy. It's not going to get any likes, but doesn't matter. It's what

works. And until I'm convinced that using AI in some way, like for example, like someone like one creator was like, "Oh, I use chat GPT as my business

partner, my coach to tell me things to focus on as a creator." I'm like, "That's good." I use journaling. I use

"That's good." I use journaling. I use

diary. I use conversations with other creators to figure out what I need to focus on. That's my process. I tried the

focus on. That's my process. I tried the whole chat GBT feeding it all my weaknesses, my concerns and stuff, but honestly, man, I was not impressed. I

felt like all that effort I put into chat GPT and giving it all the context about sneak peek. I got more value by jumping on a call with my buddy Rid who

hosts the dive club podcast and we just had a jam session that was way more productive, 100x more productive than whatever chat GPDK was outputs. I see an

emerging discourse that I hope gets even larger and more important because it's like a core principle of mine which is that like struggle is an important part

of the process and grappling with being incorrect and wrong and trying to find your way to a nugget of wisdom by

yourself or with the help of your peers is the only way that humans get smarter.

and like outsourcing that to GPT every time like whatever if you want to do it sometimes for some things that's no problem but it is not the like be all

end all thought partner for me because I've noticed it honestly makes me more stupid over time it like reduces critical thinking and I just need to sit

down with a document and struggle for a while sometimes and like there's actually a lot of opportunity in that struggle so I've been seeing the discourse course. I appreciate it. I

discourse course. I appreciate it. I

hope it gets bigger. I just wanted to drop that in too.

>> Couldn't agree more, man. And then we've got last question from X where V is asking question for you and the team, George. What are your plans with the

George. What are your plans with the ramp design system? Are you going to use AI or any specific tools to maintain it?

>> Oh, I would love to do this question justice. I can only sort of do that. So

justice. I can only sort of do that. So

that what I would say is we're still using basic building blocks for the design system. We have markdown files so

design system. We have markdown files so that we can translate part of the design system to something like magic patterns to consume.

This usually comes down to design tokens does not translate very well to things like atomic elements or components.

Right now, I don't think AI is in the process of maintaining or publishing.

Humans are still writing documentation for our design system. Humans are still putting up PRs for our design system.

Um, but cursor tab is ubiquitous or codebase. So, I would say there's

codebase. So, I would say there's probably instances where design engineers are using cursor tab to maybe move a little bit faster. But the thing

that we'd really like to solve is translating Ryu, which is like our design system into Legos for people to

use prototypes, magic patterns, but 100% RAM components, no shad CN, only documented colors from the design system. We're trying to do that

system. We're trying to do that internally. I think we have more

internally. I think we have more confidence that we can do it versus like hiring an external vendor. But whoever

solves that problem, like I said earlier, is going to be a multi-millionaire. And that's what we're

multi-millionaire. And that's what we're hoping to build, at least for the internal team.

>> Thank you so much, George, for coming on Sneak Peek and sharing your best practices on using AI. David, thanks for asking great questions. It's been an honor. Hey, this is Jay. It means the

honor. Hey, this is Jay. It means the world to me that you watch this video.

If you want to unlock the AI design and growth to design interviews with designers at some of the top companies in the world, then head on over to sneak peek.design and subscribe to the

peek.design and subscribe to the newsletter.