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
New Macbook Pro Mockup Front View(2).png
iPhone 13 Mockup.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.

Define - Affinity Map(1).png
User Personas

Crafting 2 user personas based on collected information and user needs in alignment with project's direction and problem statement.

Image by Raul Angel

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

Image by Quaid Lagan

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.

Image by Raul Angel

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

Image by Quaid Lagan

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.

Flowchart.jpg
Sitemap

A sitemap was refined through a close card sorting exercise involving 5 participants to explore feature groupings and labelling.

Sitemap.png
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.

Sign Up (Onboard Mobile).png
Account Overview (Account Overview Flow #1).png
Menu (Update Profile Flow #2).png
Account Details (Account Overview Flow #1).png
Savings Plan (Set Savings Plan Flow #3).png
Completed Savings Plan (Set Savings Plan Flow #3).png
Profile (Update Profile Flow #2).png
Sign Up (Onboard Web).png
Account Overview (Account Overview Onboard Flow #1).png
Completed Savings Plan (Set Savings Plan Onboard Flow #3).png
Profile (Update Profile Onboard Flow #2).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.

Test - Affinity Map(1).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

BANK OVERVIEW(1).png
Account Overview (Account Overview Onboard Flow #1)(3).png
Design Documentation

Documenting Kale's UI specifics and organizing design deliverables for ease of future iterations.

Group 12(1).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.

Sitemap Before.png

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.

Test - Affinity Map(1).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.

Onboarding Before.png

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.

Onboard After.png

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
Intro (Onboard Mobile).png
BANK OVERVIEW.png
Bank Overview _ 1.png
Bank Overview _ 2.png

Showcasing Kale as an interactive prototype through Figma.

INVEST OVERVIEW.png
Invest _ 1.png
SAVE OVERVIEW.png
Save _ 2.png
LEARN OVERVIEW.png
 
 
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.

Other Projects