How did you do?

Were you able to find room for everything?

Let me show you what I did.

So, here is the design that I created in Adobe XD.

And first I started out with a box containing the shirt

just like on the website now.

But I decided to fit in more horizontal elements on the right side,

like a few lines of text and Add to Cart button.

This makes the card a little wider than it is tall,

rather than tall and skinny cards that are on the site now.

The name of the product is in bold, so it's easier to read, and

I wrote a short description underneath.

I used a unique circular shape in the upper right,

to break up the shape of the box and call attention to the price.

Then instead of a drop-down menu showing sizes,

I decided to expand that out into selectable icons, so

that it's easy to see what services are available at a glance.

This might seem like a subtle change, and

maybe even less compact than a drop-down menu.

But imagine the frustration of finding a shirt you like, and

then clicking on a drop down menu to select the size and

check out, only to discover the size you wanted isn't available.

This way the customer can scan the page without making the extra click,

unless they're ready to actually make a selection.

Finally, there's an Add to Cart button.

If you wanted to take the step further, you could create an additional

state that shows what this looks like once the item is added to the cart.

Maybe this whole card animates and flips the card over, or

maybe confetti comes out of the Add to Cart button.

You might also consider adding a quantity selection,

in case they want to buy more than one shirt.

However, that's also something that could be saved for check out.

If my design looked really different from yours, don't worry.

Remember, there's lot of different solutions to this, and

the important thing is to just keep practicing.