Charting Customer Paths: Crafting Seamless Journeys for A/B testing

What unfolds once users land on their website? It’s more than just tracking analytics; it’s about diving into the intricate world of customer path mapping, particularly for A/B testing.

Overview

A customer journey map is a visualization of how a customer engages with your brand, product or an e-commerce website. It tells the story of every engagement — from the first time customers visit your website to purchasing from you.

Feature Vision: The goal is to create user paths by identifying key touchpoints on the pages where recommendations are displayed (such as product pages, category pages, or the homepage) and understand the common paths where the user interacts with these recommendations. These paths go through A/B testing to find out which of the variants (or user paths) work better for the users.

The aim is to establish individualized customer profiles, enabling highly detailed and personalized 1:1 experiences on a larger scale.

Tools Used: Figma, FigJam

Design Process

Problem Statement

To ensure user engagement goes beyond monitoring the initial onboarding process, it is equally crucial to provide support for returning users who have navigated through updated product features.

While kicking off my project, some of the questions I had were:

• What is the business goal? What are we trying to solve?
• What are the metrics that can be tracked to look at the success of this feature?
• How does the team pick the right recommendations to add in the path?
• Who would build paths after the recommendations are live on the website?
• How do we stand out in the market to make an impact?

🎯Diving deep into the problem statement/ research

I researched about customer journeys and after long conversations with my product managers, I gained valuable insights into the significance of incorporating customer journeys into every SaaS product.

Business Goal

The goal is to create well-mapped customer paths for SaaS products contributing to the prolonged retention of users within the product.

Metrics

Some of the metrics that can be tracked to look at the success of the feature:

1. Click through rate (CTR)
2. Time spent on website
3. Conversion rates for different versions (A/B testing)
4. Bounce rate for each variant (A/B testing)
5. Revenue generated from each variant (A/B testing)
6. Customer satisfaction scores related to personalized experiences
7. Repeat customer rates after personalized interactions

User Persona

User Persona

👀How to stand out

Our market distinction lies in enhancing recommendations tailored to customer preferences. Leveraging these recommendations empowers us to offer impactful customer paths.

Ideation

I used MoSCoW framework to prioritize the sub-features in this feature:

✨Key Features

1. Path mapping: to select user path(s) based on previous user experience in the website/app
2. Suggested paths: to show suggested paths based on previous user experiences

Customer User Persona

I’ve developed a customer user persona (end-user) outlining desired personalisations based on customer preferences. This insight guides our approach to creating tailored and meaningful user experiences.

End User Persona

Information Architecture

Crafting the Information Architecture for the feature played a crucial role in defining the overall structure and describing the precise content assigned to each section.

Information Architecture on how to create user journeys

Wireframes

As I immersed myself in the wireframing/sketching process, the feature started to materialize. Wireframing phase played a major role for me to visualize the user experience on how a user navigates smoothly from one screen to another.

Customer Path Flow

Creation and Suggestion of paths

Visual Design

Creating a Brand New Path

A path is created by linking pages where users can potentially preview specific recommendations.

1. Page Navigation: I decided to have a left panel just to explore the page types that are available in the user’s website for seamless linking of experiences. It can start from homepage, product listing page, description page till cart and checkout and.
2. Recommendations Preview: For every page type, there can be multiple recommendations. A recommendation can be a widget, carousel or a banner. Showing experiences along with a preview will help user to chose the right recommendations quickly.

Canvas to Creation

User path created and a quick preview of metrics

Selecting from Suggested Path

Suggestion of paths can be done by showing the most frequent route taken by users in the past experiences.

1. Previous recommendation preview history: A user might navigate through multiple pages on a website, exploring recommendations aligned with their preferences. Through a preview of these recommendations, a suggested path has already been outlined for the user.
2. Metrics Preview: Having a designated tab for metrics with each suggested path allows us to grasp the impact of these recommended journeys on conversion rates.

Suggested User Paths and Metrics

Next Steps

This capability can be expanded to simultaneously create multiple paths at the same time. Additionally, we can extend its capability to configure A/B tests, allowing users to analyze the solution’s performance data and determine which recommendation is working effectively.

My Learnings

🧐SaaS is complex

Crafting SaaS products are complex. Navigations become difficult based on complexity. But breaking down the information into simpler terms helps us craft beautiful products. That’s the power of design :)

✏️UX Copy

Crafting product copies involves thorough exploration and thoughtful consideration. I’ve discovered that enhancing the quality of the copy significantly boosts conversion rates. It holds a level of importance akin to visual design. Engaging with the target audience or talking to the product managers is a crucial aspect that I’ve come to appreciate during the design process.