Hey, let's jump right back into creating some more user flows.
So where do we leave off last when we actually finish creating the user flow for finding the right product
through research and right at the end?
We finished with the product description page, and I think that's a good kick off to, you know, possibly
adding an item to the cart.
Let's just duplicate this.
Let's rename it so, commander, what should we call this, making a purchase?
Perfect.
Let's delete this stuff, clean this up just a bit.
So hypothetically, the user has added this to their car.
They're back at the home screen.
Let's delete all that.
Let's put our title, our title as making a purchase.
Very nice.
OK, step one.
OK, just quick before we jump in, I'm going to click this.
And right now, this is the instance that we're on this button.
What we can do is we can click right here on our panel and click the instant sections of button, and
I can replace it with anything I want.
So I'm going to replace it with Field.
And there you go.
You don't have to keep on going back to your assets, Tokugawa, if you don't want to have your tab
over here.
So we actually didn't make a navigation, and that's totally fine.
We'll just make one really quickly right now, OK?
Spread out all the way to the end.
That's going to be on the edge.
Another figments tip, if you want to spread these all across evenly on the horizontal plane, we're
going to do this go up here.
And distribute horizontal spacing perfect so we can just do something like this and then.
So this is going to be our icon for now, if we really wanted to, we can jump in, grab the icon,
but we're just going to just use this and we're going to create another circle.
So think about when we usually have something in our cart, we're using an app that has a. in their
car.
We usually have some sort of notification that's constantly there to basically push us to check out.
So we have a little notification there on top of our car icon, which totally looks like a cart just
to nudge the user in that direction.
So
the user is able to see a cart notification that they can interact with the user.
These are taps on the cart and navigation.
OK, so that's step one.
Let's duplicate this again.
Stabbed to the nose.
OK, so what do they see now?
You do OK?
There's probably some text at the top that says cards and our sketches before we started building out
what the screen looks like.
So we kind of have some sense of hierarchy here.
So let's just take some items.
So, oops, there it is.
Let's bring that in.
So this is our item in our Kurts, it's looking fantastic.
A button.
You notice how quickly we're just creating these user photos with our components.
I mean, it's all about speeding up your workflow.
We don't have time to go over and recreate the wheel all over again, every single frame.
So make your life easier.
Set yourself up for success.
OK, so I have a beautiful card screen, totally a card screen.
So what we're going to do here is we're going to just write a description for this task.
The user is able to review the item such as items in their carts.
Once they are happy with this information, they can proceed to the checkout process.
OK, that is perfect.
So step one, cart notification nudges them, step two, they go into the cart screen.
Now step three.
So let's actually give a little more detail here.
Once they are happy with this information, they can proceed to the checkout process by tapping the
CTA.
I know we're kind of moving quickly, but it's always good to just go back and do your best to avoid
any details that you think are relevant.
I'd like to kind of break it into two different sentences.
I mean, they don't have to be limited to that, but they also don't need to be paragraphs.
So the first sentence is what the user sees in the second sentence would be what they plan to do.
Sometimes that's kind of molded together like we have here.
The user is able to kind of review their item in their car.
So they're kind of doing something at the same time.
But once they are happy with that, once they've seen that information, they're able to do something
else.
So in this case, they're clicking that CTA to actually start that checkout process.
Awesome.
I love it.
And it coming together.
Let's go to the next step.
So review purchase details is probably what we will do next.
The user is able to review any details in relation to the total price user payment details, user address
details, and that's probably it, I'm trying to think.
So total price, hmm, maybe some check out details, maybe those are things like shipping.
Shipping price.
What else could there be?
There could be like promo codes, so we do really need to think about all those different scenarios
as well.
So see how the details are kind of just coming to me as I'm building these screens.
It's never going to be perfect.
And that's honestly it's all about iterations about putting something down on paper or digitally and
then building off that and getting better and better and just providing an overall good experience for
your users.
Don't just jump right into the pretty and fancy stuff just yet.
So what we have here, the user is able to review any details in relation to the price.
Check out details, user payment details and user address details.
I'm just going to write this off.
Once the user is satisfied, they can complete their purchase.
Great.
OK, so let's just kind of break up this screen a bit so we have the item details there.
What else could they have?
They'll probably have some information regarding.
Like.
Their account.
And payment details, maybe that's at the bottom, I'm not sure, but the hierarchy just yet.
That's something that you just kind of test over time, you prototyp with people just to get it right.
Maybe there's a field for a promo code.
I don't know what it looks like just yet for this checkout process.
There's probably like a headline.
OK, so we have like our item, we have our promo code.
Maybe some details around the product or I mean, sorry about the users details like their method of
payment and their address that maybe they'll be able to edit.
So I'm starting to think about that kind of stuff that I need to design for and think about.
Maybe this is a good place to throw in.
This is what the total could be.
Okay, perfect.
I actually kind of looks like a receipt.
Totally unintended that I like it.
OK, so.
What do you think the U.S. should do after here?
And the user probably confirmed, so once the user is satisfied they can complete their purchase, the
user gets a confirmation.
And is able to return back to the home page.
OK, so when a user gets like a confirmation screen or something like this, that's a pretty big deal.
I think personally, I think it's a huge deal.
And I think this is where we can start thinking about, well, a user just did something pretty amazing.
They made a purchase on our platform and we should kind of like reward them with something, whether
that's a micro interaction or some sort of animation just for, like, delite.
So maybe it's something like we can start making a note here that says possible animation for our disconfirmation.
So we can just kind of highlight that there and we can just label it a different color, because I want
to really start thinking about these types of things.
I don't want to leave it to the end because it's not good to leave it to the end, especially like how
we spoke about that in terms of when we were sketching and sketching interactions so we can kind of
break this out a little bit more and start thinking about, well, what does this look like?
What is the possible animation that we want to build here if we do want to build an animation?
Do we want to build an animation around, like the notification?
So I'm going to probably leave a note here, too.
So Kominski and Comen feel that perfect possible animation round notification.
So I'm starting to pick out some key details here in this flow just so it makes my life easier when
I come back to this or when I'm building I'm building this out further and that's it.
There you have it.
That's making a purchase.
Step one is the user is able to see a card notification.
Step two is they well, they click on the notification, then they go to step two and step two would
be in their card screen.
Look, I kind of think I forgot something here.
Maybe in their card screen they possibly see.
Additional items that they would like.
So that's something to probably think about.
I'm not sure if that's feasible or if we want to distract them here, but something to think about as
well.
Anyways, so step two is they go to their card screen and they're able to review this information.
And if they're happy with that, they're going to go straight over here.
And when they're done here, reviewing their whole order payment details, other types of input fields,
check out total, they're able to click on this button to place their order.
And once they're done that, they go to a confirmation screen that basically gives them a high five
for doing what they're doing.
So, like I said, keep these user flows simple because there will be more user flows.
One hundred percent, as we saw, like, there's probably a couple of flows that could come from this.
Like what happens if the user needs to change some payment details?
We can easily create a user flow for that.
What happens if the user deletes the item from here?
Where do they go?
Just keep making your user flows purposeful.
I mean, they need to have a purpose.
They need to be detailed.
So that way you can keep track of them and other people can really understand them.
And then from here, we can really start defining much more of the structure of the app and also much
more of the details that we're going to need to design for.
And that will definitely lead right into us actually creating some wire frames with some content.
That's if for user flows, this is making a purchase.