Kale
An educational app for
financial empowerment.
Scope
Mobile & Web Design
Roles
UX & UI Designer
Time
Jan to March 2022
Tools
Google Survey
Figma
Usability Hub
Excel
Pen & Paper
Word
Zoom
Slack
Miro
Helio
.png)
Overview
A reward-approach app that merges location tracking technology and gamification to rewire the act of littering.
What's the story?
Objective
Overview
A financial learning and banking platform in marriage.
Kale was created as an educational financial platform for young adults to learn more about finances. The goal was to make Kale a reliable financial app that young adults can depend on for unbiased insights to reach their savings and investment goals.
What's the story?
Problem Context
Young millennials are starting their first jobs post-graduation from universities without much financial know-how, making it difficult to navigate through their own personal assets. While there are copious number of apps that do banking and others that handle mainly investments, none addresses the need for an educational feature.
Objective
Kale is the platform that does it all with an emphasis on the impartial access to financial knowledge. It is an all-encompassing tool for users to bank, invest, save, and learn.
Design Thinking Process
User Surveys
User Interviews
Competitive Analysis
Affinity Mapping
User Personas
User Journeys
Business Requirement
User Flows
Site Map
Wireframes
Mid-Fidelity Prototypes
Usability Testing
Usability Testing Analysis
Preference Testing
Iterations
Design Documentation
Design Collaboration
High-Fidelity Prototype
Discovery
Primary and secondary research are the initial focus in the discovery phase to uncover potential user needs and to validate the hypothesized solution for the project problem.
Discovery Focus
1 | What quantitative data can we derive from the user survey to support the project's overall direction?
2 | What insights and information would a competitive analysis help uncover?
3 | How does the hypothesized solution measure up as a viable concept?
4 | How would user interviews provide further qualitative data that can be incorporated for the next phase?
Discovery Steps
Survey
Interview &
Concept Testing
Competitive Analysis
Survey
Insights
Script
Questions
Insights
Overview
Key Objectives
Overall Strategy
Market Advantage
Marketing Profile
SWOT Analysis
UX Analysis
Survey
A survey was conducted with 20 respondents to determine users' financial goals, define commonly used financial platform features, and discover reasons why users use current financial platforms.
84.6%
have an active bank account to perform basic banking functions.
70% +
evaluate their financial knowledge between the range of below average to average.
76.9%
believe a financial app is a must have including a savings plan.
100%
say they are most likely going to try an app that improves their financial literacy.
+ Most respondents have migrated from in-person, traditional banking to online banking in the last few years.
+ Almost all respondents say that beyond the basic functions they use on their current apps, they don't necessarily know how to utilize the additional features.
Interview &
Concept Testing
Further concept testing and interviews were conducted with 3 participants to identify current user pain points and frustrations and to explore an educational approach to a financial platform as a user need.
"I realize I don't have much savings because it's mostly an afterthought."
- Jessica, 32
"I just find it hard for students to not learn anything about finance in school and then get bombarded into work, real life, savings, etc. while expecting us to get it together."
- Daniel, 20
"Nobody really taught me about finances."
"It's hard to save in Toronto, a city with such high cost of living. I'm literally doing whatever I can for my future but it's hard."
- David, 31
Key Insights
User Need – Financial literacy seems to be a common theme with all three interviewees agreeing that a financial platform that educates being a great concept.
Target Audience – Despite interviewees’ employment and age difference, all of them use digital financial apps frequently but rarely venture into the “additional” features.
Problem Consensus – Instead of another banking platform, the project recognizes the value in building an education feature.
Competitive Analysis
In-depth analysis on 2 direct competitors, PayPal and Zelle, for their strengths and weaknesses to address three main questions:
1. What are they selling?
2. What are they communicating through their product?
3. What are they missing in their messaging, product, and overall offering?
Overview
Key Objectives
All-inclusive and secure app that allows users to send money internationally.
PayPal
- Business model concentrates on connectivity
- Replaces standard banks with ease of transfer
- Users can monitor transactions for security reassurance
Overall Strategy
- Market leader in digital transfers and payments
- Strong market foundation with established users
- Feature difference for Apple & Android users
Zelle
Digital platform where users can send money to others without designated banking institutions.
- Business model concentrates on connectivity
- Replaces standard US banks with ease of transfer
- Capitalizes on the no-fee selling point
- One of the few platforms that focuses connectivity
- Services users bridging banks & credit unions in US
- No-fee promise compared to competitors
Market
Advantage
- Spearheaded into the market since launch in 1998
- Apple's 4.8 rating and Android's 4.4 rating suggest a prominent preferred method of payments & transfers
- Huge market share with PayPal (acquisitions and market listing)
- Processes high money transfer volume
- Owned by Early Warning Services (across US banks & credit unions without fees)
- Apple 4.8 rating and Android 4.3 rating; highly popular platform
Marketing
Profile
- Ranked 134th on the 2021 Fortune 500 (US)
- Pandemic accelerated growth (78% increase in stock value since Oct 2020)
- Remained top digital platform with little deviation
- Simple & intuitive design which aligns with business model
- Further reach in the US (compared to Venmo)
- Marketed as a no-fee app
- Faster transfer processing
- Straight-forward business model to address the need of money transfers in the US
SWOT Analysis
Strengths
- Industry leader with years of business experience
- Various array of acquisitions
- Household name users have learned to trust
- Business model that meets a universal need
Strengths
- Backed by Early Warning Services
- Array of US banks and credit unions
- No-fee and fast transfers
- Unregistered users can validate with emails
Opportunities
- Standardizing features for both Apple & Android users
- Possible untapped market with crypto & NFT's
Opportunities
- Zelle can tap into the merchant market
- Possible expansion into in-store & online purchases
Weaknesses
- Might not be as secured suggested by some reviews
- Some markets in the world can't be reached
- Interface could use more visual appeal
Weaknesses
- Only available in the US, operating in US currency
- Users can't cancel transfers
- Needs a more secure way to contain user privacy
Threats
-Huge target for hackers
- Concerns regarding unethical dealings
- Risk of company wide malfunction/bug that could disrupt businesses and lead to mistrust
Threats
- Target for hackers & fraud
- Trust within the platform with users
- Network of banks and credit unions susceptible to cyber security risks
UX Analysis
Usability
- No option for users to test the app before sign up
- Confusing home page with different function layers
- Users can see in details of their account balance
Layout
- Structured groupings of sections that belong
- No labelling in the navigation bar
- Real estate should focus on user account details
- Organized layout but visually monotone
Navigation Structure
- Nav bar at bottom; handy for one-hand use
- Icons need labelling for less cognitive load
- Wallet section doesn't have a back button
- Possibility to add "recent transactions" for users
Compatibility
- Available on all Apple & Android products
- Supports a responsive platform for all devices
Differentiation
- Dominant player with an unfair advantage
- Business model differentiates from others emphasizing on ease of transfers/payments but lacks visual appeal
- Apple users have more features than Android users
Calls to Action
- Encourages users to immediately sign up/log in after download
- Home screen has CTA buttons to start sending money, donate to charities, and download another PayPal service
- No CTA button for users to monitor account balances or transfers
Usability
- No option for users to test the app before sign up
- Confusing home page with different function layers
- Users can see in details of their account balance
Layout
- Structured groupings of sections that belong
- No labelling in the navigation bar
- Real estate should focus on user account details
- Organized layout but visually monotone
Navigation Structure
- Nav bar at bottom; handy for one-hand use
- Icons need labelling for less cognitive load
- Wallet section doesn't have a back button
- Possibility to add "recent transactions" for users
Compatibility
- Available on all Apple & Android products
- Supports a responsive platform for all devices
Differentiation
- Dominant player with an unfair advantage
- Business model differentiates from others emphasizing on ease of transfers/payments but lacks visual appeal
- Apple users have more features than Android users
Calls to Action
- Encourages users to immediately sign up/log in after download
- Home screen has CTA buttons to start sending money, donate to charities, and download another PayPal service
- No CTA button for users to monitor account balances or transfers
Define
Drawing on the data collected in discovery phase, the project takes on the define phase to carve out opportunities and features based on user needs.
Define Focus
1 | What can we establish as key information from the interviews?
2 | Who are we designing for?
3 | What will our user journeys reflect?
4 | How can we address user needs?
Define Steps
Insights
User Personas
User Journeys
Business Requirement Document
Affinity Mapping
Profile
Every Habits
Goals & Needs
Frustrations
Motivations
Device & Internet
Quotes
Scenario
Goals & Expectations
Phases & Tasks
Thoughts
Emotions
Opportunities
Objectives
Scope
Functional Requirements
Delivery Schedule
Project Deliverables
Insights
Summarizing interview data based on users' life habits (behaviours), financial mindset (attitudes), life values (user goals), financial frustrations, and common app features.
.png)
User Personas
Crafting 2 user personas based on collected information and user needs in alignment with project's direction and problem statement.
Age: 21
Location: Vancouver, BC
Ethnicity: Persian
Education: UBC recent grad
Occupation: PT Sales Associate
Marital Status: Single
"After graduating from UBC and studying mathematics for 4 years, I realized I know very little about finances."
"My parents have been my primary source of financial support. They have taught me what I know so far about money."
Jamie - "The Recent Graduate"
About
Jamie recently graduated from UBC majoring in mathematics. She has been working in Aritzia for the last 3 years to pay for her daily expenses. Instead of living on residence, she opted to live at home with her parents to save.
Everyday Habits
- Uses a fitness tracker; avid runner
- Commutes by bike or by bus around town
- Enjoys visiting her local cafe every week
Goals & Needs
- Needs to save as much as possible
- Has a busy schedule
- Looking to achieve financial independence from her parents
Frustrations
- No financial education in school
- Too many financial platforms
- Doesn't know where to find the most reliable sources
Motivations
- Currently saving to get a car in the next year
- Looking to get a job as a math tutor currently
- Has plans to pursue a master's degree in computer science
Device & Internet Usage
- Uses an iPhone 4
- Messaging platforms: WhatsApp, iPhone messaging
- Socials: TikTok, Instagram, Twitter
- Games: Best Fiends, Wordle
- Banking: TD App
Age: 30
Location: Toronto, ON
Ethnicity: Canadian
Education: UT Master's Program
Occupation: Cafe Owner
Marital Status: Single
"My brain just can't grasp finance.."
"I wish I'm more finance-savvy especially given the fact I'm a business owner and I'm in a master's program."
Marcus - "The Future Planner"
About
Marcus opened his cafe a year ago in downtown Toronto. He is great with business but has hired other professionals with his finances. He doesn’t like finance and prefers not to handle them himself.
Everyday Habits
- Works a hectic schedule
- Splits his time between his cafe and studies
- Enrolled in Business Master's program
Goals & Needs
- Wants to expand his cafe with franchises
- Owns his condo unit but wants more space
- Knows he needs to save but finds it hard to
Frustrations
- Struggles with understanding finances
- Wishes financial management was simpler
- Hasn't found an app that's efficient to use
Motivations
- Plans to graduate in master's in 3 years
- Needs to save for cafe expansion
- Needs to save for a bigger living space
Device & Internet Usage
- Uses a Google Pixel (including business)
- Messaging platforms: WhatsApp, Signal
- Socials: Instagram
- News: CNN, CBC
- Banking: WealthSimple, RBC
User Journeys
Mapping out user journeys to identify user personas' mental models based on their individual goals. Further user opportunities were explored to direct project scope.
Phases & Tasks
Thoughts
Emotions
Opportunities
Jamie - "The Recent Graduate"
Scenario
Jamie is looking to save to get her own car by next year and is setting up a savings plan but has issues deciphering what most of the financial jargon are.
Goals & Expectations
- Savings goal to get a car
- Understanding of financial terminologies
- Simple & intuitive approach to make decisions about her savings
Learns to Use App
- Downloads app
- Goes through onboarding
- Decides if it's worth signing up
- Navigates through app
"I hope this app is worth the sign up. The onboarding talks about savings so I'll give it a try."
Customizes Savings Plan
- Taps "Save" on nav bar
- Scans screen for information
- Fills in & sets up savings plan according to her needs
"I want to be able to purchase my own car by next year. Hopefully Kale can help me achieve this."
Confirms Plan & Sets Goals
- Reviews entered information
- Confirms plan
- Kale tailors plan accordingly
"It is helpful that Kale can teach me how to set up a plan rather than have me contact an advisor."
Skeptical about the app but will give it a try since it's free
Overwhelmed with the savings goal required information and considers abandoning it
Relieved once the information is simple to fill; feels that she can customize her plan easily
Empowered when she realizes how easy the process is and goes through the set-up stress free
Motivated once all information have been filled; feels satisfied and ready to start saving
- Showcases & captures users' motivations during onboarding
- Aesthetically intuitive design
- Make it easy for users
- Users can see value in custom savings plan
- Process should include a range of details but not overwhelming
- Informed way to educate users
- Options for users to learn more
- Educate users through the process
- Collect user feedback
Phases & Tasks
Thoughts
Emotions
Opportunities
Marcus - "The Future Planner"
Scenario
Marcus is a successful cafe/business owner and knows a wealth of business knowledge, but he finds it hard and time-consuming to understand and deal with personal finances on multiple apps.
Goals & Expectations
- A centralized app for basic banking
- Platform to learn about investments
- Be more diligent when it comes to spending
Checks Account Balance
- Opens account overview
- Taps to view transaction history
- Scans through transactions
Monitors Transactions
- Notices the filter button
- Taps dropdown filter for options
- Filters for miscellaneous spending
Transfers Funds to Investment
- Account indicates available funds
- Investment modal suggests investment & market trends
- Takes note of investment advice
- Allocates funds to save & invest
"Instead of going through multiple apps, it's easier when it's centralized to monitor my finances."
"Being able to see how you spend your money is an important tool."
"A lot of my financial apps often tell me about their latest investments for their own business gains."
Satisfied being able to manage finances in one spot, saving time
Overwhelmed seeing spending overview
Engaged with the app once user efficiency is valued
Pleased with the search and filter function
Relieved when he realized he wasn't pressured to invest
Justified sign up with app; educational and unbiased investment options
- Overview should have enough information without being overbearing
- Further details can be accessed
- Account priority can be customized
- Users can get overwhelmed with their spending information
- Combating these user feelings by chunking data & making it digestible
- Educational aspect with unbiased information
- Simplify process to limit pain points
- Congratulate users with motivations and surprises
Business
Requirement
Document
Summarizing platform's objectives, scope, functional requirements, and delivery schedule to stay on task with project deliverables.
Ideate
Structuring the platform with regards to its information architecture that would best serve overall functionality and usability.
Ideate Focus
1 | What specific user tasks are important for our user personas?
2 | How does Kale's information architecture look like?
3 | How do the wireframes cater to the problem statement?
Ideate Steps
User Flows
Site Map
Sketches & Wireframes
Personas' Tasks
Card Sort
Similarity Matrix
Sitemap
Mid-Fidelity Wireframes
User Flows
User flows were created to relate to the user personas in terms of tasks in alignment specific goals, serving as the starting foundation for the platform.
Sitemap
A sitemap was refined through a close card sorting exercise involving 5 participants to explore feature groupings and labelling.
Sketches & Wireframes
Pen and paper sketches were drawn to lay down the design foundations for Kale followed by mid-fidelity wireframes to be used for testing.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Testing
Testing the mid-fidelity prototype to gauge usability through moderated in-person, moderated remote, and preference tests. Further user needs and opportunities were also explored through testing.
Testing Focus
1 | What qualitative and quantitative data are uncovered through testing?
3 | What features are required to be modified for better usability?
2 | How do we leverage the data to improve Kale's key features?
4 | How can preference testing determine the design of the platform?
Testing Steps
Usability Testing
Usability Testing Analysis
Preference Testing
Consent Form
Recruitment Emails
Usability Test Plan
Usability Test Script
Testing Analysis
Updated Test Plan
Updated Test Report
Updated Prototype
Testing Components
Test Results
Usability Testing
2 moderated in-person testing and 4 moderated remote testing via Zoom were conducted and recorded for further analysis of verbal feedback, body language, and succession rate.
Usability Testing
Analysis
Congregating collected data from all usability testing into affinity maps and analyzing findings into rainbow spreadsheet and satisfaction metrics to discover usability features, pain points, and user frustrations.
.png)
Preference Testing
After improving Kale's key features, a preference testing was conducted with 10 participants to vote and offer their rationale on their preferred screen choices.
Implement
Making design iterations according to visual design principles, material design guidelines, responsiveness, and accessibility across both web and mobile platforms. Finalizing Kale’s design documentation and collaborating feedback for future designs.
Implement Focus
1 | How can visual design principles and Material Design improve usability?
2 | What design fundamentals are important for responsiveness?
3 | What are Kale's design guidelines?
Implement Steps
Iterations
Design Documentation
Design Collaboration
Visual Design
Material Design
Responsiveness
Accessibility
Design Documentation
Design Deliverables
Design Feedback
Iterations
Implementing visual design principles, responsiveness, accessibility, and Material Design to further Kale's overall usability and UI experience.
Responsive Designs
Mobile to Web - Account Overview
.png)
(3).png)
Design Documentation
Documenting Kale's UI specifics and organizing design deliverables for ease of future iterations.
.png)
Design Collaborations
Gathering and filtering design feedback from 5 other UX and UI designers as a method to improve Kale.
Prototype
Testing the mid-fidelity prototype to gauge usability through moderated in-person, moderated remote, and preference tests. Further user needs and opportunities were also explored through testing.
Prototype Focus
1 | How have the iteration processes change over the course of Kale's evolution?
2 | Has Kale offer a UX design solution to its problem?
Prototype Steps
Kale's UX Journey
Prototype
Iteration Reflections
Prototype Screens
Prototype Figma Link
UX Journey
Defining the major iterations that shaped Kale - 1. Information Architecture Sitemap, 2. Design Patterns of Onboarding, 3. Usability Guidelines of Kale's Copywrite.
Information Architecture
Sitemap
Initial Sitemap
Main menu with 4 sub-features which placed focus more on providing banking functions:
Education, Pay, Transfer, and Invest.
Revised Sitemap
After conducting an open card sort, Kale highlights its educational approach with a main menu with 4 sub-features:
Learn, Bank, Save, and Invest.
.png)
Design Patterns
Onboarding
Initial Onboarding
Consisted of 7 separate screens for mobile and 6 for web which increased time on task and didn't promote usability. Users were also required to sign up before onboarding.
Revised Onboarding
After analyzing the feedback and quantitative data from usability tests, the mobile onboarding process has been condensed to 5 screens, highlighting Kale's features. Sign-up option is made available after a preview through onboarding.
Usability Guidelines
Copywrite
Initial Copywrite
Inconsistent labelling in navigation bar that didn't highlight Kale's educational approach - Education, Banking, and Invest.
Revised Copywrite
After conducting the preference tests, it was noted that a consistent labelling with verb choices is key in conjunction with onboarding - Learn, Bank, Save, and Invest.
Prototype
.png)
Showcasing Kale as an interactive prototype through Figma.
Takeaways
Reflecting on the UX design journey for Kale in terms of what I’ve learned, what I can improve on, and finally, why I started Kale in the first place.
Learnings
I have learned so much through the construction of Kale, from conducting user research through usability testing to implementing Material Design Guidelines to collaborating with others to further improve Kale, it has been such a gratifying journey.
Some of my key takeaways from this project I want to highlight include the following. Learning to let go some of my designs and ideas because they just weren't working or serving usability purposes. A lot of Kale comprised of iterations that were based on qualitative and quantitative data that were collected through testing. Being a UX designer, it's difficult to abandon a certain direction of your project because of attachment and time invested. However, I had to remind myself to follow data and to rationalize the "why".
After many iterations, I know that Kale is still in progress. I have learned to appreciate the UX journey that Kale is undergoing and will undergo. All the iterations, whether it's the design fundamentals or the information architecture, will continuously evolve over time with respect to usability trends and preferences. The key to future projects and further improvements is for me to grow and evolve.
Kale can certainly benefit from more iterations that cater to accessibility or to visual aesthetic. As a UX designer, I have a high-level plan to make Kale better. This includes leveraging more usability and preference testing for those who have difficulty seeing. Improvements like color contrast or using identifiable icons throughout Kale would be helpful.
My next step would to compose Kale's web interface. Geared with the information collected through the mobile version, this process won't be as drawn-out. However, the web interface will also have its challenges as the screen real estate is larger and features such as swiping or tapping aren't present. Keeping those differences in mind, I will need to fully understand how to approach the web design through these guidelines.
My "WHY"
Developing Kale was a long process in which I took on the roles of being a UX designer, researcher, writer, and manager. It was extremely rewarding to go through all the components that have congregated to make Kale a final interactive prototype.
My UX design knowledge has blossomed into a passion that I know will serve as my lifelong career. I also want my designs to correspond to my values of doing good. All my projects are all journeys that I have gone through and am extremely proud of.
With Kale, I hope to empower young adults and all users alike to become financially literate to make better personal financial decisions that would have a positive lasting impact.