Role
UX Lead
Timeline
Jan - Jun, 2019
My direct contribution
I handled the UX and visual design, but we collaborated closely on the user research. We jointly developed research questions, and I conducted the sessions while my co-designer observed and took notes.
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.
Before / Previous design, 2014–2019
After / Shipped design, 2019
Gathering a single source of truth for the current screens
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.
Evolving a design language
Prior to the redesign, there were no established UI standards that covered the product, or anything that served as a ‘single source of truth’ for the team. In fact, I was referencing the real app, taking screenshots and re-drawing what was already live.
Understanding the growth trajectory of the business, and it’s expanding product footprint, I saw an opportunity to define how UI can be better managed and in a more collaborative way. This necessitated a creation of a component based design system.
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 suppport 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.
Reflections
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 rendered natively on the Android engine. The app felt lighter overall, we saved about 7 megabytes in app size, animations felt more crisp on user devices and we now have reusable files that can be easily tweaked for years to come.
CREDITS
Android Engineer
Chike Chizoba
Product Manager
Henry Uku
Product Designer
Florence Dairo
QA Engineer
Nonami, Yetunde
Cofounder
Chijoke Dozie
Cofounder
Ngozi Dozie