top of page
Improving CreditBook app's user experience through a new Design System implementation.
Year
2022
Platform
Android
My role
UX Design, UI Design, UX Research
Background
I joined CreditBook as a Senior Product Designer in late 2021, where I was part of a team consisting of three product designers, including myself, and two user researchers. The company aims to improve financial outcomes of small and medium businesses across Pakistan by building secure software for millions of businesses to manage their credit, sales, and expense cycles.
In December 2021, CreditBook became the first Pakistani startup to secure $11 million in pre-Series A funding from Tiger Global, as reported by TechCrunch.
CreditBook team during Q2 onsite at Karachi office, 2022.
Challenge
Our primary product, a business management app for MSMEs, was facing usability and scalability issues, especially as the company was exploring new opportunity areas.
The customer support team started getting complaints that the app was difficult to use, especially for new users. Additionally, some of our long-time users, who operate mature businesses, were shifting to other apps offering a broader range of features. Meanwhile, several new features we introduced struggled to gain sufficient user adoption.
The app's visual identity posed another concern - it had an uncanny resemblance to WhatsApp, which led to a lack of alignment with the CreditBook brand and an inconsistent user experience.
This is how the app looked like when I joined CreditBook back in September, 2021.
Approach
I had the opportunity to lead this project as a Senior Product Designer, collaborating with other designers and user researchers in the team.
• Research
Before delving into potential solutions, it was crucial for us to gain a deeper understanding of our users and uncover their pain points. To achieve this, we conducted user interviews, actively reaching out to both current users and those who recently churned, to gather valuable insights from their perspectives.
CreditBook's typical users consist mainly of small to medium business owners, primarily in the retail and wholesale sectors. This demographic is predominantly male and falls within the age range of 30 to 45. They are driven by the desire to improve their cash flows, enabling them to grow and reinforce their position within the supply chain.
“I've been improvising with the ledger feature to manage my inventory. I was not even aware that you guys had a dedicated feature for stock keeping.”
- Kalim, works at a furniture store in Karachi
Engaging with our active users highlighted a significant realization: our latest major offerings remain somewhat hidden and lack the necessary product education. Given that these users are late adopters of technology, we understood the importance of placing extra emphasis on demonstrating the functionality of even the smallest details.
Conversations with users who stopped using our app revealed a significant issue related to its sluggish and lagging performance. This problem emerged as the primary cause for the high churn rate. While it predominantly stemmed from technical engineering challenges, it also intertwined with the inconsistency of UI elements and overly small touch targets.
“The app was very slow and unresponsive at times. Some buttons didn't function properly, requiring me to tap them twice or thrice.”
- Sadique, a shoe wholesaler in Karachi
• Usability testing
In usability sessions conducted on the live app with various users, we reaffirmed several issues that were highlighted in our user interviews. For instance, we observed some users tapping the search bar multiple times before it responded, underscoring the importance of reevaluating the positioning, sizes, and technical implementation of UI elements.
• Heuristic evaluation
Due to limited analytics integration during the initial stages, our exploration into quantitative insights was restricted. Nevertheless, conducting a simple heuristic evaluation allowed us to identify numerous low hanging fruits for improving the app's usability. These included improving color contrast ratio and visual hierarchy for a more intuitive user experience.
A glimpse at some of the issues identified for the Cashbook feature.
Synthesis
With all this information in hand, it was time for us to consolidate everything and refine our insights. The user research team took the lead in a collaborative synthesis session with designers.
During the session, everyone shared their notes from user interviews, usability testing, and other learnings. Together, we identified recurring themes and common patterns.
After a bit of prioritization at the end (with some groovy music on FigJam), we came up with the following actionable insights:
Solution
Given the clarity of the findings, I recognized the necessity for a comprehensive overhaul of the app due to the consistent problems spanning the entire product. It seemed logical to propose the creation and implementation of a design system, one that could effectively address the major problems our product was facing, while also attempting to redesign certain modules for an improved user experience.
With the approval of our Head of Design, I took the responsibility of building the company's first design system from the ground up. And so, Harmony was born.
File organization
Base/Colors
Base/Typography
Base/Spacing
Components/Buttons
Components/Inputs
• Limitations
There were numerous legacy challenges in place, hence I had to work within certain constraints. Maintaining the WhatsApp familiarity while adding a unique impression was crucial. I also factored in our users' low tolerance for change, the need to balance between simplicity and intricacy (considering our user base's varying digital literacy), and the engineering team's lack of experience with design systems.
• Implementation
With a “source of truth” in place, many design issues were directly resolved, such as spacing, sizes, typography, and colors. We created an implementation strategy that spanned around 3 to 4 months. This included updating designs with new components, incorporating significant UX changes, and collaborating closely with the engineering team to ensure the design system was effectively replicated on their end.
Before Harmony
After Harmony
In this specific screen, you can notice the large input fields and buttons for improved touch targets.
The icons boast a consistent style (Harmony uses Material Icons), while the white top bar minimizes distraction.
A higher contrast ratio enhances readability, and coherent spacing among elements is ensured by implementing an 8-point grid system.
All of these enhancements were made without straying far from the original look.
One key goal was to improve the scalability and visual hierarchy of the Home screen. I led a brainstorming session with my team, during which we collaboratively generated various ideas for better usability.
The team, including Head of Design, together arrived at a decision with the goal of providing users an intuitive experience and enhancing visibility of additional tools that can benefit their businesses.
Old Home screen
New Home screen
Among various improvements, we introduced a section right below the payables and receivables cards, which we internally call "features and announcements". This segment provides users with access to other features and is used for sharing important announcements and conducting targeted experiments.
To ensure that users can easily navigate through a lengthy contact list, we implemented an extendable layout for contacts. This interaction allows users to swipe up to extend the list and continue scrolling. Additionally, we introduced labels to categorize contacts into types, such as customers and suppliers.
Our research also revealed that users preferred seeing their total account balance on the Home screen rather than on the Reports screen. Responding to this demand, we added the account balance on the Home screen, albeit as a secondary focus by introducing a swipe interaction on the cards, allowing users to reveal the total balance quickly. This design decision ensures accessibility without taking too much space on the screen.
Furthermore, we enhanced product education across the platform by implementing contextual tooltips that appear precisely when users might need them. This ensures a seamless journey without overwhelming users with excessive information.
Outcomes
The implementation of a design system and the comprehensive redesign of the CreditBook app produced profoundly positive outcomes. It notably increased user satisfaction, set up a good foundation for CreditBook's future scalability, and streamlined design-to-development workflows.
• Feedback
Qualitative feedback revealed that most users favored the cleaner, improved interface and the ease of discovering new features on the Home screen. These updates distinguished CreditBook's user experience from competitors. However, the issue of slow app performance still required attention, with the engineering team committed to solving these problems.
“I personally like the new update. I can see all these other features now, it’s all right in front of me, that’s cool. Maybe I can make a good use of these.”
- Jehangir, a software developer in Karachi
“The home screen looks much better, it’s quite attractive now. I can go to Billbook directly from here, that’s pretty useful to me because I make a lot of bills.”
- Kalim, works at a furniture store in Karachi
• Data
The launch of the revamped app featured complete analytics integration, a crucial addition that had been absent previously. Three months following the release, data showcased substantial user engagement with features like StockBook and BillBook, effectively opening up new avenues for growth and opportunities as the company explored these data points.
Daily unique clicks for Stockbook and Billbook during first three months following the release of the new update.
• Efficiency
The design team experienced a significant improvement in their processes, leading to increased efficiency and consistency. Interestingly, even non-design team members actively engaged in ideation by using the design system. This strengthened our collaboration with engineering and product, driving us to continually enhance our workflows for more effective results.
Learnings
Working on a multilingual B2B product for low-tech users came with its fair share of hurdles, but it also brought forth some valuable lessons.
• Adapting to local context
In certain cases, it was acceptable to deviate from design norms and trends in order to create a localized solution tailored to address specific problems.
• Prioritizing user needs
While the CreditBook app might not have stood out for its visual appeal, its functionality effectively served our users' requirements, and ultimately, that was the bigger goal.
CreditBook team during Q4 offsite at Ormara Beach, 2021.
© 2024 Osama Noor. All Rights Reserved.
This site is hand-crafted with ❤️ by yours truly.
Last updated on Feb 10, 2024.
bottom of page