Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
How did you do? Were you able to find room for everything?
How did you do?
0:00
Were you able to find room for everything?
0:01
Let me show you what I did.
0:02
So, here is the design that
I created in Adobe XD.
0:04
And first I started out with
a box containing the shirt
0:08
just like on the website now.
0:13
But I decided to fit in more
horizontal elements on the right side,
0:16
like a few lines of text and
Add to Cart button.
0:21
This makes the card a little
wider than it is tall,
0:25
rather than tall and
skinny cards that are on the site now.
0:29
The name of the product is in bold,
so it's easier to read, and
0:34
I wrote a short description underneath.
0:38
I used a unique circular
shape in the upper right,
0:41
to break up the shape of the box and
call attention to the price.
0:46
Then instead of a drop-down
menu showing sizes,
0:52
I decided to expand that out
into selectable icons, so
0:56
that it's easy to see what services
are available at a glance.
1:00
This might seem like a subtle change, and
1:05
maybe even less compact
than a drop-down menu.
1:08
But imagine the frustration of
finding a shirt you like, and
1:11
then clicking on a drop down
menu to select the size and
1:15
check out, only to discover the size
you wanted isn't available.
1:19
This way the customer can scan the page
without making the extra click,
1:23
unless they're ready to
actually make a selection.
1:29
Finally, there's an Add to Cart button.
1:33
If you wanted to take the step further,
you could create an additional
1:35
state that shows what this looks like
once the item is added to the cart.
1:40
Maybe this whole card animates and
flips the card over, or
1:45
maybe confetti comes out
of the Add to Cart button.
1:49
You might also consider
adding a quantity selection,
1:53
in case they want to buy
more than one shirt.
1:57
However, that's also something
that could be saved for check out.
2:00
If my design looked really
different from yours, don't worry.
2:07
Remember, there's lot of
different solutions to this, and
2:10
the important thing is
to just keep practicing.
2:13
You need to sign up for Treehouse in order to download course files.
Sign up