E-invoicing Onboarding Flow

E-invoicing Onboarding Flow

E-invoicing Onboarding Flow

Overview

Summary

The project aimed to revamp the e-invoicing Onboarding flow to improve user experience and address specific issues in the existing designs.

Team Members

Kiran Kumar (Designer)

Anshuman Manur (UX Writer)

Divya S (Product Manager)

YEAR

Feb 2023

Duration

2 Weeks

Role

Product Design

Impact

  • The total Annual contract value (ACV) impact for this feature is $672K.


  • This feature is set to have an impact on more than 200+ Merchants with $860K revenue in the year 2024.

The Challenge

Problem 1

The existing e-invoicing setup flow encounters various issues that adversely impact user experience. These challenges have been directly sourced from customer support tickets and requests, reflecting the real concerns and needs of our user base.


  • Misassociation of Disabled Proceed Button:

    The entire e-invoice feature needs backend activation by Chargebee before becoming visible to merchants in the UI. However, when merchants see the disabled proceed button, they incorrectly assume the feature is still not activated. This misconception hinders the setup process.




  • Ambiguity in Sections and Unclear Validation Process:

    Multiple sections create confusion as merchants are uncertain about the actions required to enable the proceed button. Validate identifier is what they need to do to enable the proceed button and this isn’t clear.




  • Lack of Setup Completion Indication:

    Upon completion of setup, there's no clear indication, leaving users uncertain about the status.



Problem 2

  • Ambiguity in 'Add a Country' Button:

    Merchants aren’t sure why the ‘Add a country’ button is present.





  • Associate Country to E-invoicing Network:

    The network provider information is not shown anywhere on the e-invoicing page. For merchants to send e-invoices to their end customers it has to go through a network provider. Each country has different providers and this information is not shown in the UI.




  • E-invoicing Settings Impact on Existing Customers:

    Due to the default setting "send to all customers" the system sends invoices to existing customers without the merchant deciding. This may fail at times because e-invoicing fields are absent. Sometimes it succeeds just with the tax number. Merchants might be surprised because they don't expect invoices to be sent automatically to existing customers. The task is to tell merchants that they should choose whether to send e-invoices to each customer individually, considering their specific situation.

  • The system attempts to send e-invoices to existing customers due to the default setting "send to all customers". This behavior surprises merchants, especially when fields are absent, causing potential failures. Merchants are unaware that e-invoices may be sent to existing customers and need clear communication in deciding on e-invoicing for each customer.



Business Goals

  1. To Improve the onboarding UX by implementing clear messaging and feedback at each stage.

  2. To communicate to merchants the need to make e-invoicing decisions on a case-by-case basis.

  3. To provide merchants with the ability to show & select the network (if available) when adding a country.

Research & Insights

Product Board

The onboarding process for e-invoicing faced challenges, leading to difficulties for merchants. With approximately 18 merchants, issues arose in the user experience flow, triggering support tickets for assistance. Key problems included the misassociation of the disabled proceed button, unclear instructions for the "Validate identifier" step, confusion in multiple sections, and a lack of clear indication post-setup.


Support Tickets Analysis:

Analyzed support tickets and feedback related to e-invoicing onboarding to understand specific pain points.


Recordings:

We analyzed merchant onboarding recordings from Fullstory to see how they faced this problem.

Key Findings

1. Misassociation of Disabled Proceed Button:

Merchants mistakenly linked the disabled proceed button to an incorrect addon, impacting the onboarding process.


2. Unclear Validation Process:

The "Validate identifier" step was not clearly communicated, leading to confusion regarding its purpose and execution.


3. Confusion in Multiple Sections:

The presence of multiple sections during onboarding created uncertainty among merchants about the actions required to enable the proceed button.


4. Lack of Clear Indication Post-Setup:

Once the setup was complete, merchants lacked a clear indication, leading to potential confusion.

Customer Journery Mapping

Current onboarding flow

We mapped the current customer journey to understand the exact flow of the user experience and identify pain points and opportunities at each phase of the journey.

User Flow


We thought about the best and easiest way for users to set up the E-invoice for the first time.

New User Flow

Design Explorations

We explored various options to make it easy for users to set up the E-Invoice.


  • For the initial page first, we removed all the unwanted sections and added a warning banner to highlight what they should do on this page.

  • Then we combined both sections, as most of the time org address will be updated by the merchants and it doesn't require a separate section on this page.



Once the E-invoice was setup we added a success banner to let the users know the process was complete.



Here we tried to show the supported countries in different formats to see which works better.



One of the main problems we were trying to solve was to show the Network provider for each country. In these explorations, we tried to sort them by the providers or sort them by default country and other countries.


Final Designs



Enable E-Invoicing

