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
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
To Improve the onboarding UX by implementing clear messaging and feedback at each stage.
To communicate to merchants the need to make e-invoicing decisions on a case-by-case basis.
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