Everyone, and welcome back.
So in our last video, we touched upon, like building a product page and we created something pretty
quickly and we did it really well, I think especially for a first pass, you're never going to nail
it on the first try.
So I think we did really great here.
We have reviews.
We have like all the product information.
We have different ways to get them back into the product funnel and we have our navigation.
So I'm going to actually create a new frame and I keep on doing that.
Do not know why.
Bad habit, I guess I really want to think about the cards.
OK, so for the cards.
You know, maybe they are navigations there.
I mean, we could have it actually, I don't know if we should have it, but let's just keep it for
now.
We'll definitely iterate on this.
So we have something in our current.
Maybe we'll have like a notification so we can add like something small here.
Like read.
I'm just going to throw this on top.
That's cool.
I love it.
You know, I often don't think especially for something like this, I'm not sure I feel like you need
a badge that shows the amount of items in your car or anything like that.
I think it's pretty cool to have, like, just a little notification or badge there that it's just red
and it just reminds the user, hey, you got something in your car, buddy, you should probably buy
it.
So for Kaat, I'm going to give us a title and we're going to call my cart so.
I'm going to call it my car, and that is the title of the page right now, let's apply our grid just
so we have something to work with.
Awesome.
So we have our card title.
OK, so let's think about the different types of things that are involved in this car here.
We're going to have our.
Items.
So we're going to take that.
Let's just copy that into here, so we're going to have our items.
This is definitely going to I think it's going to be a little different.
So there won't be a heart at this point.
We want to get them into purchasing an item as quickly as possible.
So probably like that, let's look at our icons, like maybe we'll get like a garbage can and I'll show
you what I'm thinking right now.
Trash.
OK, we're out to go searching for that, so icons, now I'm looking for a garbage can because what
I do want to build is like a little add remove kind of thing where they can add more items to their
cart if you want to buy doubles or, you know, it really depends on some items.
You may want to buy more than one.
So.
There it is, garbage, I love it, perfect.
Just going to detach this can remove the group.
So there's a garbage can and I want a plus button.
Oh, there's the minus button.
There's the plus button.
This isn't like that I'm going to detach this and break up the group, shift command G will break up
that group so that perfect, OK.
I'm just turning off my grid so I can get a better look at this.
So if there's one item I think, like we should just like give them the option to add or remove that
item.
That's just three sides that I think like that's going to be fine for now, let's build this.
So 16 Bould.
OK, so we have something here.
Oops.
So we're just going to align that and we can.
OK, so there is our product, maybe if we have a second product, it looks like that and maybe we can
reverse the remove.
You can do something like this.
So if there's more than one product, so these are the types of interactions I'm thinking about a lot,
especially in the beginning, it's better to start thinking about them earlier than later.
So perfect.
OK, so there is are adding and removing.
Let's just group that for now, grouping them, bringing them up.
OK, so we have that.
I think we need some more information, maybe like total.
So we can just start grabbing some stuff here that we've used in the past.
Total.
And we're just going to shrink this.
Perfect.
I don't think this needs to be like 20.
It could be something smaller, like a 16 year old get the perfect and we have the character on the
right.
So it's going to be seventy five dollars.
OK.
You know, maybe there is like address information.
Here we go, we have some address delivered to Leslie.
And the information, so if you want to get some quick information, another great plugin is content
real?
So let's just bring that up next, you know, you can get names, you can get avatars, icons, so many
different things you don't even need to sign in.
I'm just going to get an address.
So there it is.
Just give me a random U.S. address, and that's perfect.
That's where you can bump down in size, maybe like a 12.
Maybe A14 a little hard to read, OK, so there we go.
We got an address easily.
And I think that's pretty much it we're going to probably need let's think, what else would we need?
We will need a button to check out.
So primary.
But in there we go.
Perfect.
So we are definitely thinking about, like the hierarchy over here, you know, my assumption right
now is people want to see the items in the car and then maybe some other items afterwards.
I'm not even sure if this is actually useful right now, but I think maybe it's good to give them a
heads up of, like, hey.
Is this you?
Is this who we're going to deliver to you?
Maybe it's something worth checking out and we can ask our users what they expect.
And if it's something that kind of surprises them, maybe they'll like it, maybe they won't.
And we can definitely make changes based off of that.
So we have check out.
We're going to definitely need this.
Some other things I'm thinking about also like.
Some things I have been thinking about, I don't know if I want to navigation in the card screen.
Maybe it's best to kind of like make a sticky checkout button rather than a navigation, because we
want to get them checking out much more quicker.
So something that we need to also explore.
I think we can even use this maybe like in this screen, this is another assumption of mine as well,
like maybe if they don't want to check out right away, they're just looking at their cart.
Maybe there's another way to kind of push them into the funnel.
Once again.
OK, so this is a basic card screen, like your card screen doesn't need to be complex, it could just
show just some images in terms of like the items that the user has purchased or has added to their cart.
Definitely the total needs to be there and there needs to be some sort of button to push them into the
actual checkout process.
You know, this is all optional.
I'm not sure if this is actually useful.
Same with like this.
I'm not sure yet, but I've seen this a couple of times before, so I'm not sure exactly if these are
going to work, but we are definitely going to iterate based off of the type of feedback we get.
So I want you to kind of take a stab at the rest of the screens that you feel are really necessary.
Things like car, things like a wish list, maybe.
What is a search look like when we wireframe it?
You know, have fun with it.
I mean, think about the different types of content that will be on each page.
Think about that hierarchy when you're actually laying it all out.
If you need a grid, it's so easy to create one.
So go ahead and do that.
You don't necessarily need one, especially at this stage, but it helps keep things consistent in terms
of like when you're starting to think about laying it out.
And yeah, definitely just keep on building those wire frames and test them.
Don't just stick with one set and then, you know, forget about it, because I know that I'm going
to have to change this.
I've already accepted that fact because it is a fact.
I mean, we're definitely never going to get anything right on the first try.
So go out there, test your assumptions and make those changes and test again to ensure that you're
doing the right thing.
And that's if for wire frames.
I hope you all learned a lot.
And I hope you've seen like this component library will definitely speed up your workflow.
So go out there and create some more frames and fun.