top of page
Osama Noor logo
zingg_headline.png

Creating a community-powered delivery app to make side-income easy and enjoyable.

Year

2020

Platform

Android, iOS

My role

Product Design, UX Design, Product Strategy

Background

We started working on Zingg

CreditBook team during Q2 onsite at Karachi office, 2022

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.

Old CreditBook app screens from 2021

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.

A CreditBook user showing the CreditBook app on their phone
A CreditBook user's medical shop
A CreditBook user sitting on a chair

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.

CreditBook app floating action button
CreditBook app portion of the Home screen
Action button in BillBook feature of CreditBook app

• 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.

Some of the issues that existed in CreditBook app before design improvements

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.

CreditBook design and research team collaborating

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:

Research synthesis results showing insights for CreditBook

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.

Harmony Design System logo
File organization of Harmony Design System

File organization

Colors in Harmony Design System

Base/Colors

Typography in Harmony Design System

Base/Typography

Spacing in Harmony Design System

Base/Spacing

Buttons in Harmony Design System

Components/Buttons

Inputs in Harmony Design System

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.

Cash In screen of CreditBook app before implementing Harmony Design System
Cash In screen of CreditBook app after implementing Harmony Design System

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.

Ideation snapshot for CreditBook app's Home screen ideation

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 CreditBook Home screen

Old Home screen

New CreditBook 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.

Product education tooltips on Home screen of CreditBook
CreditBook app final designs after implementing Harmony Design System

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.

Snapshot of data showing daily unique clicks for Stockbook and Billbook

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

CreditBook team during Q4 offsite at Ormara Beach, 2021.

© 2023 Osama Noor. All Rights Reserved.
This site is hand-crafted with ❤️ by yours truly.

Last updated on Sep 17, 2023.

bottom of page