This is a design exercise that I did as part of hiring process for a company that I recently interviewed with.
I wanted to share the process because I found this problem really interesting. Also, interviews could be stressful. If I can make anyone who is going through the same process feel a little better by sharing what I did, I would love to do it!
Problem
Create an e-commerce product detail page for a physical product of your choice.
Goal: Optimize your design towards getting people into the purchase funnel.
Suggested time spent: 2 hours
Other notes:
- This task is more about product thinking. So don’t perform intense user research
- You don’t have to design a complete workflow
- Pixel perfect screens are expected as final deliverables
Understanding the problem
I made several decisions so that I could design to my strengths
- Product: Grumpy cat plushies (it’s one of the examples in the instructions, and it's SUPER CUTE）
- Platform: Mobile
- Technical Constraint: Existing mobile capabilities
- Assumption: I’m assuming that I’m designing for a product dedicated to grumpy cat plush shopping. So all the design decisions are optimized for selling this particular kind of product.
Research
Quick user interview
Because of the time constraint, I just grabbed some friends and did some quick interviews.
Sample questions:
- How do you like shopping online?
- What websites/apps do you use for online shopping?
- Did you ever shop on your phone?
- Task: You want to get a stuffed animal for yourself/your girlfriend to put in your/her car. Can you show me how you would do it online？
Competitive Analysis
I did some competitor research to see how other products presented information on their product detail page.
Things to bear in mind before designing
Assumptions about product detail pages
- When users come to this page, they are already kind of interested in the product
- Users have already viewed the image and some information of the product on the previous page before arriving at this page
- Users come to this page either to buy this product or to learn more about this product
User Needs
- Being able to see more details, such us more detailed images, product specifications and how other people like this product
- Being able to add the product to cart and check out
- Being able to scan all the information really fast since people probably don’t have too much time to spend on their phone
Business Goals
- Getting people to actually buy this product
- Building relationships with users by providing a pleasant shopping experience
Final Design
With user needs, business goals and assumptions in mind, I started sketching some wireframes and went through several iterations. The following are the final designs.
Design Decisions
Color Schemes
- I chose white, black and grey as the main colors since I wanted to keep the interface clean and give more attention to the product images.
- I chose pink as the accent color to grab users’ attention to CTA buttons since pink can get people excited, which might help make users buy more stuff.
First Fold
- Large high quality images
When people try to get a stuffed animal, one of the most important deciding factors is definitely how cute it is. That’s why I gave a lot of pace to images to make sure that uses get the cuteness of the plush.
- Bold, always accessible CTA button
I made the “Add to cart” button big and prominent. Also it is sticky to the bottom so that it is always easy for users to hit the button.
- Price, shipping information, stock information, and reviews
These are also what most people care about before placing an order. Ideally, some users don’t have to scroll down before adding the item to the cart.
Product Description
Assumptions
- Most people don’t actually read product description
- Ratings might not be reliable enough without a decent number of reviews.
Design Decisions
- I put product description before ratings. Because it makes more sense logically to present objective information about the product before subjective opinions from other people, especially when there are too few reviews about the product .
- I made product detail sections collapsed by default.
Ratings
Assumptions
- Some people don’t need to read individual reviews if there are a decent number of reviews and the overall rating looks good.
- A breakdown of reviews makes the ratings more reliable to people.
Design Decisions
- I provided a prominent overall rating and a breakdown of reviews.
User uploaded photos
Assumptions
- People prefer images than pure text, especially on the phone. Images are easier and quicker to read than text
Design Decisions
- I created a section dedicated to customer uploaded photos. If users hit one of the photos, they will see a full-size photo and the corresponding review.
Reviews
Assumptions
- People don’t like reading long text on the phone.
Design Decisions
- All the reviews should have a title to summarize it
- If the review is too long, we don’t show the full text upfront
- If there is a photo, we show the photo along with the text
Check out
Assumptions
- If we provide a checkout button upfront, it’s more likely that the customer would actually finish the purchase.
Design Decisions
- After users put something in the shopping cart, we should show a message saying “1 item added”, with a checkout button.
- If users don’t hit the button, the popup should go away itself.
A slightly difference case
Size & Color
For a dedicated grumpy cat plush website, it makes more sense to present different colored/sized plushes as separate products. So Users don’t need to pick color and size on this product detail page.
But I found this size&color problem really interesting from UX perspective. So I decided to explore more for a different product, boots.
I realized that there are actually a lot of different ways to have users select size&color. And here are some design variations.
Design Variation 1
Pros
- The interface is clean
- Users can see large images
Cons
- Users can’t see what colors/sizes are available. They have to see it in the second step
Design Variation 2
Pros
- The interface is clean
- Users can see all the colors upfront
Cons
- Users can’t see what sizes are available. They have to see it in the next step
- The buttons for colors are located at an unusual place. It might be hard for users to find them. Users might also mistakenly take these buttons as pure images
Design Variation 3
Pros
- Users can see available colors and sizes
Cons
- They have to slide horizontally to see all the sizes. The area is relatively small.
Design Variation 4
Pros
- Users can see that there are other colors available
- The interaction is easier for users with a dedicated bottom menu to select size
Cons
- Users can’t see what the other colors are
- The image size has to be smaller because of the buttons for color and size
Design Variation 5
Pros
- Users can see all available colors and sizes
Cons
- The image size has to be reduced to make room for the buttons.
Because of the time limit, I didn’t continue exploring more variations. And ideally we can run A/B testings with these design variations to make a better decision. The following is just my personal proposal.
My Solution
Assumptions
- Showing all the available colors helps sell more shoes since people can easily see all the options
- For most shoes, they don’t have too many colors with the same style
- For products like shoes, the current image size is not too small
Design Decisions
- I chose to show all the colors upfront
- I placed the size buttons at the right bottom corner since it’s the easiest spot for right-handers.
- Users can zoom in images to see more details
- When you scroll down to see more product details, the buttons for color and size are actually out of sight. If you hit the “add to cart” button without selecting a size, a popup for color and size would show up.
This was just a quick design exercise that I did. I know that there are actually a lot of things that could be discussed and improved. Feel free to comment and share your thoughts!
Thanks for reading!
