AutoBill - a platform to manage recurring billing
AutoBill simplifies the billing process for subscription-based services. With powerful features for managing recurring billing, subscriptions, invoicing, and automatic payments, AutoBill offers a customizable solution designed for businesses of any size.
As a UI/UX Designer, I contributed to developing a platform with a user-friendly experience, allowing business owners to efficiently handle customer management and billing, even amidst the complexity of the business operations.
What I worked on
Research and Analysis, Strategy, Visual Design, and Design Sprint
Results
Increased new customer acquisition by approximately 400% in one year
Went in partnership with market leaders
500% increased market value
Timeline
2016 - 2017
Background
Our Users
The main users of this product are subscription-based business owners seeking a solution for easy access to customer invoices and secure one-click payments. They require configurable customer information capture and a scalable platform for effortless payments and billings.
The Problem
The previous platform had limited subscription-based billing features, primarily for web services. However, the billing process and user experience were unsatisfactory.
Product & UX Goals
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 & Intuitive Platform
To 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
To make sure a great support for all types of Billing, Invoice, Payment, & Reporting.
Team & Role
I led a team of 3 designers and 1 Front End Developer, overseeing all aspects of design, including UX fundamentals, experience mapping, scalable design system development, and ongoing feature design.
Research
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.
1. Research and Analysis
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.
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 AutoBill 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 usability sessions with stakeholders, we gained valuable insights that guided our decision-making. We prioritized key features based on visual hierarchy and accessibility, streamlining the design process. The objects were determined as follows:
Transaction-focused Dashboard with real-time 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 users to create invoices, quotations etc
Categorized configuration panel with settings groups
Simplified billing preference management
Dedicated panel for integration to offer the user a simple and linear experience
Ability to generate and download extensive reports
3. Mapping Larger Experience
We started by mapping core objects and features to get an overview of the application flow. Then, we proceeded with individual feature-based mapping, breaking down the design into pieces. This allowed us to visualize major flows, work functions, and identify critical stages of the application.
Site mapping
4. Cohesive Style Guide
To streamline design work, we built a design system allowing multiple designers to access a central library. This ensures consistency, reduces coding discrepancies, and helps users become familiar with consistent actions. We used separate libraries for wireframing and defining design elements.
Preview of our style guide
5. Data Visualization
We analyzed various chart libraries, including Google Chart, Chart.js, and Echarts, to find the best fit for our data set. After experimenting and closely collaborating with the development team, we determined that Chart.js was the optimal choice. It offers ease of use, visually appealing charts, and most importantly, it meets our data metrics.
Dashboard preview
Design Sprint
We adopted Google Ventures Sprint methodologies for all design assignments, adhering to a systematic procedure outlined by the Product Team. This encompasses utilizing GV methods, as showcased in the thorough description of a design undertaking.
1. Map the User Flow
In this procedure, we established the user journey and associated the tasks to accomplish all necessary actions in a sequence. With this, we can identify both the positive and negative routes, ensuring all potential situations are covered.
Order workflow
2. Sketch
Next, we worked on concepts to address the ways to solve the issue. During this phase, we created Low-Fidelity wireframes using Balsamiq to illustrate the approaches.
Initial sketch of order screen
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.
Feedback from refinement
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.
High-fidelity prototype
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.
High-fidelity prototype
Other Notable Areas
In addition to the listed features, we developed advanced functionalities to differentiate our product and provide users with seamless customization options.
Document Builder
This feature enables users to create new Invoices and Communication Emails for the Automatic Billing process. The extensive template library allows users to choose and modify templates effortlessly, using fixed or macro data.
Form Builder
In an actual situation, standard fields for products or clients may be insufficient for certain organizations. They could require a unique collection of fields or a varied assortment for different products. This constructor enables users to oversee fields throughout the object creation and updating 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.
