Feature Design - Invoicing in CreditBook App
Designing an invoicing feature for 4+ million users of CreditBook - a digital ledger for micro, small and medium businesses (MSMEs) in Pakistan.
Duration
2 months
December 2021 - January 2022
Responsibilities
Product Designer
UX research, UX design, Testing,
UX writing
Team
4 members
2 Researchers, 2 Product Designers
Background
Nearly 60% of all MSMEs (micro, small and medium businesses) in Pakistan work on a credit cycle with their customers, totalling a conservative $6.6 billion in credit extended to their customers. Currently, there is a $41 billion unmet financing need for MSMEs in Pakistan with 25% of MSMEs wanting to borrow formally but lacking access.
CreditBook app is a hyper-local product designed to help less digitally-savvy merchants digitize their bookkeeping by recording financial transactions online and providing a secure and convenient alternative to offline physical registers and diaries.
I joined CreditBook as a product designer in March of 2021, and since then have designed multiple new features for the app. Invoicing was one of the features that I worked on.
.png)
CreditBook landing screen
Design Process
For every feature design, we at CreditBook try to follow the same process. Some iterations and steps might be skipped depending on the timelines, however, this complete cycle was followed for Invoicing.
As a product designer, I was involved from the very first step (gathering business goals) till the last step (hand off).
Why invoicing as a feature?
We kicked off the project by conducting a stakeholder meeting and aligning everyone involved. Stakeholders involved co-founders, customer support team, engineers, design team, data team, and business development team. The aim of the meeting was to understand business goals and measure the usefulness of an invoicing feature for our user base of MSMEs with low digital literacy.
Business Goals
-
The feature is considered a value add across the supply chain and different business types
-
Local competitor apps had already introduced invoicing as a feature. To prevent churn, the feature became important
-
Data from invoices will help us build more accurate factoring products
User Demand
-
Since the month of June 2021, 50+ tickets were generated on customer support channels in which users had requested an invoicing feature within the CreditBook app
-
When conducting field research across Karachi and Lahore, invoicing/billing was cited as one of the top needs of power and regular users
Setting Research Scope
Before starting the research, it was important to align the team on what the research goals were. After multiple stakeholder meetings and team meetings, we decided to tackle the following questions during research:
-
Do users even need invoicing as a feature in the app?
-
What are the current behaviors around creating invoices in the local market? Focusing on both digital and physical solutions.
-
At what stage during a transaction is an invoice made in real life?
-
What are the current behaviors around sharing invoices?
-
What value does an invoice provide to a business owner and their customer?
-
What information is integral for an invoice?
-
Do local business owners treat invoices, bills, receipts, and proof of payments differently like in accounting terms? What do these users understand with these terms?
-
What is the local vernacular for "invoices" in the local market?
-
What value can an invoicing feature give to the user if it is added to the CreditBook app?
Some unfiltered requests from users
can you make bill book option in this App?
is Me Hum kisi Party ka Bill Bna SakTy hyn? Mean invoice???
Can I make the bill for client? How can I make the detail bill with the help of credit book? For client to see detail and cast per item
App my invoice ka option ly
How to generate invoice in it? Kya is Mai invoice generate ho saktee hai? Kia aisey koi app AAP refer karey gay Jo complete account app ho? Yani us Mai sale invoice purchase invoice cash book capital ledger
Credit book me bat kar raha hu brother mera company add hy es me to me es app me bill kes tarah banao apni items ke
Kia Aap Hamein is app mein invoice Aur stock maintenance ki facility Dy Skty Hain? Only on Android.
Quantitative Research: users hacking the use case
Existing "notes" feature being used as an invoicing hack by 62% of users
CreditBook transaction screen
Frequency of words used in notes
Coordinating with the data team
Some interesting behaviors in the CreditBook app were flagged by the data team. A lot of users were inputting numbers and items in the notes section of the app. The design team decided to further investigate this behavior in collaboration with the data team.
Key Takeaways
Our users agree to data sharing while signing up and after anonymizing sensitive data, the analysis showed that the notes feature was being used by 43% of active users. 62% of notes in our data were just numbers which on further investigation revealed that those notes were being used as an invoice hack in the CreditBook app.
Further analysis showed that users were documenting information about purchases and sales in notes while they were inputting transactions in their journey. This meant that in order to provide value by adding an invoicing feature, it would have to be linked to the existing user transaction journey along with sitting as a separate feature.
Competitor analysis: Not a simple problem to solve
For the analysis, we looked at 3 local and 2 global apps: Vyapar, Udhaar, Bookkeeper, Bill Generator, and Bookipi. In the scan, we focused on the following:
Complexity
How is invoicing connected to other features? How easy is it to navigate?
UX Writing
Is "invoice" a frequently used term? Are there any other words being used for it?
Required Fields
What are the "must-have" fields for these apps?
Key Takeaways
-
The complexity of these flows was high with limited feedback for users
-
The language was highly complex and a lot of times followed the conventional accounting terms that a common merchant would not understand
-
There was a lot of manual effort involved by the user. Since there was no automation involved, the experience was slow
-
There was some consistency around the fields required such as discount, units, total amount, and paid amount
The biggest competitor of all: Paper
Paper bills are the most widely used form of invoices that are used in Pakistan's market. Paper is not only versatile but also provides the speed that these local merchants require in their businesses.
Whatever solution we came up with had to compete against the paper. Digital bookkeeping solutions are rarely faster than paper, so we had to ideate how we can improve other aspects of digital bills so that the user would be inclined toward using digital bills, even if they had to make a compromise on the speed.
User Research
No. of Users
9 users interviewed
5 in Lahore (involved), 4 in Karachi (not involved)
Supply Chain Position
Wholesale and Retail
5 Wholesalers, 4 Retailers
Age Bracket
28 - 60
Division of research responsibilities and methods
User research was carried out by teams based in Lahore and Karachi. 2 people dedicated resources for field research in Lahore and 2 in Karachi. I was involved in the research done in Lahore. This included field interviews and usability testing.
All interactions with users were in person due to the limited digital savviness of the user group regarding online conferencing tools.
Insights and Pain Points
After conducting interviews, Lahore and Karachi teams synthesized our findings by empathy mapping and clustering to identify pain points and findings around invoicing. These insights led us to defining the Problem Statement
-
The majority of our users were generating invoices manually
-
Manual invoices had bad searchability
-
It was easier to make calculation mistakes in manual invoices
-
Users who have tried digital apps for invoices said that they required a lot of effort and were confusing
-
An invoice was important because it gave a sense of security to customers
-
The invoice had a close relationship with Inventory and a customer’s ledger
-
A lot of times invoices were tallied at the end of the day to find the total earnings of the business
-
Language is related to billing: While users were familiar and aware of both terminologies i.e. invoice and bill, our research showed that merchants would use the word ‘bill’ more frequently and intuitively.
-
Similarly, ‘bill book’ was the terminology used to describe the register where bills were stored and maintained. Bill numbers in the bill book were also used as references within the ledger
Problem Statement
Business owners need a way to document and share transactional information in order to have full visibility of their business dealings with different stakeholders (suppliers, customers, etc).
User Journey and Wireframes
%20-%20Frame%201.jpg)
Quantitative research and field research helped shape the initial user journeys that were then tested in the field. Few key features were considered while designing the first version:
-
The invoice was called “Bill” and its tab was called “Bill Book” because these were the common terminologies that we observed being used in the field
-
The option to search a bill was provided to improve the searchability that is offered in manual bill books
-
The fields were kept to a minimum to reduce the effort from the user’s side
-
Users had the option to mark bills as either “paid or “not paid” because this was a common behavior in competitor apps
-
Bills could be shared with customers over WhatsApp or could be downloaded as a pdf
-
Users could access the "bill" option during creating a transaction because that mimicked their real-world behavior. They could also create a bill separately by going to "Bill Book" option
Important notes about wireframes
-
These wireframes were created in Roman Urdu. Roman Urdu is the name used for the Urdu language written with the Latin script, also known as the Roman script
-
This decision was made because Roman Urdu is the most widely language used by CreditBook users, and also the most widely used language of communication over text by this segment of users
-
The wireframes were high-fidelity and looked very similar to the existing app because the concept of a "prototype" was not readily understood by this user group. Since the goal was to run usability testing on these screens, to maintain a level of familiarity and comfort, for our user group, these prototypes used the same design language as the existing app.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Usability Testing*
No. of Participants
9 Participants
5 in Lahore, 4 in Karachi
Responsibilities
Moderator for Lahore based participants
Method
In-person Interviews with contextual setting
*For the sake of keeping this case study concise, I have written the findings of all 3 usability sessions together.
Learning from Testing
The following insights from usability testing informed the final design:
-
Users found little value in "Paid" and "Unpaid" options because they had the habit of tracking their unpaid bills by the ledger, instead of a bills
-
Users were not able to distinguish different fields on the screen that had the horizontal arrangement of required fields. Adjustments were made to the prototype (added below) in which the fields were arranged in a column. This was similar to how fields are arranged on physical bill books and users were able to understand the screen much better
-
Users found little use in the discount field
-
Users found little use in the ability to attach bill images
-
Users appreciated the shareability of bills over WhatsApp
-
Users now had an option to connect the bill to the ledger to mimic real-world behavior around bills, which they appreciated
-
The digital look of the bill gave users a sense of ownership of their business and contributed to a feel-good factor
-
Having visibility of total daily sales through bills took away a lot of mental effort required by users
Updated wireframes for Usability Testing 2.0
.png)
.png)
Final UI
-
The arrow was animated to nudge the user to start adding a bill
-
Once the FAB was used to create a bill, it transitioned to a circular shape to reduce clutter on the screen
-
"December ki Sale" (December's Sale) was the sum of bill total of all bills in the 31 days of December. This block represented the sum of the bill total in the total number of days of any month.
-
"Aj ki Sale" (Today's Sale) was the sum of the bill total of all bills of today’s date (24 hours)
-
"Bill Book" worked as a repository for all the bills that the user might create
-
Users had the ability to search and sort their bills according to bill number, date, and the total bill
-
Users could either upload an image of the bill to digitize their existing bills, or they could create new digital bills
Bill Book landing screen
-
Adding customers to a bill was kept optional
-
Once a customer was added, the customer could be changed any time during the making of the bill or even after the bill was saved
-
The Total Bill field was editable
-
The "Bill save karain" (Save Bill) button was kept disabled until a non-zero amount was added to the total field or there was an item in the bill.
-
While adding a customer to the bill, CreditBook (CB) logo was shown against contacts who were part of the phonebook of the user, and also CB users (exist in the CB universe).
-
View with customer was also added
Create a bill
-
User could click on “Item add karain” (Add item) on create bill screen to open the drawer
-
"Rate" was a mandatory field
-
Tadaad ( quantity) could be changed based on plus/minus buttons or by clicking on there and inputting from the phone keypad
-
Once items were added to the bill, "Total bill" would be sum of the total column
-
The last added or updated item was highlighted in green
Adding items to the bill
-
Once user clicks on “Bill Save Karain” (Save Bill) they see the bill preview
-
Users can edit or share the bill on WhatsApp from this preview
-
Users can also download the bill in PDF form
Bill Preview
-
User could click on “Customer ka Bill Banaye” (Create Customer Bill) button on the transaction screen and go to the screen where they could create a bill
-
The created bill was shown as a CTA with the transaction that it was made against
Adding a bill to a transaction
Project Learnings
Future Considerations
The invoicing feature has been launched to our users and our team will continue to monitor its usage through analytics. For now, here are a few points that we want to improve:
-
Users have requested an inventory feature that can be connected to invoicing. We have already started working on an inventory management tool
-
There have been issues with the visibility of the delete invoice option. That will be fixed in future iterations
-
We plan on interviewing the users who are using invoicing to further improve the feature
-
Right now "Bill Book" sits in the "More" section with limited visibility, we plan on adding it to the home screen as an experiment to test click-through
-
Predictive text will be added to reduce the effort involved from the user's end