Prior to this enhancement initiative, the version of product reviews only provided a small amount of customer engagement. The volume of high-quality written reviews was low, the majority of posted reviews came from email, many customers are leaving reviews with only a star rating, and ratings are consistently high across product categories (thus making customers suspicious.)
Goals for the feature enhancement is to bring the product reviews up to retail standards while also looking for innovative ways to increase engagement and provide the highest level of value to the customer.
Specifically, we are looking to optimize the "Write a Review" flow across platforms, increase reviews with quality content, increase ratings variance, add a customer photo gallery, sentiment/filter tags, expert reviews, and surface customer fitment details into the customer profile avatar on posted reviews.
At the time of this write-up, the majority of posted product reviews are coming in from email prompts. The customer makes a purchase, then after a period of time, they receive an email to review the item. This is the standard process that most e-commerce sites take. We are aiming at making the review process easy while encouraging the customer to do more than the obvious. During the flow, we want to have the user submit a star rating, leave a review, and potentially provide a few secondary details relating to specific product aspects/features.
Ultimately, we want to create a flow that encourages review completion with quality content that helps other shoppers make informed purchase decisions. The current mobile experience receives 48% of the posted review traffic. There are a few areas of the experience that has been user tested to see where we can optimize the flow for a more engaging and efficient flow.
From the original flow, we wanted to look for easy areas of improvement that would make writing a review fun and easy. I made the star rating section of the flow more dynamic so that when you select a star rating the label becomes the star meaning. The aspect section is broken out into individual cards vs containing them into a carousel. From research, we saw that users were less likely to tap through a carousel to answer questions. They preferred seeing everything at once.
The title and description fields were swapped as part of a test. As we are trying to get users to submit more textual reviews along with star ratings, we wanted them to focus on writing a description vs getting hung up on a review title. Lastly, the image upload module in the original flow was nothing more than an "Add photos" button that was stacked above other buttons. This section felt stale. In the enhanced version we have a tagline and explanation why to add photos. If we can explain the value of adding photos maybe customers will be more willing to submit pictures with their review.
Part of the write a review flow features a module that collects size/fitment details from customers. It is purely optional for the customer to enter in details such as shirt/pants size, weight, height, age, and various other personal details. The customer can opt-in to show or hide these details from other shoppers. However, it is encouraged for users to opt-in to this experience as it will greatly help other shoppers make accurate purchases.
How does surfacing customer profile data help shoppers make accurate purchases? When you read a review that has specific references to how something fits, that review only becomes more relevant when you know how their body size matches up to your own. Something that fits me small could actually fit someone else perfectly. Profile data eliminates the ambiguity of online reviews (regarding clothing.) On the consumption end of the reviews, you can view the profile details of customers by taping on their avatar image next to their posted review.
The hint text that is shown inside the description box is context-aware based on the selected star rating. This is done to help guide the user as they are going to enter their product review. This is all in efforts of softly prompting the customer to leave a quality written review.
I worked with our content specialist to come up with witty label messages for the star ratings. We wanted to try and add a human tone to this entire write a review flow in order to try making an otherwise mundane action fun.
When the user types a review, to encourage a more meaningful description we are displaying a small message at the bottom of the description box. This message lasts only 4 seconds before fading from view.
As the user hits certain length thresholds, the context of the message and icon will change. Screen #2 shows how we can display messages to the user when they write seller-oriented reviews. This message is to encourage them to write product focused reviews vs seller reviews.
The entire filmstrip CTA is a tap target to launch the photo uploader UI. Once there is a thumbnail image present, users can tap on the thumbnail to edit or remove it. I worked with our team's content specialist to see how we can improve the tone of voice in the text shown in this module. (The previous version of this module's title just said: "upload a photo.") I wanted a way to encourage users to add photos to their review, so I came up with the module's tagline, and the content specialist created the subheading.
Adding photos to your review is easy!
Tap the camera (add photo) icon to add pictures. You can add up to 5 photos to your review. Adding pictures to reviews is incredibly helpful to other customers. Nothing helps more than seeing images that help explain how products work.
While working on the mobile versions of the write a review flow I also needed to work on several front-end UI design clean up tasks.The UI in the desktop reviews module needed a significant overhaul. As traffic to this module scales, we need to make sure we've developed an industry standard reviews component.
I created several mock-ups that highlight the direction we need to take the module into. The module now features a Pros & Cons comparison, keyword tag filters, customer image gallery, and search within the reviews section.
Each review has a mini summary of their rating. The rating summaries (bar charts) for each posted review are tied to the product aspect questions that we ask customers when they are writing a product review.
The entire module received a new visual styling using our new DS6 design language. My specific tasks were to evaluate the information architecture, refresh the voting icons, reformat the layout to maximize space, and fixed a few accessibility issues with the font color of the review author microdata. I like working on a project like this, these tend to allow you to flex your creative muscles.
In the Spring of 2018, my colleague and I got the chance to fly to our office in 🇩🇪 Berlin, Germany. The Buyer's Experience team in Germany was working on a new facet of product reviews called "Expert Reviews". This feature within the main product reviews module would surface ratings and reviews from professional sources such as blogs and manufacturers.
Since this was a new idea that needed to be designed and tested my colleague worked with our German counterparts on setting up meetings to talk with expert review vendors, the eBay German legal, and recruit a small focus group to test concepts with.
We wanted to make the best of our time at the Berlin office so we decided to host a mini-summit. The goal of the summit was to provide the German office with awareness of what the US is doing in regards to the current product reviews redesign work (and future plans.) We needed to meet with the Shopping Experience stakeholders to discuss their plans for expanding reviews coverage for DE.
This was a great opportunity for the US team to learn more about the German customers and how they interact with product reviews.
The summit kicked off with a brown bag session led by Maria Boytscheff, Brian Livingston, and myself.
The work that was done during my trip to Germany was a success. We were able to return back to the US with a solid framework to start planning for development. We were able to quickly take an idea, design a solid use case, and get user feedback from German eBay users.
User reviews are an important aspect of shopping online. In most cases, reviews can become the final deciding factor in a customer making a purchase. The current implementation of eBay's product reviews works well but still lacks some of the industry standard UI treatments.
After wrapping up the design specs for the massive "write a review" flow overhaul I started working on improvements to the reviews module. Most of the improvement concepts were centered around making the header area of the reviews module more engaging.
Areas of importance were:
In the current version shown below the site is still mostly running an old design language. When I worked through the different subfeature use cases within the module I also applied our newer design style to the page. I updated the type ramp, call to action buttons, and the layout format of the posted reviews. The version below is not bad, it just needed better engagement signals and I feel that the updated version above hits the nail on the head.