Viva Dashboard Onboarding

Viva Dashboard Onboarding

Viva Dashboard Onboarding

USER ONBOARDING

PRODUCT DESIGN

USER ONBOARDING

PRODUCT DESIGN

USER ONBOARDING

PRODUCT DESIGN

CLIENT

Viva Climate

Industry

Sustainability

CLIENT

Viva Climate

Industry

Sustainability

CLIENT

Viva Climate

INDUSTRY

Sustainability

Background

Onboarding Limbo

Onboarding Limbo

Onboarding Limbo

At the core of Viva Climate's product lineup is comprehensive data analysis. This empowers businesses in their network to monitor, analyze, and proactively reduce their carbon footprint through a user-friendly merchant dashboard. The technological advantage lies in the ability for users to observe their footprint in real-time, enabling them to pinpoint trends, anomalies, and opportunities for enhancement. This feature serves as a significant value addition, strategically aligning with sales funnels. There’s only one problem: nobody is using it.

Newly Implemented Dashboard Analytics

Newly Implemented Dashboard Analytics

The Problem

The Problem

Problem

Clashing Priorities

Due to constrained engineering resources and conflicting business demands, onboarding took a backseat in priority. Consequently, we faced subpar user onboarding experiences, contributing directly to notable drop-offs. With the introduction of a dedicated EPD (Engineering, Product, and Design) team, it became imperative to undertake a comprehensive overhaul while being mindful of the engineering team's limited bandwidth.

Previous onboarding

Insight #1

Low Completion Rates
Low Completion Rates

Users were not completing onboarding via billing stage.

Insight #2

Billing Friction
Billing Friction

