Day 12 of 100: Crafting a minimal e-commerce product page

Chimdindu Aneke
100 days of UI(UX) design
5 min readJul 7, 2016

Well…don’t congratulate me yet for thinking in this direction —I’m not yet led to start a yam business ooo. Anyways, anything can happen. Yes, I can craft the online market experience for farmers/startups too :)

Today’s prompt was to “design a single item in an e-commerce site(product page)” and as usual I had to approach it like I’m crafting a real design problem. And I chose to:

Craft a minimal e-commerce product page with yam being the item sold. Yes yaaaaaaaaam :)

Preamble

You may ask, why he chose yam as the product item to design? Well…after series of what to choose ( I was thinking about locally produced goods ), an idea emerged to use the tubers of yam my cousin bought yesterday as my case study. And also kudos to my younger brother who gave me the perfect creative idea on how to take pictures of the tubers.

FYI We have devoured one tuber already :)

A product page is a page on an e-commerce website where a user makes the final decision to purchase/ignore/abandon/fantasize/add_to_wishlist etc a desired item.

Kean Richard in his anatomy of an effective product page design said that

it is this page that must convince a person to buy a particular product.

It is the make or break point in converting your site visitors. Even though we won’t neglect other parts of a website but crafting a great experience for the product page will go a long way in turning your visitors into loyal customers.

So what makes a great product page on an e-commerce website?

Lots of things contribute to making a great product experience including a product page’s url too. But for this design, I will be looking at only the page and not related items like footers, headers, SEOs and url fields etc.

Kean, still in his product page design anatomy listed lots of things that make up a product page and ordered them from the most important to the least important while Moosa Hemani in his article on designing product pages said that, ‘An effective e-commerce product page captures the audience’s attention and compels them to convert to paying customers and concluded that only the most important ones alone is required to convert and other ones contribute little to nothing in compelling users.’

From my little experience shopping online and with some brief research, I have put together what I believe are 6 key things to be mindful of when designing a product page.

  • Product title — let this match the page’s url -very key in content discovery and to users.
  • Product images — should be high resolution and zoomable.
  • Creative product description — hire a content strategist to do this please, stop copying directly from manufacturer’s site: it can make you lose significant amounts of traffic especially in organic searches. And a great one can compel users. Yes it does.
  • Product Price — even a kid will be on the lookout for this.
  • Most important call to action — Add to cart— you can have other call-to-actions like add to wish-list, share options, plugins to check prices, ask a site expert etc but please let the “Add to Cart” or “purchase” call-to-action buttons be bold, visible and smartly placed.
  • Item rating and reviews — Personally, I don’t joke with reviews and ratings. It influences most of my online purchases, this is one area where Nigerian e-commerce sites have not done well. They need to think seriously on how to convert loyal customers to start rating and writing reviews. As someone who understands the use of gamification in design, I agree with Moosa Hemani when he said that gamification can be used to get users to write reviews.

Note: the online experience for online grocery stores is still a bit of a challenge for some of our skeptical internet users (Nigeria), for they always ask if what they are shown on the site is the exact thing that is delivered to them.

Sketch sketch sketch

Just like my other designs, prior research, patterns and lots of questions inform my design decisions. So with the above understanding I started sketching out likely screens for the task.

Untill our “Oga/Madam buy-your-yam-here wooing product page” became a reality

PS: Day 12 came a day later and I apologize for that since I needed to spend time with some lifetime brethren yesterday —

  • I had to put my brethren above the design. We all scream healthy work-life balance, right? Yes!
  • And since I am not under pressure to deliver, I made the decision to not rush in coming up with this design. But I will always make up for any day I miss( not intending to do so).

Please if you enjoyed this article, I would love you to recommend it so that it will be visible for others to read. Thanks for your patience even in this delayed design article.

See the last two articles incase you missed them

You can as well view the most read challenge article at the moment

Thanks to my awesome friend Okereke Onyekachi for reviewing/editing this as usual.

references

It Works For “You”: A User-Centric Guideline To Product Pages

101 Elements Of A Complete eCommerce Product Page

Here’s How to Create a Product Page That Converts

Anatomy of an Effective Product Page Design By Kean Richmond

--

--

Chimdindu Aneke
100 days of UI(UX) design

Father of Millions. Here on earth to Love God, Love people, and Lead and impact my generation. CurrentLy Program Manager@Facebook. Formerly @Google @Andela.