We started with the first page where the users enable the E-Invoicing feature. Here we worked on the copy to make it much simpler and easier to understand for the users.


Step 1 - Validating Identifier

An identifier is usually a tax registration number, but can also be a legal identification number. This number should be unique and would have been set up by the merchant on the Tax page before itself.


Before

Multiple sections are present here, and it's confusing for merchants because they're not sure what to do to make the proceed button work.


After

In the new version, we have removed all the unwanted sections to make it clear to the user that the Validate identifier is what they need to do to enable the proceed button.



Validate Identifier Pop-up


Before

No information about the network provider used.


After

We added the name of the Network Provider here so the user knows which provider is used to validate their identifier.



Validation Success Feedback


Before

No feedback of any sort to tell if the validation was successful or not. The page was still confusing even after validation due to the no. of sections present here, people were wondering if other sections were also mandatory to do here.


After

We added a small toast message as feedback to confirm the validation.



Step 2 - Advance Configurations

We added this step explicitly to ask merchants to choose their default behavior regarding


  • the customers they'd like to send e-invoices

  • & how they want to send it







E-Invoicing Page


Before
  • Upon completion of setup, there's no clear indication, leaving users uncertain about the status.

  • Few merchants aren’t sure why the ‘Add a country’ button is present.


After
  • We added a Success banner as an indication, to let users know that the E-Invoice is successfully set up and also the next steps they can take to improve the functionality of e-invoice.

  • We added a clear copy saying they can add more countries to send e-invoices, apart from their default country.

  • We applied the proximity principle and moved the "View supported countries" closer to the add country button to make a meaningful group.





Add a New Country


Before

No network provider information is given with the 'Add Country' option on the e-invoicing page. For merchants to send e-invoices to their customers in different countries it has to go through a network provider. Each country has different providers and this information is not shown in the UI.


After

We changed the UI from a dropdown to a picker, allowing merchants to view and select the network when adding a country.




When Multiple Countries are added

One of the main problems we were trying to solve was, how to show the entire list of countries added along with their network provider names. We explored different options and decided to sort them by the provider's name.

Before

Previously, It was shown in two sections - default country and other countries, without network provider names


After

We solved the problem of displaying multiple countries by sorting the entire list based on network provider names. Now, we display all countries together, sorted by network provider.




Warning and Error States








Special Case - India



E-Invoicing Page

Given that India has distinct tax registrations for each state, we needed to display the same page differently to include state listings along with other countries.







Special Case - Multiple Providers to Choose



Validate Identifier or Add Country

During default country validation or even while adding a new country, if that country has multiple providers then the merchant can pick the provider he wants to use.


Prototype

Please use the full-screen view to have a better experience :D

Conclusion

Results & Impact

  • We onboarded 6 more merchants after upgrading our flow. The refined flow facilitated a user-friendly experience, allowing these merchants to effortlessly onboard without requiring assistance from our team.


  • The total Annual contract value (ACV) impact for this feature is $672K.


  • This feature is set to have an impact on more than 200+ Merchants with $860K revenue in the year 2024.

  • We onboarded 6 more merchants after upgrading our flow. The refined flow facilitated a user-friendly experience, allowing these merchants to effortlessly onboard without requiring assistance from our team.


  • The total Annual contract value (ACV) impact for this feature is $672K.


  • This feature is set to have an impact on more than 200+ Merchants with $860K revenue in the year 2024.

  • We onboarded 6 more merchants after upgrading our flow. The refined flow facilitated a user-friendly experience, allowing these merchants to effortlessly onboard without requiring assistance from our team.


  • The total Annual contract value (ACV) impact for this feature is $672K.


  • This feature is set to have an impact on more than 200+ Merchants with $860K revenue in the year 2024.

Say Hello!

If you've scrolled this far, I believe we'll make a great team. I'm always open to exciting opportunities, collaborations, or just a friendly chat. Let's create something great together!

Say Hello!

If you've scrolled this far, I believe we'll make a great team. I'm always open to exciting opportunities, collaborations, or just a friendly chat. Let's create something great together!

Say Hello!

If you've scrolled this far, I believe we'll make a great team. I'm always open to exciting opportunities, collaborations, or just a friendly chat. Let's create something great together!

Open to Work

Currently living in GDL, Mexico.

Time is

10:18 PM

,

and I've logged off. My laptop and I are taking some rest now.

100% Design

Made with

in Framer

Open to Work

Currently living in GDL, Mexico.

Time is

10:18 PM

,

and I've logged off. My laptop and I are taking some rest now.

100% Design

Made with

in Framer

Open to Work

Currently living in GDL, Mexico.

Time is

10:18 PM

,

and I've logged off. My laptop and I are taking some rest now.

100% Design

Made with

in Framer