If users completed the billing stage, users would not manually activate Viva (we could not do that on our end

Insight #3

Lack of Engagement
Lack of Engagement

Users had little to no engagement after onboarding — this either led to drop off or an uninstall

The Goals

The Goals

GOALS

Onboarding with Low-Code Tools

GOAL #1

Revamp User Flow
Revamp User Flow

Deliver an interactive step by step process explaining a newly streamlined flow

GOAL #2

Track Performance
Track Performance

Ability to track and A/B test performance for initial release.

The Challenges

The Challenges

Challenges

Overcoming Constraints

Challenge #1

Limited Engineering Bandwidth
Limited Engineering Bandwidth

The engineering team was overburdened and small. With conflicting timelines, and varying priorities, and overall complexity of building native onboarding, it was decided that a low-code solution would be optimal.

Challenge #2

Limited Budget
Limited Budget

Aside from time, cost came into play when considering low-code tooling. While onboarding was high on the priority, we were equally focused on gathering validiation before considering something more robust and high budget.

Challenge #3

Limited Time
Limited Time

With the quarter rounding out, onboarding was one of the last KPIs to hit for our EPD team. The goal was to get something out while we were shipping more robust analytics for the new dashboard, and smaller shopper-facing features.

Challenge #4

Limited Data
Limited Data

Obtaining tools to gauge performance was also outlined to validate assumptions about diving onboarding completion rate. This was allow Design to setup basic triggers within the toolling and gather information fast to relay to the larger team.

The Process

The Process

phase #1

Find Low-Code Solution
Find Low-Code Solution

Implement research and get a sense of various onboarding tools that meets product requirements and are within budget. Then, interview product representatives for a low-code solution.

phase #2

Revamp User Flow
Revamp User Flow

Prepare scripting and validate revamped user flow for onboarding. Align with stakeholders and team members.

phase #3

Select and Setup Tooling
Select and Setup Tooling

Set up custom triggers for further tracking and analytics within tooling. Along with some input from team members, and our front-end engineer, lead the implementation and maintenance of low-code solution.

phase #4

Feedback and Deployment
Feedback and Deployment

Present demo and gather feedback from stakeholders.

The Solution

Solution

Stream-lined Onboarding

Overview

A newly stream-lined flow, eliminating steps that were not crucial to the completion to onboarding.

  • Additional modals offering educational callouts to some of the features within the portal

  • Shipment of low-lift widget in lieu of unprecedented technical and time constraints

  • Internal onboarding of team member monitor settings and performance from low-code product Tooling.

Onboarding structure

Eliminating Friction Through Simplicity

Data Collection

One of the first events to happen after sign up was data collection, where Viva would audit the merchant's items. As a way to provide an endowed progress effect, we gave users a heads up on what's happening in the backend but also motivate to further pursue the reward system of completeing their onboarding tasks.

Explore Project Network

One of the foundations of Viva is the robust project network that fuels merchants' sustainability efforts via donations provided by both the merchant and their shoppers. We wanted to always keep that in mind with every product feature, to not only highlight its importance, but to empower the user learn more about initiatives their funding and learn more about our network of projects.

Set Up Billing Method

A common pain point stems from the confusion of how the "Billing Method" works. Since billing serves as a way to deliver donations to their respective projects, a billing method is required. However, the caveat is asserting the users that it was always free. It was also a necessary component to go live and technically finish onboarding. To do this, we made this a mandatory step but also provide more context outside to help ease the confusion of interpreting payment. f the first events to happen after sign up was data collection, where Viva would audit the merchant's items. As a way to provide an endowed progress effect, we gave users a heads up on what's happening in the backend but also motivate to further pursue the reward system of completeing their onboarding tasks.

Go Live

To effectively go live and finish onboarding, users were required to opt in by selecting a toggle switch to enable Viva's in store widgets to display in their storefront, hence kickstarting their ability to gather donations. However, we discovered a pattern from users not selecting that toggle to go live, and as a result, added this to guide them a little easier and remove this additional barrier.

Onboarding Features

Educating Through Tooltips

Project Selection — educational touch point that was often ignored and seldom mentioned.

Billing Method — the most delicate step and crucial. Clearly explaining the steps and guiding users through prompted targeted actions.

Interstitial modals that served as educational touch points.

Last step guiding users to turn on Viva and effectively completing the onboarding process

The Outcome

Outcome

Revamped Onboarding
Revamped Onboarding

We presented an MVP to internal stakeholders, and they were thrilled. We were happy, stakeholders were happy, but how did it perform?

outcome #1

Increased Onboarding Completion
Increased Onboarding Completion

Our newly implemented onboarding flow drove a +52% increase in new user onboarding and delivering immediate business impact.

outcome #2

Ability to Track Performance
Ability to Track Performance

We now had the ability to use the internal analytics from the low-code tooling to monitor performance without intervention, allowing us to iterate and improve rapidly.

Outcome #3

Increased Billing Completion
Increased Billing Completion

Upon release, billing (which was tied to onboarding completion) rose as well thus growing our merchant network. This allowed us to seek opportunities to use the tooling to promote new releases or updates.

Learnings & Takeaways

LESSON #1

Be Ready For The Unexpected
Be Ready For The Unexpected

Things don't always work out even if you seemingly have a foolproof plan with a well-crafted PRD. Things happens, so always be anticipate and document those roadblocks, but also be ready to pivot when those unprecedented deer get stuck in the headlights.

LESSON #2

Power of Communication
Power of Communication

I can’t stress this enough. I spent a lot of time researching and communicating with engineering to make sure we weren't wasting their time and their input greatly impacted our workflow.


LESSON #3

Baby Steps…
Baby Steps…

This feature was just one among several on the roadmap, tied to a larger epic involving numerous interdependent elements. Obtaining validation from the initial onboarding run was crucial. While it was essential to have a comprehensive, holistic onboarding flow, we had to recognize both technical constraints and the significance of the initial performance. To optimize time and resources and secure early validation, we initiated with small, incremental victories as a stepping stone to larger achievements.

The Problem

Problem

Clash Priorities

Due to constrained engineering resources and conflicting business demands, onboarding took a backseat in priority. Consequently, we faced subpar user onboarding experiences, contributing directly to notable drop-offs. With the introduction of a dedicated EPD (Engineering, Product, and Design) team, it became imperative to undertake a comprehensive overhaul while being mindful of the engineering team's limited bandwidth.

Insight #1

Low Completion Rates

Users were not completing onboarding via billing stage.

Insight #2

Lack of Collaboration

There was no collaboration or input from stakeholders which resulted in a weak structure. Engineering and Product did not have cohesive workflow to communicate with each other.

Insight #3

Billing Friction

If users completed the billing stage, users would not manually activate Viva (we could not do that on our end

The Goals

GOALS

Onboarding with Low-Code Tools

GOAL #1

Revamp User Flow

Deliver an interactive step by step process explaining a newly streamlined flow

GOAL #2

Track Performance

Ability to track and A/B test performance for initial release.

The Challenges

Challenges

Overcoming Constraints

Challenge #1

Limited Engineering Bandwidth

The engineering team was overburdened and small. With conflicting timelines, and varying priorities, and overall complexity of building native onboarding, it was decided that a low-code solution would be optimal.

Challenge #2

Limited Budget

Aside from time, cost came into play when considering low-code tooling. While onboarding was high on the priority, we were equally focused on gathering validiation before considering something more robust and high budget.

Challenge #3

Limited Time

With the quarter rounding out, onboarding was one of the last KPIs to hit for our EPD team. The goal was to get something out while we were shipping more robust analytics for the new dashboard, and smaller shopper-facing features.

Challenge #3

Limited Data

Obtaining tools to gauge performance was also outlined to validate assumptions about diving onboarding completion rate. This was allow Design to setup basic triggers within the toolling and gather information fast to relay to the larger team.

The Process

PHASE #1

Find Low-Code Solution

Implement research and get a sense of various onboarding tools that meets product requirements and are within budget. Then, interview product representatives for a low-code solution.

Phase #2

Revamp User Flow

Prepare scripting and validate revamped user flow for onboarding. Align with stakeholders and team members.

Phase #3

Select and Setup Tooling

Set up custom triggers for further tracking and analytics within tooling. Along with some input from team members, and our front-end engineer, lead the implementation and maintenance of low-code solution

Phase #4

Feedback and Deployment

Present demo and gather feedback from stakeholders.

The Solution

Solution

Stream-lined Onboarding

Overview

A newly stream-lined flow, eliminating steps that were not crucial to the completion to onboarding.

  • Additional modals offering educational callouts to some of the features within the portal

  • Shipment of low-lift widget in lieu of unprecedented technical and time constraints

  • Internal onboarding of team member monitor settings and performance from low-code product Tooling.

Onboarding structure

Eliminating Friction Through Simplicity

Data Collection

One of the first events to happen after sign up was data collection, where Viva would audit the merchant's items. As a way to provide an endowed progress effect, we gave users a heads up on what's happening in the backend but also motivate to further pursue the reward system of completeing their onboarding tasks.

Explore Project Network

One of the foundations of Viva is the robust project network that fuels merchants' sustainability efforts via donations provided by both the merchant and their shoppers. We wanted to always keep that in mind with every product feature, to not only highlight its importance, but to empower the user learn more about initiatives their funding and learn more about our network of projects.

Setup Billing Method

A common pain point stems from the confusion of how the "Billing Method" works. Since billing serves as a way to deliver donations to their respective projects, a billing method is required. However, the caveat is asserting the users that it was always free. It was also a necessary component to go live and technically finish onboarding. To do this, we made this a mandatory step but also provide more context outside to help ease the confusion of interpreting payment. f the first events to happen after sign up was data collection, where Viva would audit the merchant's items. As a way to provide an endowed progress effect, we gave users a heads up on what's happening in the backend but also motivate to further pursue the reward system of completeing their onboarding tasks.

Go Live

To effectively go live and finish onboarding, users were required to opt in by selecting a toggle switch to enable Viva's in store widgets to display in their storefront, hence kickstarting their ability to gather donations. However, we discovered a pattern from users not selecting that toggle to go live, and as a result, added this to guide them a little easier and remove this additional barrier.

Onboarding Features

Educating Through Tooltips

Project Selection — educational touch point that was often ignored and seldom mentioned.

Billing Method — the most delicate step and crucial. Clearly explaining the steps and guiding users through prompted targeted actions.

Interstitial modals that served as educational touch points.

Last step guiding users to turn on Viva and effectively completing the onboarding process

The Outcome

Outcome

Revamped Onboarding

We presented an MVP to internal stakeholders, and they were thrilled. We were happy, stakeholders were happy, but how did it perform?

outcome #1

Increased Onboarding Completion

Our newly implemented onboarding flow drove a +52% increase in new user onboarding and delivering immediate business impact.

outcome #2

Ability to Track Performance


We now had the ability to use the internal analytics from the low-code tooling to monitor performance without intervention, allowing us to iterate and improve rapidly.

Outcome #3

Increased Billing Completion

Upon release, billing (which was tied to onboarding completion) rose as well thus growing our merchant network. This allowed us to seek opportunities to use the tooling to promote new releases or updates.

Learnings & Takeaways

LESSON #1

Be Ready For the Unexpected

Things don't always work out even if you seemingly have a foolproof plan with a well-crafted PRD. Things happens, so always be anticipate and document those roadblocks, but also be ready to pivot when those unprecedented deer get stuck in the headlights.

LESSON #2

Power of Communication

I can’t stress this enough. I spent a lot of time researching and communicating with engineering to make sure we weren't wasting their time and their input greatly impacted our workflow.


LESSON #3

Baby Steps…

This feature was just one among several on the roadmap, tied to a larger epic involving numerous interdependent elements. Obtaining validation from the initial onboarding run was crucial. While it was essential to have a comprehensive, holistic onboarding flow, we had to recognize both technical constraints and the significance of the initial performance. To optimize time and resources and secure early validation, we initiated with small, incremental victories as a stepping stone to larger achievements.

Previous onboarding

Procrastinating work? Check out another one! I won't tell anyone…

Can't get enough, huh?
Check out another one
  • Let’s Chat
    Let’s Chat
    Let’s Chat
    Let’s Chat