UX Improvements on Get Started Page

[ianlin]

Context

Goal

To better explain the benefits and value of the Google Listings & Ads integration to the merchants, in order to reduce the current drop-off rate of ~31%.

Overview

1. Highlight more of the benefits of this extension.
   • The current welcome page is underselling the potential value of this extension.
2. Communicate and educate the user about Smart Shopping Campaigns.
   • By failing to mention “Smart Shopping Campaigns” in enough depth at the beginning, users doubt the total value of the extension. This means their expectations are also misled and they miss out on an opportunity to learn about “Smart Shopping Campaigns” (something few knew about)
3. Provide an estimate of how long setup will take.
   • Eg. 15 minutes.
4. Include a place for our marketing video.
   • You can watch the video here
5. Include a place for case studies / customer quotes.

From the new design, there are several new sections in the get started page:

1. Get started CTA with video.
2. Benefits.
3. Features.
4. Case studies.
5. Get started CTA again.
6. FAQ

The current state of the system

In our current design, the in-product Get Started page is pretty bare, communicating just a little about the integration. Based on the funnel analysis in Sept 2021, the drop-off here is pretty steep; 31% who view this screen do not proceed with their setup.

There are only three sections in the current get started page:

1. Get started CTA.
2. Features.
3. FAQ.

Technical

💡 We will create a shared branch feature/1392-ux-improvements-on-get-started-page. All relevant developments should be branched from it and merged back to it. And open a PR to merge the shared branch to develop once the overall feature gets ready to release.
💡 This project is mainly focusing on the UI changes, no backend modification required.

Currently there are two cards, get-started-card and features-card, and one FAQ section. We need to update it to five cards and one FAQ section according to the new design.

The five cards and the FAQ in the code structure would be:

• js/src/get-started-page/get-started-with-video-card
• js/src/get-started-page/benefits-card
• js/src/get-started-page/features-card
• js/src/get-started-page/case-studies-card
• js/src/get-started-page/get-started-card
• js/src/get-started-page/faqs.js

Links

Project

pcTzPl-i7-p2

Figma

Figma

Event tracking

TBA.

[j111q]

FYI @dominiquevias ☝️ (If there are any design questions, please ping Nikki!)