2022
Redesigning a new, intuitive, multi-search for Cashbook App (YC W21)
Cashbook App is a Y Combinator backed app digitising business record-keeping, ledgering and financial management for small and medium businessmen and enterprises in India. It is designed for Indian business owners, offering role based access control system, a PPI enabled expense supported by unique UPI handles for each business employee.
MY ROLE
User Research
UX/UI Design
Usability Testing
Prototyping
COLLABORATION WITH
Lead Product Designer
1 Product Designer
TIMELINE
10 weeks
Feb-April 2022
INTRODUCTION
In 2022, we shipped an updated, more intuitive search experience for Cashbook users. Search and filters was used within business "books" where daily business ledgering occurred. This involved
a deep dive into our users search behaviour, while addressing the unique nuances of their specific patterns of search and filters usage
looking at major painpoints across user's search and filter journey within the app.
Locate your transactions in a more helpful, intuitive way from your business ledger books
PROBLEM STATEMENT
Users clicked on filters more than search, they eventually used search more than filters. Therefore, filter was discoverable, but search was more useful. How might we make search a more cordial, useful feature while also solving for easily adoptable filters.
BREAKDOWN OF THE PROBLEM
🔗 Dis-harmony between search and filter usage
Users are more familiar with search experience than with using filters
🔕 Lack of system status feedback
Improper accounting for user behaviour errors and edge cases
💡 Limited discovery of advanced filter options
Search and filters be leveraged to educate/inform users of advanced features
UX OBJECTIVES - SUMMARY
Simplifying our UX objectives to define our design process goalposts
Basis initial outlining of the problem, the following user experience goals were outlined
Hygiene fixes for search and filter
Increase filter function discoverability and usage
Provide useful system status feedback to the user during the process
Utilise the search and filter tools to educate users about other advanced features to generate results
USER'S SEARCH + FILTER JOURNEY WITHIN THE APP
Anatomy of an entry
This information becomes relevant for search later on in this case study. These entries exist within a "Cashbook".
A Cashbook is a record or digital ledger made up of the transactions
Both the Search and Filter allows the user to locate or filter out specific or types of transactions from their cashbooks
Users can also download filtered out cashbook entries to share, organise or peruse their information later.
WEIGHING IN ON THE DIFFERENCES
🔎 Search
Pro :
Provides exact information
Can power filters through hyper-specialised search
Cons :
Non persistent user has to search the term each time they want to look up that information
Can only search amongst remarks attached to a transaction
🧂Filters
Pro :
Fetches transactions on the basis of entry types or sort by time
Is persistent, unless cleared
Can power search, can be grouped together
Cons :
Hidden and persistent, can hamper information fetch if applied and forgotten
What could be improved?
EXISTING DATA
I observed user data which I could access from Clevertap and Mixpanel to validate our user concerns properly. This data was from a period of December 2021 to March 2022.
1.03M
times filter icon was tapped
753.6K
times filter was applied
866.1K
focused search was applied
5K
focused search was applied daily
9K
filters applied weekly
USER RESEARCH
Search and Filters forms the backbone of a product which consolidates information. To understand better how users viewed and used this tool, I called Cashbook users and talked about their unique search habits. They also echoed some already existing issues I had identified with the older search and filter experience during a quick heuristic evaluation of the tool.
Search
"Sometimes I only remember the amount of entry. My staff also uses remarks and does not tag the entries using categories, or payment, etc because they do not know about these filters.
Search
"I have to type out the exact word or I will not get the proper result. I also don't know if my results are accurate enough because nothing is highlighted in the book."
Filter
"I don't understand what is All Time."
"If I apply filters, I should at least know what is applied and when."
Filter
"I am familiar with Search. But if I only remember an amount or phone number of a transaction and not the tags or remarks, I cannot locate or search the transaction again."
Filter
"I don't use filters because I don't know we have filters or what it does".
"I find that filters are not accessible, I have to tap many times to apply filter and to also see the applied filters."
Search + Filter
"I can use Search to customise my results by adding whatever I want in the remarks. Even though I cannot search by amount yet. I don't use filters because it is a lot of effort to apply them. Instead, I use Search as it does the same thing."
DESIGN EVOLUTION THROUGH EMPATHY MAPPING
What does a user think, feel and do during the process of using search and/or applying filters within their Cashbook?
I created two empathy maps for Search and Filter, and used a How Might We structure to chalk out initial ideas. This helped me identify themes in UX principles that I considered non-negotiable for this redesign.
DESIGN EXPLORATIONS
Designing the best solution for this problem
I came up with many concepts in the earlier of design explorations. Some of them can be seen here - please tap to expand view. Reasons for why they did not work out is included in red.
Some of the ideas did translate into solid concepts that landed in the final hi-fidelity version.
Intitial Design Explorations
USABILITY TESTING
Rapid testing and iterating using Think Aloud Walkthrough method
At the penultimate stage of the design sprint, the team conducted a usability testing with our users from diverse businesses and backgrounds. We tested the first version of the final design flow with 7 users via Google Meets by using the Think Aloud Walkthrough method.
Here's how we prepared for the usability testing
Determined the cohort for the testing : We had volunteer testers from small enterprises, bigger businesses, and individual business owners.
Defined the task list : We broke the flow into tasks and asked our users to complete each one of them and speak out aloud as they worked through the tasks. We helped them out in case the copy was unclear or required localized translation (while also noting it down as a feedback).
Consolidated the findings : I divided each task into micro-tasks of up to6 steps by me, and I evaluated any blockages, dependencies, confusion or feedback of all the micro-steps.
Iterated on the learnings : I designed basis the feedback of the usability testing and readied the file for engineering handover.
1
Search an item as usual
2
Use advanced search tabs
3
Use time filter to find transactions
4
Apply one more filter from the tray
5
Apply filters and search together
Findings of the testing
Users found the new filter tray easily detectable and usable.
Users found the new layout change was a big overhaul for them
Users could require some initial hand-holding to build enough muscle memory for this change.
We created the first prototype with Amount, Category, Payment Mode and Members. This confused the users. In the final handover we went ahead with only Search and Amount in advanced search.
All the testers could locate and use the basic and advanced search easily. They liked that they could now search among Remarks and Amount too.
FINAL DESIGNS
Perfecting the new search and filter experience
Applying advanced Search
Search now supported alpha-numeric terms. Users could now search within the three categories of All, Remarks and Amount.
We highlighted the searched term in yellow so the user has feedback about the searched term whether it happens on the remark or amount side.
Filters were now accessible and a tap away
Updated filter icon to a variation which was used requently across similar app and therefore easily recognisable for our users.
The user could now sort/filter results upfront from a single tap right on the book page and apply them.
If they would like to go through all the filters, simply clicking on the filter icon will take them to the bottom sheet with all filters.
Using filters to power search
Search had its own screen where previous searches were suggested so the user will not have to look up for a term again and again.
We also made filter tabs accessible from this screen.
This enabled the user to search within applied filters
Reducing user anxiety when results are not found
Major change was including a redirection from the error state by showing the nearest resembling item to the user. Here, "Ghar" is misspelt as "Khar" but we are able to identify the similarities and redirect the user accordingly.
We provided handholding by using a call-out to show the new update on the search screen.
IMPACT
An improved search and filter experience for our users
In 3 months, we saw an increase from 5,000 unique search events daily to 3,00,000 unique search events per day. Applied filters saw 9,000 unique events to 280,000 unique events weekly. Both were accounted at a 5% MAU growth.