Redesigning Reviews

Overview

Imagine you own a bustling salon. As a business owner, quality customer service is a top priority. One of the best measures of your service is your online reputation via client reviews. To help service-based businesses manage their online reviews, Demandforce, a marketing and reputation managment SaaS, offers a reviews feature. Within this feature, a user's main tasks are to read and reply to client reviews. On occasion, a user may dispute offending reviews.

After several years of neglect, the reviews feature needed some UX tender love and care.

My Role

UX lead

Strategy

Business Goal

Improve customer experience

Value Proposition

Online reputation management is a differentiator for our product. Simple review management and reporting is a staple in our overall strategy. Therefore any improvements to our existing experience helps us stay competitive.

Success Measurement

happiness

As this is an existing feature, we will measure perceived ease of use after the redesign.

Research I

Original Design

Quantitative Findings

Using Google Analytics and Mixpanel, my product manager found these metrics and behaviors:

query-type dropdown

pagination

sorting

Analysis

Observations

From the aforementioned data, it's clear that users are not customizing the default view of the reviews page very often. That includes venturing past the first few pages of reviews. The low usage of sorting is interesting. Are users not filtering because it's not discoverable or do they not find it useful?

read vs unread vs bold

The reviews page has a section for unread and read reviews. However, both types of reviews show up in both sections. In order for a review to be truly "read", it needs to be explicitly marked as read by the user. This is further exacerbated by the misuse of bolding. All new, unread reviews are bolded until they have been "read" or "managed" by clicking on the "manage" link.

the meaning of pinned

Reviews can be featured on the user's business profile page. This is the same behavior seen in blogs and forums. Do users understand that pinning a review on this page does not pin the review on their profile page?

Personas

The Demandforce portal has 3 main types of users and 1 rare type. You can view their personas in a new window by clicking here. The 2 we're focusing on for this project are:

Chris

The business owner looking to provide great customer service and monitor the health of their business.

Pat

The office manager responsible for managing reviews.

User Goals

Design I

Workflow

Working with my product manager, we quickly map out what parts of the portal need redesigning and designate each piece's purpose and functionality.

Sketches

One requirement from my product manager was to create a mobile design for this page. This will be the first mobile-optimized page in the portal.
Here are very rough desktop layouts showing where filtering could reside.
Above are notes and more rough ideas for how review information could be displayed.

Wireframe Prototype I

After several iterations, internal reviews within the product team, and some guerilla testing with customer service representatives, I finalize a few wireframe prototypes to share with real users. In one design, I wanted to test a more discoverable filtering system. I also simplified the page by removing the unread and read sections. Now, a bolded review is the only indicator that it is unread.

Click here to view the Axure prototype in a new window.

Research II

Our amazing researcher finds 5 willing users and sets up interviews within a week. Armed with a laptop, post-its, and recording devices, we set set out to answer questions and get feedback from the 5 sets of users seen below.

Our interviewees: Nissi Motors, Shearbliss Salon, diPietro Todd, Patrick Evan Salon, Burk Family Denistry

Qualitative Findings

answers from the original design

feedback from the prototype

key insights

Design II

With a more complete story of how users interact with reviews, I had plenty of rationale for new design changes. The biggest changes include: removing all but the necessary filtering, using familiar terminology ("flagged" instead of "pinned"), and providing as much appointment related information in the review details as possible. Unfortunately, the development team didn't have enough time to build review sharing functionality or a preview pane, so that was shelved for the next iteration of this project.

Wireframe Prototype II

View Axure prototype in a new window.

Production

After the team felt that our prototype was ready for development, I used Sketch to create the visual skin for the final design. I then uploaded the files to Zeplin for our engineers to consume.

Visual Mocks

View Zeplin mocks in a new window.

Next Steps

Once the new designs go live, we'll perform usability testing with beta users and follow up with our initial interviewees to see if their overall satisfaction with the new design has improved.