IBPicture

Write a Review Page Redesign

I was responsible for the entire product life-cycle and user research on the apartmentratings.com "Write a Review Page" redesign. The role consisted of gathering product requirements, writing product requirements document and tickets, conducting usability test, launching A/B test and creating high-fidelity mockups.

View Product Requirements Document

Tools

Sketch
JIRA
Confluence
Adobe Target
Usertesting.com
Marvelapp.com

Methods

Competitive & Comparative Analysis
Usability Testing
A/B Testing

Overview

Background

Reviews are the bread and butter of Apartmentratings. Renter can leave reviews about their experience for the apartment. Large quantities of renter's reviews are what make us unique from our competitors.

Goal

  • The Goal of this project is to redesign and transition the Write a Review page to the new React code
  • The redesign should focus on improving the user experience of the page
  • One of the main KPIs is to increase completion rate on the page
oldWriteReviewPage

(Old Write a Review Page)

Research

CompetitiveAnalysis

How does other websites format their form page?

  • Keep the survey short, if this is not possible limit on number of questions display at a time
  • Ask all the required questions first and leave the optional question at the end
  • A mixture of closed-ended questions and free response section to allow users to express their opinions

-

Existing research on One-page vs. Multi-step

During the competitive research, we have noticed some websites are using the one-page approach, while others are using the multi-step format. This got me curious, what are the differences and which one is better for the Apartmentratings Write a Review page. After some exploration, we came across a couple of research One-page vs. Multi-step Checkout: Which to Use When? and Multi-step Form vs. Single-step Form: Which is the Best? to gather our pros and cons.

One-page Multi-step
  • Pros:
    • Ability to complete the form faster (fewer clicks)
    • Can easily edit any changes (everything on one page)
    • Best use for 3-5 form fields(conversion rate falls off with 6+ fields)
  • Cons:
    • Overwhelm the users with excess fields
    • Harder to track where the user stops
  • Pros:
    • Clean and simple layout (group information)
    • Better user experience (few fields to fill in each step)
    • Ability to easily track funnel data in analytics (able to add google analytics on each step)
  • Cons:
    • More clicks for the user
    • Harder to make edit details (have to go back to previous step)

-

Usability Testing

To find out exactly what our clients prefer between one-page vs. multi-step, we performed 15 user testings on usertesting.com. We first ask the participants to complete both the write a review process, then follow up with a series of questions.

  • Test Type
    • Tests was performed on mobile layout due to 65%+ of our current traffic coming from the mobile
    • Current website on mobile layout(one-page layout)
    • High-fidelity mockup on Marvelapp.com (multi-step layout)
  • Test Objectives
    • Can the users complete the entire task without any trouble
    • Do users understand what each question is asking
    • Are there enough questions for users to express their opinions
    • Overall, do users prefer the one-page process or the multi-step process and why
Result: 8 people prefer the multi-step form and 7 people prefer the one page form

Next Step

A/B Testing

For our hypothesis, we believed the multi-step would be a better layout for the Write a Review page. But according to our usability testing, the result it close to 50/50.

Since qualitative research couldn't provide enough information to prove our hypothesis, we decided to conduct an A/B test. By directing 50% of our users to the multi-step layout and the other 50% to the current one page layout.

After a month and with close to 10,000 event actions, we concluded the multi-step layout is the winner with...

  • 20% increase in conversion rate for review submittion
  • 35% decrease in overall bounce rate
  • 40% decrease in potential error rate

Multi-step Design

Below are the high-fidelity mockups I created for the handoffs to the developers. This design is also live on Apartmentsratings, try to leave a review on any apartment to view the entire process.

Marvel Prototype Link

Conclusion

Our hypothesis was, by switching to Multi-step page format, it will give the user a better user experience which leads to a higher conversion rate. After completing the competitive analysis and user testing, the data did not shown enough distinction between the two formats, therefore we decided to conduct an A/B test. The data we received from the A/B testing clearly shows the multi-steps form out performed the single-step form, because of that, we could push the redesign into production with full confident.