00:00:00Hey everyone, I'm Allie, and today I'm going to be showing you vZero.
00:00:03So if you're a product manager or designer, you've probably got a million
00:00:06ideas in your head and not enough time to get them built.
00:00:09vZero helps you move faster when you're ideating or collaborating.
00:00:13You can type out a concept and boom, you've got a working prototype to show
00:00:16your team. In this video, we'll look at how vZero
00:00:19helps you go from idea or PRD to live prototype in minutes. No waiting,
00:00:24no decks or fluff, just real prototypes to help you align and
00:00:27ship faster. Let's get started. For this example, I'll
00:00:32show you how we actually use vZero to build vZero.
00:00:35We're going to start with a team template shared with the entire vZero team
00:00:38that basically acts as a mini version of vZero built inside of vZero.
00:00:42So it's an awesome place to start when you're trying to figure out what works or
00:00:45won't work inside of vZero. Team templates also allow
00:00:48you to use team design systems across your team that you can import into vZero.
00:00:52That means your generations can all match your designs and brands.
00:00:56For this template, our designer has already created it to match what our app
00:00:59looks like, so we'll go ahead and click open in vZero
00:01:01and be able to start iterating on this baby version of vZero
00:01:04inside of the app. Let's jump in. Recently, we've been exploring how we can
00:01:09actually increase conversion in our logged out state of our landing page.
00:01:13One hypothesis we want to test out is what happens if we change these five
00:01:17buttons underneath the chat to something else that might help drive
00:01:20more conversion. Let's pretend users are not really clicking those buttons
00:01:24and we want to try a different strategy for showing the user suggested prompts to
00:01:28build with. I can ask vZero to help. I'll start with
00:01:31a screenshot showing just the part of the application I'm trying to modify.
00:01:35In this case, it's just that section of the site that has the chat box and those
00:01:39five buttons. Then we can use that screenshot and tell
00:01:42vZero exactly what we want to change. Great. We'll drag that screenshot over to
00:01:48the chat box and then we can start our prompt. I want to try
00:01:54removing these suggested actions. Instead, I'd like to try
00:02:02creating rotating placeholder text in the main
00:02:09chat box input that has example prompts in it.
00:02:16Let's start with a defined example placeholder prompt
00:02:23chosen from a list of 10. I'd like to also add a
00:02:30typing effect so when you need to rotate out the
00:02:39placeholders it should look like you're backspacing
00:02:46character by character.
00:02:49Then quickly typing out a new prompt.
00:02:56Okay, let's see what vZero cooks up. You'll notice that my prompt was pretty
00:03:00specific and detailed about exactly what I wanted.
00:03:03When you're creating a prototype and have something clear in your head, the more
00:03:07specific you can be, the better vZero can build. Now you'll
00:03:10see that vZero is laying out a plan for what it's going to build
00:03:13and then it's actually starting to write the code to build the feature that I
00:03:16wanted.
00:03:27And there we go. You have a mock-up of the exact idea that I was envisioning that I
00:03:31can now share with the rest of my team. If I wanted to make some simple changes
00:03:35here I could jump into design mode and shift things like small copy edits,
00:03:39font changes, colors, and more. Let's take a look and do that now.
00:03:43So I'll go over to design and I can click on
00:03:47let's say this title. I want to make an edit to the text so I want to change this
00:03:51word from ship to create. I can go ahead and do
00:03:55that and click save and then we're ready to go. If I wanted to
00:04:00see how this would look across different devices,
00:04:03I can click through the different preview views at the top of the preview screen.
00:04:07So right now it's showing what it would look like on desktop but we can take a
00:04:10look at what it would look like on the tablet
00:04:12or on the phone. We can work on those views later.
00:04:16For now let's deploy this and set visibility only to my organization so I
00:04:20can share with my teammates and have them leave comments directly
00:04:23using the Vercel toolbar. Great. Now we're in the production version of the app.
00:04:28So my teammates can go in and let's say they want it to make a small change like
00:04:32changing this back to ship they can leave that comment.
00:04:37Let's change this back to ship.
00:04:42Once they leave that comment I'll get a notification and then I'll know exactly
00:04:45what changes I should make based off of my team's feedback.
00:04:49And there you have it. V0 helps you move faster.
00:04:52You can increase the surface area of ideas that your team can explore,
00:04:55test those ideas sooner and actually show what you mean.
00:04:59Build your next prototype in minutes at v0.app. We can't wait to see what you build.