Jersey City, NJ
Oct 2022 - Oct 2023
Timeline & Location
iOS, Android, Web Application
What
Tools
Role
Freelance Project For a Fintech Startup
Why
The challenge
Here's the situation: Money Avenue has had great success in the loans and financial sector. However, they've noticed the growing trend of people embracing digital banking. The question on their minds was, "How can we merge into this digital space while still highlighting our core services and increasing our revenue?"
✨
The task ahead? Design a banking platform that feels modern but also seamlessly ties back to what Money Avenue does best.
The solution
To bridge Money Avenue's existing financial services with the digital banking surge, we developed and designed an integrated banking app that was user-centric, showcased Money Avenue’s core strengths, and adapted seamlessly across platforms.
✨
The progress? This app is now in its final stages of development!
Responsive Webpages
The claim
The Global Fintech Industry has had a steep rise over the last decade. As of 2022 the industry is worth approximately $194 Billion. This fast growing space is projected to reach around $492 billion by 2028!
The reason
Growth in this industry is being driven by the increased adoption of digital payments, the rise in e-commerce and the growing popularity of alternative finance products.
$492
Billion
Estimated industry growth by 2028.
Analyzing the competition
I usually start my ideation process with a quick competitive analysis. Analyzing 3 well known, yet small banking apps, i was able to compare the registration flow, the banking process and existing pain points expressed by their customers.
The Good
All apps have a simple and clean registration flow that doesn’t loose the customers attention.
All registration forms were split into multiple steps, each step having 1 - 4 fields.
Dave presents users with a variety of solutions for navigating away from unfavorable situations.
The Bad
Chime mandates that users create a checking account to access its features.
MoneyLion has poor user verification, allowing fake accounts to be created.
Dave does a poor job in presenting users with meaningful alert statements.
“It would be better if you had a phone number for support, I lost my wallet twice now and need a new card.”
User of Chime
“I tried to create an account several times but was denied because it said someone else was using my social security number!”
User of MoneyLion
“I’ve been trying to sign up but it keeps telling me my identity can’t be verified. At least tell me why?!”
User of Dave
Understanding the user
To better understand how typical users interact with mobile banking apps, I carried out interviews in person and online. I asked 10 open-ended questions to get a clear picture of what users do and what they really value when they use these apps.
“What features do you use the most in a banking app?”
“I'd say viewing my account balance, mobile check deposit, and transferring money between accounts are the features I use most.”
“Seeing my balance and any pending transactions is probably the most important thing for me when i use my banking app”
“My current app tends to be a bit cluttered. There are so many menus and features that I don't use and they just get in the way.”
“I don't want logging in to be a hassle, but I also don't want it to be so easy that someone could get into my account without my permission.”
Defining the personas
With the research behind me, It was time to create some personas. Below you will see two individuals that represent the typical Money Avenue user.
Occupation
Entrepreneur & Dev Manager
Location
Atlanta, Georgia
Age
41
Family
I'm constantly on the move, and every second counts. I need a banking app that's as fast-paced and reliable as I am. It has to be like my right-hand man – always on, always secure.
Biography
Kevin Thompson, a business graduate with management experience, juggles multiple roles including a tech startup and a strategic position at General Motors. His hectic schedule underscores the need for a simplified banking app for efficient financial management and quick transactions.
Frustrations
Dislikes interfaces that are cluttered with unnecessary features that do not cater to his needs
Inefficient security measures or lengthy login processes that waste time
Apps that are slow at updating transaction information
Occupation
Restaurant Manager
Location
San Diego, California
Age
25
Family
Single
After a non-stop day at the restaurant, I barely have time to catch my breath. I just want a banking app that’s easy to check —something that lets me handle my money without any hassle or drama.
Biography
April Garcia, progressing from a hostess to managing a busy downtown restaurant, has days packed with overseeing operations, coordinating staff, and customer service. Constantly on the move, she relies on her phone for managing financial tasks.
Frustrations
Irregular work hours makes it difficult to visit a physical bank to perform basic tasks
Feels overwhelmed with the complexity of some financial apps
Slow banking apps that crash frequently and waste valuable time
Mapping the flows
To develop a successful banking app, I identified and mapped out 10 key user tasks, focusing on two primary flows. I Initially, designed each flow based on my competitive analysis and research. However, after discussions with business stakeholders, business analysts, and the development team, we adjusted the flow to align with business needs and technical constraints.
Site map
Throughout the project's duration, the sitemap for this application consistently evolved. As is typical with projects of this magnitude, new functionalities were regularly prioritized, leading to scope creep and subsequent modifications. Below, you will find the detailed layout of the accounts section within the sitemap.
Time to ideate!
Once the initial flow diagrams were completed, I proceeded to develop low-fidelity wireframes to underscore each flow. The transaction detail flow, illustrated using Balsamiq, is showcased below.
Reimagining the brand
Money Avenue, as a brand, was in dire need of an update. Initially, a rebrand wasn't on the cards. However, after moving to high-fidelity work, I introduced a revamped logo and design system to the team. They instantly fell in love with it!
Logo
Horizontal logo
submark
favicon
Color Pallet
#03A66A
#41BF91
#84D9BA
#C9F2E3
#FFC559
#D13E33
#1B2621
#354C43
#5B7167
#A1BAAD
#BACCC3
#E6E6E6
#F2F2F2
#EFEFEF
#FFFFFF
Typography
Font
Poppins
Desktop
Aa
SemiBold, 64px/80px
HEADING 1
Aa
SemiBold, 48px/60px
HEADING 2
Aa
SemiBold, 32px/48px
HEADING 3
Aa
Regular, 16px/24px
BODY
Aa
Bold, 16px/24px
LABEL
Aa
Regular, 16px/24px
LINK
Tablet
Aa
Bold, 40px/60px
HEADING 1
Aa
Bold, 32px/48px
HEADING 2
Aa
Bold, 18px/27px
HEADING 3
Aa
Regular, 14px/21px
BODY
Aa
Bold, 14px/21px
LABEL
Aa
Regular, 14px/21px
LINK
Mobile
Aa
Bold, 32px/48px
HEADING 1
Aa
Bold, 24px/31px
HEADING 2
Aa
Bold, 16px/24px
HEADING 3
Aa
Regular, 14px/21px
BODY
Aa
Bold, 14px/21px
LABEL
Aa
Regular, 14px/21px
LINK
Material Icons
Special Icon Set
Over 650 high fidelity screens created using figma!
The Scope of this project exceeded anything i have taken on to date. Below highlights the amount of High fidelity work that was put into the project with developer handoff in mind.
✨
Over 450 High Fidelity Mobile Screens created
✨
Over 200 Responsive High Fidelity Web screens created
Design principals for an enhanced user experience
Alignment and Grid
For the mobile design, I utilized an 8-point grid to create a pixel-perfect design, following the "red square method" developed by designer Michał Malewicz.
Pixel perfect consistency across all visual elements.
CSS drawback when line-heights aren’t considered.
Hierarchy Strips
As humans, proximity aids in understanding and organizing information more quickly and efficiently. This principle is evident throughout my design process.
Since this was a new product for the Money Avenue Team, displaying a working prototype was crucial to earning the business team's trust and comprehension of the proposed design. This not only facilitated discussions but also guided the development team during implementation.
Prototype Validation
Due to an aggressive schedule, prototype validation was limited. To streamline the processes, I focused on high-impact features and conducted remote usability tests with company stakeholders. Using clickable prototypes created in Figma, I was able to identify pain points within these features.
The Study
In one particular study, I focused on the app's payment feature. I asked each participant to send a payment using the app's native feature and observed their behavior through a zoom call. The importance of this exercise was to find any pain points users may face while completing the task.
The Results
80% of participants hesitated significantly when figuring out how to search for a user to send money to, with a small fraction of these participants believing there were no users to select from. Furthermore, 60% of the users overlooked the "for" section of the payment process, which led to confusion about why they couldn't proceed to the next step.
The Update
While an additional usability study on the updated prototypes wasn't feasible, I addressed the identified issues from the study in the following ways:
✨
To minimize confusion and enhance focus on user selection, I relocated the "for" section of the payment process to the payment review screen.
✨
To avoid hesitation during user search, I've outlined a clear method for importing contacts. Additionally, a list of Money Avenue users is displayed by default.
My Journey with Money Avenue
During my time at Money Avenue, I embraced the challenge of designing a fintech application from the ground up. With a background in frontend development, I seamlessly transitioned into bringing innovative ideas to life in a rapidly evolving startup environment. This experience sharpened my adaptability and deepened my understanding of the fintech sector.
My Approach & Contributions
Innovative Design
Successfully led the UX/UI design for the fintech application, ensuring an intuitive and engaging user experience across both mobile and web platforms.
Industry Acumen
Conducted comprehensive market research and competitor analysis, allowing me to embed industry-specific insights into the design process.
Adaptability in Startup Culture
Thrived in the dynamic and fast-paced environment of Money Avenue, which honed my ability to quickly adapt and respond to changing project needs.
Reflections & Learnings
Continuous Improvement
The project underscored the importance of prototype validation and iterative testing. Reflecting on this, I would place a greater emphasis on these aspects in future projects.
Professional Growth
This experience has been pivotal in shaping my approach to product design, particularly in understanding the balance between user needs and business goals.