MY CONTRIBUTION
User Research
Helped plan and moderated parts of the generative and evaluative research.
Wireframing
Led the design of wireframes, created wireflows to align journey with stakeholders.
UI Design
Oversaw the design of the registration and debt payment flow ~ a third of all UI screens.
BACKGROUND
While NEO aims to provide a range of financial wellness services, its initial product focused on refinancing, which involves consolidating multiple debts into a single loan with more favorable terms such as lower interest rates or more manageable monthly payments.
NEO Money partners with traditional banks to create digital financial products that are more aligned with their customer’s financial goals.
Despite the proliferation of smartphones in Thailand, at that time all refinancing applications for banks in Thailand were still done in-person. The current process was time-consuming and required people to take time off from work to go to the physical bank branches.
Our project goal was to design a digital-first refinancing experience that would better inform and support customers along their journey to pay off their loans.
NEO MONEY
A empowering refinancing experience for people struggling with debt
OVERVIEW
In Q3 2019, I helped NEO Money, a FinTech startup, design a refinancing app from 0 to 1. The project spanned twelve weeks and was informed by our generative research about people’s debt payment attitudes and behaviors.
AHANCER
X
TEAM
Natt (PM)
Noon (Sr. UX Designer)
Me (UX Designer)
Nuch (UX Designer)
TIMELINE
Jul - Sep 2019
DESIGN
Wireframes
Working closely with NEO Money’s PM, our team expanded on the various user flows and sketched out wireframes, considering both the core refinancing journey as well as the unhappy paths, edge cases, and errors.
Splash to Primary Screens
I designed the mid fidelity wireframes for the splash screen onboarding and primary screens (Home, Services, Learn, and Help). When designing the Services screen, it was important to also consider how it would accommodate NEO’s future products.
Input Salary and Outstanding Loans
As part of the application users input their income and loan details. If their outstanding debt exceeds the available refinancing amount, users select which debt to consolidate. NEO’s estimated refinance rates and payments are shown at the end for comparison.
UI Screens
Working within the UI theme established by Noon, our senior designer, I was responsible for designing the UI for most of the refinancing application process and account section.
Input Salary and Outstanding Loans
When designing I aimed to ensure content clarity with a clean, minimal aesthetics. Informed by usability test insights, I also introduced a visual progress bar to indicate refinancing balance available and decluttered the comparison screen for a enhanced user experience.
Monthly payment and debt consolidation detail
Upon approval, the CIMB Thai refinancing account can be conveniently accessed through the Services screen in the bottom navigation bar. I designed the installment payment screen to resemble a receipt, providing a subtle visual distinction from other tab screens.
DESIGN CHALLENGE
How might we streamline the refinancing process and better cater to the financial needs and aspirations of individuals in debt?
Getting Started
Refinancing with NEO Money is a new and welcoming experience.
From the splash screen to the refinancing product page, content is designed for transparency and optimized clarity with jargon free copywriting.
FINAL EXPERIENCE
Checking your rates
NEO Money's pre-calculation makes it easy to understand, easy to visualize.
Simply input your current salary and provide the details of your existing debt to discover how your new monthly payments and total interest stack up.
Authentication
Easily authenticate your identity right from the app.
Say goodbye to a lengthy process. Just take a photo of your Thai ID followed by a liveness check of your face to complete your KYC verification.
Inputing Salary and Debt
Conveniently fill out your debt details by uploading a photo.
No need to type in all your details of your existing debt, just upload an image of your loan bill and NEO Money's OCR will populate the details for you.
Accepting OFfer
If approved, customers have 7 days to accept their offer.
Once accepted customers can now access their CIMBT refinancing product through the primary Services tab in the bottom navigation.
payment incentives
A loan that is actually aligned with your debt free goals.
With NEO Money, every time customers make timely bill payments they accumulate a 1.3% cash back on their total loan amount.
A community of learners
A home for anyone who want to learn about building better financial habits.
Access a crash course led by a renowned financial coach or explore curated content featuring inspiring debt payoff success stories from the community.
IMPACT
NEO Money became the first mover in the Thai market
Launched in Q2 2020, the NEO Money app became the first online debt consolidation services in Thailand, amongst fierce competition as traditional banks rush to transition online in response to the COVID-19 pandemic. At the right place and at the right time, NEO was able to help many Thai people in the community when they needed it most.
Awarded 2020 ABF Consumer Finance Product of the Year
CIMB Thailand secured a coveted title from the Asian Banking and Finance Awards, solidifying its position as an industry leader renowned for introducing cutting-edge products and services that positively impact customers.
In the interview, Tan Keat Jin, Head of Consumer Banking at CIMBT, emphasized the integral role played by their partnership with NEO Money in achieving this success, stating:
DEFINE
Information Architecture
The NEO Money app has 4 primary screens: Home, Services, Learn, and Help, which can be accessed from the bottom navigation bar. The sitemap below shows the breakdown I created to organize the various interconnected content elements.
Hierarchy mapping for NEO's primary screens
Userflows
Onboarding to start of refinancing application
I created several user flows to help map the path a customer could take through the NEO Money application. Shown below is the user flow that visualizes the steps the user would take from onboarding to the refinancing application process.
User flow showing how customers get to the refinancing application process
Refinancing application process
This is one of the high level user flows I created for the refinancing application process, showing the steps the user would take from inputing personal and debt details, to uploading documents, and ending with awaiting loan approval.
User flow showing the steps in the Refinancing application process
Some of my illustrations even made it to our final design!
While I'm not as great a illustrator as Apisit and Noon (their amazing illustrations are featured throughout this app), I'm proud to have contributed beyond UI design with two illustrations for the email verification and password recovery.
REFLECTION
Is NEO Money accessible for the Blind and Visually Impaired (BVI)?
Lately I’ve been asking myself whose needs are we actually prioritizing? and whose are we neglecting? For example, how accessible is the NEO app to BVI people who depend on using VoiceOver or TalkBack? Given the chance, I aspire to do more than comply with WCAG color contrast guidelines, but also ensure that our app extends that same level of user-friendliness to people who are visually impaired as it does to sighted users.
