Carbon Digital Bank App

UI/UX, PRODUCT DESIGN

Leading the mobile interface redesign and experience revamp of a top African digital bank with over 1 million users.

DESIGN PROBLEM

Paylater was originally an online lending platform that provides short-term loans to help cover unexpected expenses. As the app grew beyond offering loans, a new name and brand refresh became imperative, these birthed Carbon!

After the identity rebrand was concluded by external consultants, there was an urgent need to revamp the interface and experience of the app while capturing newly planned features like free credit reports, investments, single transaction history, and wallet.

CONTRIBUTION TO COLLABORATIVE EFFORTS

I mostly worked on the UX and visual design related tasks yet we worked closely as a team. For the user research, we collaboratively came up with research questions. I ran the sessions while my co-designer observed and took notes.

Groundwork: The project initially started with a huge list of UX fixes that were already identified by the product managers on the Paylater app. While also listing out the extra features that needed to launch with the rebranding initiative.

ROLE/TIMELINE

UX Lead (Consultant)
Jan - Jun, 2019

TEAM

2 UX Designers
3 Product Managers
2 Android Engineers
2 QA Engineers
2 Key Stakeholders (Cofounders)
1 Finance Executive

PROJECT LINK

https://play.google.com/store/apps/details?id=com.lenddo.mobile.paylater&hl=en

DESIGN PROCESS

Gathering a single source of truth for current app: The lack of an intentional UX effort in the Paylater app meant that there was no Sketch file, PSD, or any tangible resource housing those screens. With the aid of some user flows from engineering (Android Studio to the rescue), I took 100’s of screenshots on the live app to form the only concrete resource we could use as discussion points.

Design audit of current app: I observed the flows while simultaneously creating a Material design guideline that discards non-unifying components and introduces new non-existent ones. In determining the styles, we considered factors like legibility and contrast, and how well we can apply it across a variety of use cases. After several rounds of iteration, we arrived at this set of styles:

I experimented different layout styles and shared 2 key explorations: — one was expressive (huge on colour), the other was calm and quiet (mosty white). I had several sessions with marketing, product, and engineering to discuss these decisions.

Visual preference testing on Slack yielded about 56% to 44% in favour of calm and quiet. Engineering also preferred that option because it was considerably less coding work to shift old designs.

A component-level approach to designing preferred UI direction: We applied the selected styles across a variety of screens in the app, focusing on creating re-usable components like text fields, modals e.t.c

In this phase of the project, we leveraged the design guidelines earlier created, while iterating as needed.

Redesigning empty states with more actionable messages and lively animated icons

Animation Preview: https://lottiefiles.com/share/Ha95gh

USER RESEARCH

Testing key screens to better decide if redesigns (impact) are worth the cost & time: Whenever I noticed where UX can be improved, I will create quick sketches and call for a team discussion. In the case below, it was something customer support says users are confused about: Hundreds of users calling about their inability to withdraw from their accounts.

I found this to be a UX issue (discoverability) not a functionality problem, and after few usability sessions, option B had the most success and was pushed to the visual design phase.

USER TEST SESSIONS

Led qualitative user testing sessions for further validations: Recruited participants from social media/email newsletter. Created test scripts and questionnaires. Then led both remote and in-house testing sessions to validate core design ideas and unlock insights from our current and look-alike customers.

REFLECTIONS/LEARNINGS

During the rebrand of Paylater to Carbon, I had to update about 30 micro-interactions to fit the new style guide. All of these animations were created in GIF format and there were no source files available to update the colours.

After trying to look for several workarounds, I dedicated a week to rethinking the whole animations, recreated them in After Effects, redesigned some entirely, and converted them to JSON via BodyMovin/Lottie.

The result was a migration from static moving images to mathematically calculated vectors that were rendered natively on the Android engine. The app felt lighter overall, we saved about 7 megabytes in app size, animations felt crisper on user devices and we now have reusable files that can be easily tweaked for years to come.