Sitejabber
Helping consumers qualify online businesses faster
RESPONSIVE WEB • REVIEWS PAGE DESIGN
OVERVIEW
Online shopping is a vetting process.
Sitejabber is a reviews platform that helps consumers find trustworthy online businesses. With over 2.5 million monthly visitors, the majority of Sitejabber’s traffic arrive on the site to research women’s clothing businesses. The wealth of information on a business’ reviews page can be both useful and detracting, so it is important to rethink this page’s experience to improve users’ accessibility to the information needed to determine whether a business is worth purchasing from or not.
CHALLENGE
How might we reprioritize reviews pages and reduce cognitive overload to help consumers get the information needed to make a buying decision faster?
ROLE
Product designer in a team of six. I focused on the reviews page’s information architecture and improving access to key information about a business.
SCOPE
User and market research, strategy, UX design, information architecture, visual design, prototyping, testing
PROJECT GOALS
Create a credible, useful and engaging reviews page.
Cater to users researching businesses they are interested to buy from.
New reviews page that converts in account sign ups and boosts engagement.
RESEARCH
Reviews help people make the right decisions
Although Sitejabber has been around for a decade, with over 100k businesses reviewed by its community, not much time has been devoted to user research. So before diving into the redesign process, we conducted thorough research in the following ways:
Researched 4 direct competitors and 12 comparative companies in the market to identify common patterns.
Collected survey responses from 81 active users to look at how they use a business reviews page on Sitejabber.
Conducted phone interviews with 9 Sitejabber users to empathize and discover their site habits.
Tested usability of reviews page for JJsHouse with 12 shoppers of women’s clothing to find pain points.
From research, we identified users’ key needs and areas that caused confusion. With this new knowledge in hand, we ideated by sketching and wireframing to come up with variations of the reviews page that would allow users to decrease time spent on research, and having to through reviews before being able to make an informed decision to purchase from a company or not.
KEY PROBLEMS
Users have to sift through polarizing reviews to find trustworthy content.
There's a lack of summarized info for users that only want a quick overview.
Reviews page has a lot of info, but it doesn't inspire much user engagement.
JOB STORIES
You have to research to buy
Initially, Sitejabber wanted the redesign to encourage more users to write reviews. However, the project goal shifted to have the redesign benefit the majority user instead, those visit Sitejabber to research on businesses. This is because users who write reviews make up only 2% of all users. Based on our user interviews and research, we zeroed in on two key jobs to be done for this persona:
IDEATE
Give access to the most descriptive info
The following are findings we found from synthesizing our research via affinity mapping and 2x2 prioritization. Below elements are both important to users and Sitejabber:
1 star reviews displayed at the top of page discouraged people from a business
Users liked reading through individual reviews to make their own assessment of a business.
Important sorting/filters are needed to help users access info more easily.
Users depend on real photos.
A summary is good for quick scannability.
The areas circled in black to the right are areas we thought were solvable in our scope.
UI SKETCHING
Highlighted in my sketches below are the key features to explore in our designs based on discoveries from 2x2 prioritization.
BUILD
Working through feedback and constraints
We went through 3 major iterations of designs in high fidelity as a result of following client feedback:
1. New design was too similar to existing
Client thought first wireframes looked outdated design as a result. This taught me that it’s crucial to get a clear gauge from client in how different a redesign can be when working on one section of an existing product.
2. Too many options to send users away
Too high of emphasis on getting users to write a review was in the second iteration. It also allowed users to ask questions before being able to look through info on the page, which might be an irritant to business owners.
3. Less is more, but include the essentials
One last iteration was made after this to fine-tune the page’s visual cohesiveness. I focused on keeping the top of the reviews page minimal, while adding key elements back into the design (breadcrumbs, business URL, etc.)
OUTCOMES
Clarity through organization
After working through rounds of feedback, our final designs addressed the following objectives that surfaced from the problems and pain points that were uncovered:
Solution 1
Photos and new filters that help users prioritize relevant reviews and trustworthy content.
Objective: How might we strengthen users’ belief that information on a business reviews page on Sitejabber is trustworthy? Especially when majority of page traffic comes from search engines and are new users?
Features: Photos first, a helpful sort function to de-prioritize polarizing reviews that lack descriptive details and are not helpful, adding keyword search smart filters.
Solution 2
Easy navigation to key information for users that only want a quick summary.
Objective: How might we prioritize the reviews page information so users don’t have to spend as much time looking for the information they need?
Features: Tab navigation, dedicated tab for business info, giving critical information more real estate, creating overview visuals and summaries.
Solution 3
Helpful iconography highlights ways to interact and encourages user engagement.
Objective: How might we rework the UI to allow users the awareness of ways to engage with other reviewers and parts of the reviews page?
Features: More room for user photos, adding iconography to interactive functions for better click-ability, giving access to add a review on sticky navigation.
VALIDATE
One reviews page, multiple ways to view info as you see fit
We prototyped the mobile version of our design and went back out to test the new design with an additional 14 shoppers of women’s clothing for validation.
Users were able to quickly find info on a business, easily access available photos, and able to sort reviews by most helpful or filter by keywords, instead of seeing latest polarizing and vague reviews.
One thing we continued to iterate on was to refine the use of icons on its own or with copy in the reviews card in order to decrease confusion, and welcome engagement. The interactivity of each review is data that helps make our newly suggested sort option more useful.
REFLECTION
Rapid design cycles and iterations are effective in lo-fi
There's a lot of information and iterations. We worked through refining the look and feel, making it more minimal, and reprioritizing the order of information, to make key info more accessible to the researcher. Since there is so much information, it is important to work more in lo-fi. In this experience, it became harder to nail down the integral structure of the page when mockups were turned into high-fidelity, as elements like color became a distraction for decision making when it came to prioritizing features and information.
As part of the process of lessening the weight of the UI, we tested eliminating accompanying descriptions with the icons. However from testing, we found that it became a source of confusion. Ultimately, the learning is that when it comes to functions that are key to engagement on a reviews page, the right copy is essential to an intuitive experience.
Next time, measure the iterations
Depending on operations constraints and if there was more time, I would leverage Sitejabber’s audience and have previous iterations A/B tested to see how each design measure up. Users are accustomed to spending on average 8-9 mins on a reviews page, so it would be insightful to observe which metric or click rate is telling of an improvement in experience. And using that data to further iterate on our design, and continue to minimize the time user must spend on the page before coming to a buying decision. In addition, I’d love to talk to the same Sitejabber users we interviewed to see what they think!