Building a Better Product Page UX for Concern Worldwide’s Gift Shop

Luke Shahinian
Dec 7, 2018 · 5 min read

Luke Shahinian • December 3rd, 2018

Published in Design

Image for post
Image for post
Wireframing Concern Gifts’ new Product Detail Page

Designing a more beautiful, accessible, and functional webpage for all devices

It was a real joy to work on this project. Outlined below are some of the decisions made as we redesigned and rebuilt the product details page for Concern Gifts, and the reasoning behind them. I’ll be using the Farmyard Bundle page as an example throughout.

Layout

Photos are obviously very important for product detail pages, and so is descriptive text. Still, “52% of sites don’t use descriptive text or graphics for their top-selling products — which represents a missed opportunityaccording to a study from the UX-focused Baymard Institute.

In redesigning the product details page for Concern Gifts, we wanted to keep images at the fore while also making product description and actionable CTAs more prominent and easier to find.

In order to achieve this on desktop we removed the full width images from the top and split the desktop screen into two columns above the fold — a large image to the left, and product title, descriptive text, and bold CTAs to the right:

Image for post
Image for post
Desktop above the fold

On lower resolution mobile and tablet devices we didn’t have the necessary screen real estate to use two columns, so we decided to limit the image height and place it at the top. This allowed us to keep the pertinent information and CTAs above the fold on most devices:

Image for post
Image for post
iPhone XS above the fold
Image for post
Image for post
iPad above the fold

Image, product title, cost, description, and CTAs are the most essential elements of the product details page for each gift. By addressing layout design in a thoughtful manner we were able to present all these elements above the fold on most devices, while still leaving enough space in the designs so that the page doesn’t feel cramped. We also had other page elements to design though — specifically additional information about the gift in action and also what a purchaser receives.

Before the redesign the product page sections “Gift in Action” and “What You Get” lived in horizontal content tabs down the page. For pages that included gift bundles (such as the Farmyard Bundle example shown in this article) there was a third tab for an “In This Bundle” section.

A study from the Baymard Institute found that 27% of users never found core product content that was organized into horizontal tabs. This meant that over a quarter of users were frustrated by the layout and didn’t see information that would have helped them learn more about the product.

With the lack of utility of horizontal tabs in mind, we decided to free the information in these sections. An argument could be made that for very long pages, horizontal tabs could potentially ease user fatigue by shortening page length, but the product pages on Gifts are not particularly long, even with all the information broken out of the tabs. On desktop we used an alternating 2 column layout:

Image for post
Image for post
Desktop page body content

And on mobile and tablet we used images to create natural section breaks:

Image for post
Image for post
iPhone XS body content

Finally, we added additional CTAs to the bottom of the page, for ease of access and a second CTA opportunity for users who scrolled all the way down the page. Previous “Add to Basket” and “Buy Now” buttons had a similar green as per the Concern branding, and thus had a tendency to get lost on the page. We updated the CTA button colors to contrast with the brand green, so they could be easily visible and accessible to users:

Image for post
Image for post
Secondary CTA, desktop

Typography & Accessibility

We achieved this by using bold header and section header text, with Concern’s green brand color, and contrasted that with lighter weight grey text for description and body copy.

The grey for body text used to be much lighter than currently appears on the Gifts site. Light text on a white background can create a more tranquil look and feel for your site, but you run the risk of failing to comply with W3C’s Web Content Accessibility Guidelines for contrast, which will lower the accessibility score for your site (and more importantly lower the site’s overall accessibility).

We darkened the grey and achieved AAA compliance with WCAG while keeping it light enough so that it didn’t feel too heavy. An excellent tool for checking type contrast can be found at WebAIM here.

We really enjoyed redesigning and rebuilding the Concern Gifts product detail page along with the whole Gifts site. Enhancements made to the layout, thoughtfully placed call to actions, a strong and accessible typography hierarchy, and device-specific designing all contributed to a rebuild that we are very proud of. Most importantly, Concern Worldwide were thrilled with the results.

With the holidays around the corner, now is the perfect time to buy a gift for your loved ones or friends and lend a helping hand to those most in need. Visit Concern Gifts today to find the perfect gift.

To learn more about SystemSeed’s approach to UX and design email us at info@systemseed.com

SystemSeed

Digital Services for Positive Change

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store