Hey, everyone, and welcome back.
So we're going to talk about our Khatun Checo compositions that we've created based off of some of the
components that we've created in the past and recipes that we've created.
So you may notice that we have our car here.
And what I've done with our car is I've made it really simple.
I've used it as just an overlay.
Now I have just my header.
Now, this is a component that I've created, but I actually didn't use the component in this instance.
We can use that because I just pulled this because I had a previous design of cart where I took up the
whole page and I thought that wasn't necessary.
And I thought a better implementation of it would be to actually have it just pop up from the bottom
as an overlay and to keep that really simple and small, not have that take up too much of the screen.
Because if we think about cart in general, when we buy stuff off of different types of marketplace
websites, we don't necessarily buy like ten things at once.
I mean, that's a rare occurrence, maybe if you're shopping for a holiday or something like that.
But generally you're buying like maybe one or two things, maybe three things at once.
And what I wanted to do is I want to make that very simple in terms of the experience.
I want them to press that cart button, see this pop up.
They can add to it really easily.
I have these two variations here.
Like I said, when you were starting to build out the design a bit more, we have to start thinking
about all those different types of scenarios.
We also think about the scenarios in the beginning as well, when we're building site maps, when we're
sketching still, when we're, you know, building out user flows.
The thing is user flows and sketching, that's kind of thing is going to just happen throughout the
entire design process.
So don't worry about, you know, forgetting something in the past because new features will come,
new problems will need to be solved, and you'll need to kind of go back to the drawing board, quite
literally, share those with your team or your stakeholders like clients and come to some sort of solution.
So this is my solution for carp.
And I use the same type of recipe that we created back in our design system, which was like our cart
list.
And I have the different car components, so you'll notice that this is not a component, this default
component over here, that is just because of when I was using it within a prototype.
So if I go to actually update this, I'll need to do is copy that.
I can bring that down the list.
I can remove that one.
Now, what they do is I'm going to Comanche and I think I have this price that seventy five, ninety
nine.
And like you can just easily update it like that.
Perfect.
So there you go.
Like, now we have a component you can even have that reflected.
And here it's pushed all the way up, let's get rid of the one that isn't a component and there you
go, everything's kind of back to normal now.
Now, like I said, I had two variations here.
I have a variation where we have the cart when the user first pulls it up.
And then I have a variation where we have a cart where somebody swipes.
And I just want to show that because when you're working closely with developers, they want to see
all these different types of interactions and we'll get into prototypes later.
But they want to see the different types of use cases we have for different types of models, overlays
or just like compositions in general.
So at the bottom, I've decided to kind of go with just showing off the total.
Like I said, like we haven't seen this all caps version yet as typographic elements, but we've seen
them in the pill.
So I found like a maybe like a double use case for this.
So I may create another style just to have for something like this.
I have the checkout button with an arrow trying to create a little bit of like famo, which is fear
of missing out or just trying to create some sort of urgency like come up, let's go in this direction.
So when this happens, we're going to push them to a new page, which is the checkout.
So they've already reviewed their car at this point.
And then check out what we want to just kind of focus on is do we have the right type of payment method?
You'll notice that I'm using the same card that we've created in the card section.
So if we kind of go back to our design system, I'll take a look there.
Let's go back to the cards.
You'll see that we've created a Bank of America card, just something small that we can kind of change
on.
If you want to, like, add a new bank, you can do that.
What I've done is I've just created a standard card that kind of fits our brand, but I've also just
kind of slapped the name on there.
I've also kind of slapped like a MasterCard logo.
And you can you can do that, too.
It's there for you to kind of go ahead and edit.
Now, I have that.
I've also added like a carousel at the bottom.
So if users want to swipe through cards maybe of multiples, there's a cool interaction to be hard right
there.
We want to make this really nice, really exciting even through the checkout process, because if we
take a look at all the different types of checkout processes that we've participated in, a lot of them
are really boring.
We don't even read anything.
We are just kind of like, yeah, yeah, whatever.
But if we do need to change credit cards, that kind of stuff becomes a little bit more less exciting.
They also sometimes the experience there is not nice.
So we want to make sure that these cards are right up in the user's face.
They are very familiar for the users.
So they can understand that, oh yes, this is my Visa or MasterCard that I've put into this application.
So I can see that very vividly over here.
I can swipe it if I need to add another one or if I need to use another one.
I also have like the important shipping information right up front, like I know where this is getting
shipped to.
Below, I've also added a very small section for adding a promo code making that very simple.
It has a CTA like a bright yellow button.
But I mean, it's not necessarily the primary thing users need to do here, but I've kept it there just
so it will reflect in the total price of right away.
And users can see that connection between here and here.
But like I said before, I'm using my placeholder unselected button.
And if we want to show this interaction in more detail, we would create like another screen and have
like a selected input as well.
And I'll show you what that looks like later.
I have my apply button over here, which is just kind of like my primary button.
That is the default.
And then I have like my delivery fee.
I have the order total and the button.
I'm using our footer.
And I've noticed that I'm starting to use a footer very much like I'm using a header within the application.
And I thought, you know, maybe this footer becomes an actual component now.
So I may actually go back and create like a footer component section where this and I maybe add different
variations like you've seen in the cart where there's a footer, where there's a button and text.
Over here we have just like kind of the primary button.
You'll see it also and like product pages as well.
And once that happens, this is the exciting part.
We have like a confetti pop at the end, you know, just showering down on our users, like, woohoo,
you place your order.
And what will happen here is just a continue button would pop up and they would just go back to the
home page.
But we want to kind of make it a little exciting right now.
A lot of applications don't make it exciting when you do something really well.
And this is kind of goes back to what we talked about with motion and animation.
You know, it's OK to create these screens and reward your users in a way they kind of love that kind
of stuff.
And we want to make sure that it's reflected in our designs, gives our product a little bit more personality,
especially with, like the bright colors, you know, just the animation of the confetti flying down.
Whenever you actually complete in order, you do something successful.
So I wanted to reflect also on the designs over here.
And I've noticed that, OK, well, I have a confetti frame and I may actually have to make this into
like an animation with fake motion or another type of application like principle or something like that
or after effects.
So I'll just create this and I may actually put this in their assets within our components in our design
system if I want to reuse this elsewhere, because we do use a screen a couple of times.
Yeah, you'll just realize that.
OK, then this is some sort of reusable component or animation that we can kind of keep to the side
and reuse whenever we want to.
And again, like we have the footer come in here, it's a little different this time.
It's still a fixed footer.
As you can tell, it's fixed position over here, but it's not a primary button and it doesn't have
like a thin horizontal rule that we see at the top of this, that little gray line.
So there are different variations to be had for those components.
And we'll probably go back and actually create more components based off of all the different variations
we come up with.
So it's OK to start creating high fidelity mockups without, you know, components and stuff like that.
Totally fine.
That's actually normal.
When you start kind of adding components to your designs and stuff like that, you start to realize,
hey, like this is starting to come together.
It's really neat.
Everything is like in its own place.
But like, I'm finding that I don't have enough flexibility.
So I have to go back and think about maybe some more typographic elements and stuff like that or more
recipes that can help bring this all together a bit more.
And that's it for Khatun Check-Out.