Let's jump right back into creating some more user flows, so we left off at registering within our
product.
I think the next user flow we should probably think about is, you know, maybe finding a product,
something a little bit more interesting, but not necessarily more interesting, but possibly as a little
bit of risk.
So.
And what I'm going to do is just delete this, I'm going to rename this to searching for a product fitting
for a product.
OK, so there's multiple ways to find products within our application, we've already kind of understand
that let's start creating user flows for each type.
The one that we're going to focus on right now, at least, is finding the right product through search.
OK, so let's get right into this.
Let's just start afresh.
We have our first step, obviously not this step, but we'll work on that.
OK, so step one, when I'm starting to search at the home screen, so I probably need an input.
There's probably a bunch of stuff here and maybe there's like a headline, some large products.
You know, we kind of made this so that the before maybe we should have saved that as a component of
its own.
But so, OK, we have some small products.
I mean.
If we were to try to create a flow for finding a product, we could probably find one through this route,
whether it's like a small product or a large product.
And, you know, those flows will be different from the one we're creating.
So let's focus on just search.
Actually, you know what I like to highlight that make it look like a.
And that's another thing you can do with user flows, you can distinguish based off of color and stuff
like that, we can do that with our search over here.
Step one, the user is able to begin their search from the home screen.
I called the welcome screen, but it's actually the only screen.
These are able to begin their search from the home screen, and that's basically it.
So that's step one.
Let's just copy that over.
Step two now.
Watch it step to be.
So, like I said before, we can actually start creating.
Like this actually applies here as well, so we'll know that we'll need to create another flow for.
Selecting a product directly, so sometimes I'll leave like a little note here and just say step two
point one or something like that, the user is also able to find the right product if it shows up on
the screen so we can actually create a feel for that if we want to afterwards.
Now, I know that's just there as a reminder.
So the user is able to begin their search from the home screen.
OK, and what happens next?
So the next step, lets just copy that over.
Perfect step to actually let's just finish this off just a little bit.
The user can click the search input, so once they've clicked the input.
There is something here that happens and that should probably be them entering their search, so what
can we signify is that.
We can just say this is like a keyboard, so the user receives a keyboard prompt within a search overlay
and is able to enter their search perfect.
So that's step two.
Now they have a prompt.
They're able to enter their search.
Now, when we were sketching, we started thinking about things like type ahead of it so we can actually
highlight that here.
OK, let's take so that we can use this as like part type of head results.
So another figments, if if I'm going to press command shift and duplicate that, I can actually let
it go and then press Kamandi to duplicate the exact same thing I just did so I can create multiple.
Now, I'm just going to change the same color, I'm going to signify that these are actually the suggested
results.
So step three.
As the user types, the product gives the user suggestions of potential searches, the user clicks on
the search item that relates most to their intended search.
So essentially what's happening here is the user is actually clicking on here as they are typing, they're
getting suggested results and the user can actually just not click one of these, but they can just
keep on going and click, enter whatever that is within the keyboard.
But we're just going to highlight that they can actually click through a suggested result.
OK, so step for let's jump right into that step for.
What do they see now?
Well, what do you think they see?
Let's just remove some of that so they probably still have their search at the top.
And it's going to continue to use this.
And modify it from here on out, I'll use this as well to modify this well, what I can do here is go
back to the master component and make this a bit more scalable.
I fix the constraints there to make it left and right.
So when I do adjust that frame, it's going to adjust with it so we can play around with that.
So let's go back down.
Ah, here we are.
So let's fix that.
So those are search results.
OK, so these are the search results, so this is stuff for the user is presented with many search results
and now they choose the product that they have been looking for.
So another interesting thing here is, OK, I'm just going to highlight these really quickly.
So let's just highlight those just so we can signify that this is being clicked.
Like I said, I mean, there's no really right way of doing this.
As long as you're explaining this really clearly to your audience, they're going to get it.
Just make sure to use what I've told you in terms of like a very clear title, clear direction and clear
details.
And the rest is just kind of follow.
But one thing I'm noticing here is that, you know, we spoke a little bit what the make up of this
page could be.
And I'm just going to create, like a little button in there.
You know, maybe I'm thinking like, oh, wow.
Like there is a filter here.
And now we have to think about a filter flow.
So as we go through individual flows that we're trying to solve for, we're going to find a bunch more
that we're going to have to solve for.
So this is the great thing about user flows and keeping them separate, because it really breaks things
apart in a way, even though there are many to actually create and work through, it really helps us
kind of make it much more manageable and understandable.
So what I've done here is I've just highlighted the search results, so that's just going to indicate
that a user is clicking through their.
Perfect.
Wow, while we are on step five, so what happens in step five, so they've clicked the search results
and now they've found what they've been looking for and that is the product.
So we're just going to kind of end this here.
Let's just steal that again.
So honestly, at this point, don't waste your time going crazy in terms of visual design or anything
like that, we really just want to get into like it's the same concept as sketching.
We just want to keep on generating ideas and we want to work through these and refine the details later.
It's really easy to get bogged down by all that kind of stuff.
So, OK, we have a CTA at the bottom, you know, like purchase this product or add it to your car.
We have probably like a headline.
We have some text.
Maybe there is like similar products or options here.
So there you go, we've kind of created some sort of wireframe very easily, took two seconds just using
some of the components that we built.
And we can even create a larger component library if we wanted to.
But for the sake of moving with speed being a little lean, this is super easy just to do.
If you're just quickly jumping into something.
If you do this often and sometimes you will, maybe it's great to create your own kit.
So step five, the user is now able to review the product that they had searched for and can decide
if they want to add the item to their hearts.
Perfect.
So now I know that after this, there's going to be another flow hundred percent and we're going to
tackle that soon.
But this is our flow.
So finding the right product through search step one, the user is able to begin their search from the
home screen.
There's our search bar.
We do know that users can find a product elsewhere, so we'll probably create another floor for that.
Step two is this user gets an overlay here with the keyboard and search.
They can enter their.
Details, and when they do that, they get suggested results here, they have the option of actually
just clicking the button and going to the search results, page it just based off of their search.
Or they can use one of their suggested results that we've given them to push them to the search results
page.
So that's what the user does here.
The user actually clicks this button here and we can define that interaction a little bit more later.
And now they see a list of search results and overhear what they're going to do is they're able to click
on a search result and move to the next screen, next step in our flow, which is the product description
page.
We also do know that we probably need to make another flow for what happens if they don't find their
product.
What happens if they decide to filter?
I mean, there are so many different scenarios just loaded in this one screen.
And that's what I mean when we have to start asking ourselves some questions in terms of like, well,
what is going to happen here?
What happens if something doesn't go right?
We often always design for the happy scenario, and that's totally fine because we do need to design
for that scenario.
But oftentimes that doesn't happen.
So we need to make sure that the unhappy scenario is just as pleasant.
So what happens here is they click on the search result and now they're right into our product description
page.
And from here they would probably either add the item to the card.
They can actually add it to their wish list.
So that's another scenario that we need to think about, a flow that we need to actually build out.
And yeah, that's it.
So this is our flow for finding the right product, the research.
Great job, everyone.