Background
Platform Overview
For subscription basis services, the process to support the billing is a huge challenge! Exisited is the product to automate recurring payment and manage the billing process seamlessly. Exisited offers powerful features to manage complex recurring billing, subscription based billing, Invoicing and automatic payment with easy and intuitive user experience. Business owners have that flexibility to customize the product as per the business needs and drive the billing process as Exisited designed for any business, any size!
Our Users
The main users of this product are business owners who are providing subscription based service. Who need a solution for customers who pay on invoice, easy access to that invoice anywhere/anytime via their portal and simple one-click payments using their securely stored payment details. Different business owners who want to have configureable customer information to capture key customer specific data. Also, who need scalable platform to support the payments & billings effortlessly.
The Problem
The previous version of the platform had very basic features to manage subscription basis billing, meaning customers paid a certain amount on a recurring basis (mostly monthly) for only web related services and solutions. Also, the process to support the billing (invoice and receipt of payment) was not a happy experience for the users.
Product & UX Goals
To build a platform with powerful features to manage complex recurring billing and automatic payment with easy and intuitive user experience. Therefore our efforts were to:
- Offer Rich Functionality to support the management of customers and their related recurring products with effective and flexible self-service options for the customers.
- Integrate Key Accounting Options to integrate into key Accounting, CRM & Ticket Management System (especially local Australian Accounting products like MYOB & Xero).
- Create an Easy & Intutive Self-Serve Platform & understand the psychology of business owners to create a positive, explanatory and trustworthy user experience which is aligned with Usability Heuristics.
- Extensive Visualization of Data & Reporting to make sure a great support for all types of Billing, Invoice, Payment, & Reporting.
Team & Role
I led the design team of 3 designers and 1 Front End Developer and coordinated all facets of design including defining UX Fundamentals, Mapping the Larger Experience, Developing a Scaleable Design System and Continue to design out product features.
Design
How We Started
We split our design works in 2 parts. One is the ‘Defining UX Fundamentals’ & another one is ‘Design Sprints‘. We spent the first 2 months to define UX Fundamentals and then we moved to UI/UX board on chasing sprint-based designs.
Defining UX Fundamentals
When I came on, I was felt fortunate to be a part of the awesome product team. They had all required core business requirements written on confluence. But no core user flow had been done. I started with creating a few personas based on existing research done by product team earlier. Then moved forward to the next steps as mentioned below.
Stakeholder interview
These were just like a normal conversation where we wanted to know some particular vision, mission & targets from individual stakeholders. We interviewed the CEO, PO, & PM to know more about the business aspects so that we can plan for the product keeping some future objectives in mind as well.
1. Research and Analysis
In stakeholder interview sessions, we got the clear ideas on focus group, how they are planning on the successful build of the product in long run, and the product goals.
Analysis of Integration Strategy
One of the core business goals of Exisited was to offer useful integration options to integrate into key Accounting, CRM & Ticket Management system. That’s why we studied some of the Australian and world-recognized accounting products to understand the scope and decide on our strategy.
User Research
When we started with user research, we found that we needed to set the target user groups to know their pain points. We talked with 10 customer support lead from different organization to learn about how small business owners finds the difficulties about managing their customers as well as managing the inventory. How they find it difficult to manage all recurring payments.
Key Findings after Q/A
2. Design Decisions
From the usability sessions with business owners and product support leads, we extracted some valuable human insights. We made some crucial decisions based on those insights. We had to scale down a big list of features to a minimum number of group items by maintaining Visual Hierarchy where we kept most used elements accessible. And we decided about the objects to be designed as follows:
- Transaction focused Dashboard with realtime notification
- Ability to perform actions on multiple items from the same window
- Advanced search and filtering facility
- Accessible option to create objects on the fly
- Document builder to allow user to create invoice, quoutation etc
- Categorized configuration panel with settings groups
- Simplified billing preference management
- Dedicated panel for integration to offer user a simple and linear expereince
- Ability to generate and download extensive reports
3. Mapping Larger Experience
Initially, we mapped the core objects and features to see the bird’s-eye view of the application flow. This was the core mapping and we went for individual featured based mapping with design pieces. This helped us to visualize all of the major flows & work functions, finding critical stages of the application.
4. Cohesive Design System
To start putting our hands on the design works we had to build the design system so that all designers can use pieces of stuff from the central library. This is important to work with multiple designers. That gives the scope to maintain consistency and keep using the same components saves the coding mismatch as well. Most importantly it makes user habitual with the similar kind of actions and they can map their empathy with the application very quickly. We went for 2 separate libraries. One for wireframing and another one to define actual design elements.
5. Data Visualization
We did some extensive analysis on the chart libraries. We experimented our sample data set with Google Chart, Chart.js, Echarts, and verified the scope of matching with our expected visual data to see how we can fit our data set in the chart. We worked closely with the dev team to see the customization scope and visual representation. Then we decided to go with Chart.js as it is easy and good looking, more importantly, it satisfies our data matrics.
Design Sprint
We followed Google Ventures Sprint practices for every epic/story based design pieces. Here are the steps we chase to complete a design task assigned by the Product Team. Here I explained the full process with a design task where you can see how we apply the GV practices in our work.
1. Map the User Flow
In this process, we defined the user flow and mapped the activities to complete all the required operations in a flow. With that, we can find out the happy path and unhappy path so that we can cover all possible scenarios.
2. Sketch
Then, we extracted ideas to solve the problem. At this step, we did some Low-Fidelity wireframes to draw the solutions.
3. Decide
In the product refinement, the proposed solutions are being discussed and everyone involved shares their thoughts and put comments. And then decide on the concept to proceed with.
4. Prototype
In this step, we go for Hi-Fidelity design with all details and scenarios and then we connect those screens with actionable interactions.
Test
Then we share the prototype public link with the stakeholders and selected user groups for testing. We do analysis and discuss the feedback in the design review meeting and take action on them as per our discussion.
Other Notable Areas
Apart from the listed feature designs, we worked on some other advanced features that helped to establish the product ahead of other competitors. We wanted to make sure the user can drive himself to do complex customization easily.
- Document Builder: This allows user to create new Invoices, Communication Emails which can be used in Automatic Billing process. The rich template library helps the user to pick any of them and modify and use easily with fixed data or macro data.
- Form Builder: In a real scenario, product or customer fields are not enough for all organization. They might have their own set of fields or they might need a different set of fields for different products. This builder allows the user to manage fields in object create/update process.
- Integration Wizard: Integration Wizard designed for connecting platform with external application. For version 1, we went with MYOB & Zero.
- Run Wizard: From some business owners, we got that they are very much interested in the manual run of billing or payments. They want to run on weekly, bi-weekly or on some regular interval.