SITEJABBER
Responsive Web
COMPANY
Sitejabber is a web-based platform for consumers to find trustworthy online businesses and avoid scams. Sitejabber has been described as "the Yelp for websites and online businesses”.
PROJECT GOAL
Increase quality and quantity of reviews written by improving the review writing process and in turn increase user engagement on the platform.
ROLE
User Research, Information Architecture, Interaction Design, Usability Testing, Prototyping
DURATION
1.5 months
BEFORE
Quality reviews are the lifeblood of Sitejabber, but leaving a quality review isn’t easy.
Only quality reviews can attract more attention and interaction from the users to the site. However, through user interviews and usability testings, we have found that writing a quality review is both difficult and sometimes unmotivating, as shown below.
AFTER
The least effort to capture the most valuable information.
The new design puts the goal first, which is writing a review. The interface shows everything that the users need to do at the very first glance so that they are no longer surprised by or miss hidden questions. All the ratings are integrated into one single interface to inspire users to produce insightful reviews with a holistic experience.
One screen. No scrolling. Clear expection.
In the first glance, the interface shows all that the users need to do to complete a review. There is no more scrolling and less friction.
A little reward for every piece of your input.
A progress/reward bar on the top of the interface to both indicate the review progress and reward for giving input, which encourages users to move forward.
Inspiration to generate unique input.
Having other’s reviews next to you for reference to overcome the fear of writing out of a blank piece of paper. If you want your unique voice to be heard, you can also hide others’ reviews to keep your authenticity!
Can’t get the Edit button right? No button then.
After struggling with the Edit button, you now can simply hover and change to the right business users want to review.
Reliable reviews, secure business.
Simply hovering over to add Order ID to add credibility to reviews, which ensure Sitejabber as a trustworthy platform for reviewing online businesses.
USER PERSONA
Bella: The frequent online shopper
Age: 28
Residence: San Francisco, CA
Education: B.A.
Occupation: Executive Assistant
Behaviors:
-- Likes to shop online, especially for clothing and cosmetics.
-- Leaves reviews most of the times after trying a product or service
-- Likes trying new online businesses or products
-- Researches online and reads reviews before trying new products
-- Leaves more reviews if there is reward after leaving a review
Needs and Goals:
-- Motivated to leave reviews if there is rewards
-- Likes to see more quality reviews to help her make decisions
-- Wants to know where do her research before making purchases
RESEARCH & SYNTHESIS
What is in the way of producing quality reviews?
Takeaway 1: Important questions are being hidden.
Survey & User Interviews
There are important questions that are placed poorly on the review form and were listed as optional. 5/5 users didn’t notice them, but after we lead them to the questions, they have all considered the questions as important.
Takeaway 2: Writing a review is no easy task, do not give more work to the users.
User interviews
A lot of unnecessary information and graphics were placed on the interface which caused a lot of distractions. 4/5 users were questioning unrelated information on the review page.
Takeaway 3: Users need intensive for leaving a quality review on your site.
Competitive Research
Most users expressed that they would not leave a review unless they had a bad experience or have some kinds of rewards (points, status, etc.).
CONSTRAINTS
Star rating system is widely adopted. However, according to our research, users are confused with the stars rating system as it contains unclear meanings to different users . However, the reviews on Sitejabber are all processed in the star rating system in the backend of Sitejabber, therefore we have to keep the star rating and make the best of it.
Blue and orange are Sitejabber’s brand colors. Even though colors can be very subjective, most of our users felt the color combination gives out a rather sporty feeling which a bit off-brand of what Sitejabber is. Considering Sitejabber has not yet established a strong brand awareness, such as Yelp and Tripadviser, the color combination can be misleading. However, our timeline for a color-rebranding is not allowed, therefore we will have to work around their current colors.
ITERATIONS
ITERATION 1
Hick’s law: The time it takes to make a decision increases with the number and complexity of choices.
The main change we implemented in our first iteration is toggle buttons that contains short answers. We were hoping with easy clicks, it will reduce user’s work load. However, the toggle buttons created a significant amount of friction in completing the review writing resulted from too much decision-making effort from the users.
ITERATION 2
The designed review workflow is competing with the goal of writing a review.
After 5 usability tests of out first iteration, in the second iteration we aim to diverge the answers/ toggle buttons we have in each question according to the feedback we got from iteration 1. This results in a much longer review form, even though users found it easier to choose in each question, they found form more similar to a survey, which, in users eyes, is a lot less popular than reviews.
FINAL ITERATION
Finding that sweet spot between too much and too little.
After two rounds of usability tests and iterations, I have come to realize that even though the toggle buttons provide answers to users, they also create more friction than convenience. The way to find the sweet spot is to go back to the project goal and prioritize what is the most important———writing a review.
STYLE SHEET (Partial)
New style sheet for scalable design.
Sitejabber did not have any design guideline when we took over the project. We have put together a design style sheet to help us collaborate and scale our design. We believe this style sheet will help future designs for Sitejabber.
FINAL RESPONSIVE DESIGN
RESULTS
“Oh, that was so much easier!”
At the last round of testing, the participants were to choose a preferred version out of the designs we had and the original website. All 5 users could complete the review process without confusion and chose the final design as their preferred version.
We are currently implementing the new design to evaluate success of business metrics below. We are looking forward to seeing the outcome of this project.
Metrics of success
Increase of quality reviews
LEARNING & NEXT STEPS
Involve the backend engineers in early stage.
When deciding on the form of the rating system, we wanted to decrease the number of star ratings in the review process. However, after the weekly call with the client, we were informed that the rating system is already setup in the backend, changing it now will result in losing all the data collected before.
Bias is challenging to test.
Some people pointed out that displaying the recent reviews may bias the review writers, however, users gave us positive feedback on having the recent reviews shown when they brainstorm for writing a review. We suggested, as a next step, Sitejabber can start a test to determine the actual impact of showing the recent reviews.
Find user’s motivation.
What this project does is reduce the friction of generating quality reviews. However, this design could do little to motivate the users to come back to the platform and leave reviews again. Sitejabber is considering to introduce a reward program to motivate more users to leave reviews.
Spesati
Mobile Web | UX Design | Information Architecture | User Testing | Prototyping
ShareTheMeal
UX Design | Information Architecture | Interaction Design | Prototyping
Little Feminist
UX Design | Information Architecture | UI Design | Prototyping