Problem
Problem
As a Product Designer, I drove the design of CreditBook’s Android app, directly impacting 1M+ active users who are Micro, Small and Medium Enterprises (MSMEs).
Users were expressing that our financial reports were difficult to use:
As a Product Designer, I drove the design of CreditBook’s Android app, directly impacting 1M+ active users who are Micro, Small and Medium Enterprises (MSMEs).
Users were expressing that our financial reports were difficult to use:
Support tickets
Support tickets
30+ raised within 2 months
30+ raised within 2 months
Sentiment from 10+ field sessions
Sentiment from 10+ field sessions
Consistently negative
Consistently negative
Outcome
Outcome
I redesigned the reports information architecture and layout, working with two UX researchers, 1 writer, and engineering.
The redesign lifted reports usage significantly:
I redesigned the reports information architecture and layout, working with two UX researchers, 1 writer, and engineering.
The redesign lifted reports usage significantly:
Daily engagement per user
Daily engagement per user
+16% increase in reports generated per user within a month
+16% increase in reports generated per user within a month
Frequency
Frequency
Users generated 2+ reports per day consistently (vs. ~1.8 before)
Users generated 2+ reports per day consistently (vs. ~1.8 before)
Context
Context
CreditBook is a mobile bookkeeping app serving 1M+ Pakistani MSMEs
CreditBook is a mobile bookkeeping app serving 1M+ Pakistani MSMEs
They use it to track customer payments and supplier bills.
They use it to track customer payments and supplier bills.
Financial reports are spread across the features of the app
Financial reports are spread across the features of the app
They help business owners analyze transaction patterns, outstanding balances and cash flow trends to make daily operational decisions.
They help business owners analyze transaction patterns, outstanding balances and cash flow trends to make daily operational decisions.
The Challenge
The Challenge
Users struggled to extract insights from our financial reports
Users struggled to extract insights from our financial reports
Within two months, 30+ customer support tickets had been raised for our financial reports. The reports were complex, making it challenging for users to interpret and analyze the information in them.
Within two months, 30+ customer support tickets had been raised for our financial reports. The reports were complex, making it challenging for users to interpret and analyze the information in them.
The current report design
The current report design
Research and Insights
Research and Insights
Our users said they struggled with…
Our users said they struggled with…
To get a sense of all the issues our users mentioned, I sifted through all the support tickets from Zendesk and clustered similar problems and insights together.
To get a sense of all the issues our users mentioned, I sifted through all the support tickets from Zendesk and clustered similar problems and insights together.
…Unclear balance calculations, poor visual hierarchy, extra columns
…Unclear balance calculations, poor visual hierarchy, extra columns
The Business Report shows overall transactions and the current total balance of the business. I discovered the following issues from my sticky notes:
The Business Report shows overall transactions and the current total balance of the business. I discovered the following issues from my sticky notes:
…Third-person language, poor row separation, unclear balance calculations
…Third-person language, poor row separation, unclear balance calculations
The Customer Report shows the business’ transactions and total balance with a single customer/supplier. I found these issues from my sticky notes:
The Customer Report shows the business’ transactions and total balance with a single customer/supplier. I found these issues from my sticky notes:
Design Process
Design Process
What are our competitors up to?
What are our competitors up to?
Since earlier research revealed that some users had churned because of these reports and were now using other apps, I did a competitive analysis. The goal was to examine the visual layout and information arrangement identify improvement opportunities. I looked at 5 main players in the Pakistani market: DigiKhata, EasyKhata, UdhaarBook, mKhata, and CashBook.
Since earlier research revealed that some users had churned because of these reports and were now using other apps, I did a competitive analysis. The goal was to examine the visual layout and information arrangement identify improvement opportunities. I looked at 5 main players in the Pakistani market: DigiKhata, EasyKhata, UdhaarBook, mKhata, and CashBook.
Business Reports - Insights
Business Reports
Business Reports
Customer Reports - Insights
Customer Reports
Customer Reports
Mental models and information architecture
Mental models and information architecture
By assessing the existing design with competitor reports which users loved, I could make informed decisions when crafting the information architecture of my financial reports. This is where I worked on arrangement and prioritization of key pieces of information, ensuring users could find relevant content and understand it quickly.
In the support tickets, customers had also left images of their physical bookkeeping records to explain what data formats they were comfortable with. I used these to map the users’ mental model of a paper ledger onto a digital format.
By assessing the existing design with competitor reports which users loved, I could make informed decisions when crafting the information architecture of my financial reports. This is where I worked on arrangement and prioritization of key pieces of information, ensuring users could find relevant content and understand it quickly.
In the support tickets, customers had also left images of their physical bookkeeping records to explain what data formats they were comfortable with. I used these to map the users’ mental model of a paper ledger onto a digital format.
Columns and visual hierarchy
Columns and visual hierarchy
I started by listing the content I needed to represent in the business report. In making this list, I also decided which report columns to discard, keep or add as they all impact the clarity and usability of the report.
Next, to help users in grasping the 3 key takeaways regarding their current business state from the report, I created an ‘overview’ in a card to establish visual hierarchy.
I started by listing the content I needed to represent in the business report. In making this list, I also decided which report columns to discard, keep or add as they all impact the clarity and usability of the report.
Next, to help users in grasping the 3 key takeaways regarding their current business state from the report, I created an ‘overview’ in a card to establish visual hierarchy.
Design Decisions
Design Decisions
How I improved the Business Report
How I improved the Business Report
How I improved the Customer Report
How I improved the Customer Report
I kept the core content structure but made targeted improvements like translating terms to Urdu where users expected them ('Note' became 'Tafseel') and applying the same visual hierarchy improvements from the business report.
I kept the core content structure but made targeted improvements like translating terms to Urdu where users expected them ('Note' became 'Tafseel') and applying the same visual hierarchy improvements from the business report.
Final Design
Final Design
The Solution: Business Report
The Solution: Business Report
Before
Before
After
After
Final Design
Final Design
The Solution: Customer Report
The Solution: Customer Report
Before
Before
After
After
Edge Cases
Edge Cases
What happens if inputs are very long?
What happens if inputs are very long?
Case 1: the user having maximum amounts (9 or 10 digits) and long customer names. I decided that if the names are very long, they will be truncated after 20 characters (including spaces).
Case 1: the user having maximum amounts (9 or 10 digits) and long customer names. I decided that if the names are very long, they will be truncated after 20 characters (including spaces).
Case 2: super long notes are handled as shown. Because of the dividers, the long notes don’t cause confusion or mix with the adjacent rows.
Case 2: super long notes are handled as shown. Because of the dividers, the long notes don’t cause confusion or mix with the adjacent rows.
Iterating through feedback
Iterating through feedback
Testing and making our solution accessible
Testing and making our solution accessible
We wanted to gauge the users’ sentiments around the redesign to iterate quickly and fix issues pre-rollout. We visited 5 users at their stores in person (who used business and customer reports regularly) to show them our redesign. I personally went to 2/5 of these with a user researcher.
We wanted to gauge the users’ sentiments around the redesign to iterate quickly and fix issues pre-rollout. We visited 5 users at their stores in person (who used business and customer reports regularly) to show them our redesign. I personally went to 2/5 of these with a user researcher.
Insights
Iterations
Outcome
Outcome
Impact: +16% boost in daily engagement, per user
Impact: +16% boost in daily engagement, per user
After the rollout, the customer experience team and I called up 27 users (~5 users for each of the 5 report types) to inquire about their experience with the redesigned reports.
After the rollout, the customer experience team and I called up 27 users (~5 users for each of the 5 report types) to inquire about their experience with the redesigned reports.
Themes from user feedback
Themes from user feedback
“They’re better than the previous ones which I couldn’t understand... I am satisfied”
“They’re better than the previous ones which I couldn’t understand... I am satisfied”
Almost a month after rollout, I also asked the data team to pull up some stats for how the redesigned reports were performing vs the old design. From the line chart, the main insight was that daily usage was greater post-rollout, and that the new design was making it easier for users to digest the content:
Almost a month after rollout, I also asked the data team to pull up some stats for how the redesigned reports were performing vs the old design. From the line chart, the main insight was that daily usage was greater post-rollout, and that the new design was making it easier for users to digest the content:
Daily engagement per user
Daily engagement per user
+16% increase in reports generated per user within a month
+16% increase in reports generated per user within a month
Frequency increase
Frequency increase
Users generated 2+ reports per day consistently (vs. ~1.8 before)
Users generated 2+ reports per day consistently (vs. ~1.8 before)
Learnings
Learnings
Next steps and reflections
Next steps and reflections
What I learned
What I learned
Blank canvas design: I experimented with layout and composition on a blank canvas while still being constrained by the branding/design system of an org.
Product analytics: I dug into Mixpanel to understand the quantitative impact of my design firsthand.
Blank canvas design: I experimented with layout and composition on a blank canvas while still being constrained by the branding/design system of an org.
Product analytics: I dug into Mixpanel to understand the quantitative impact of my design firsthand.
What I’d do differently
What I’d do differently
I’d start off by chatting with users about the reports while going through the tickets - there’s no substitute for initial user research!
I’d start off by chatting with users about the reports while going through the tickets - there’s no substitute for initial user research!
What I did next
Fix type sizes: Post-rollout, we discovered that the technical implementation resulted in font sizes still being too small. I worked closely with developers to increase font sizes further as they showed me the results on their dev emulator.
Right-to-Left Report design: the app supported 4 RTL languages, so I swapped column orders to make those reports.
Fix type sizes: Post-rollout, we discovered that the technical implementation resulted in font sizes still being too small. I worked closely with developers to increase font sizes further as they showed me the results on their dev emulator.
Right-to-Left Report design: the app supported 4 RTL languages, so I swapped column orders to make those reports.
