Product page redesign
My Role: UI Design and Front-end Developement
Business goals: Increase customer conversion rate on product pages.
User needs: See social proof, product options and media in a way that makes it easier for them to decide if the product is right for them.
- Researched competing e-commerce websites and substitutes for ways to differentiate the Client from the competition.
- Incorporated design elements that would benefit the user, like sorting reviews by rating and representing product options with thumbnail images.
- Synthesized findings into mock-up of the page design in Photoshop and developed for the web using HTML and CSS.
- Created small user interactions, like "Read More" buttons to expand product descriptions and reviews, using jQuery.
- Assisted back-end developers in applying PHP to create scenario dependent messaging and fill in table-backed data into a single file template.
Show the user all their options
In the intial page design every product option was listed in a dropdown. For some products this is necessary, like dog collars that could have over 20 options to select from. But in most cases options are few enough that it was worth it to show the options outside of a hidden list. Doing this means users can view all their options at a glance. Additionally, we hypothesized certain options would benefit greatly from using image thumbnails instead of a label, like colors and materials.
Options for a t-shirt, showing all available sizes and colors.
Organize and reveal the customer reviews
In the original layout product reviews were under a secondary tab, reducing the odds they'd be viewed by a user. The reviews were not sorted by star rating and were listed in a single two-up layout. In the redesign we grouped the ratings by star and showed the number of reviews for that rating in the rating navigation. This way users can easily choose which reviews they want to read and see at glance that the number of 5 and 4-star reviews out weight the number of negative ones (ideally).
In additon, we implemented a system to show users that reviews were written by a person who had actually purchased the product. “Verified” reviews lends credibility to their content.
Reviews organized by rating, with dropdown version of navigation for mobile and tablet screens.
Room for Improvement
Looking back on this project I have identified a few areas worth revisiting. A few are notes on our team's own methodologies and another on alternative marketing strategies.
Firstly, this project was designed and launched without user testing. We were confident in our hypotheses that key changes would make the page easier to use, but user tests are critical for making sure our assumptions are accurate. Additionally, aspects of our solutions might have been improved with user feedback. For instance, while the option thumbnail images are great for most users, there are situations where the material or color label might still be needed. We included alt tags for our users who use screen readers or utilize hover events, but we've since had incidents where a user knew the name of the option they needed but couldn't tell which option to choose (perhaps it was a shade of blue and two blues looked too much alike). Without user testing, we might still be missing opportunties to improve the efficacy of the product page layout.
Secondly, we did not iterate gradually to see how well specific changes impacted conversion. While we cannot tell which parts contributed to the overall site conversion rate, the net effect was a sitewide converstion increase of 33%. Going forward we should take more opportunties to iterate and A/B test small parts at a time, especially in times when internal debates stifle progress.
Like many e-commerce sites, the client's relies heavily on user product reviews for social proof. Since the client has a small market share, often gaining enough reviews are hard to come by. Many products have no reviews, thus leaving the product with zero social proof. Given the client's size and proximity to their users (a family-owned business where customers often email the CEO and his partner directly for dog training advice), it would serve them to use these connections to gain more intimate testimonials. Putting faces and real names to statements is often proven to be more effective than large review databases with faceless and anonymous users.
Full article estimated reading time: 5 minutes