top of page

DAL

Project Type

Mobile App

Date

November 2021 - November 2022

Role

UX Designer

Mobile mockup of home page

Tools

figma logo

Figma

sketch logo

Sketch

Crumpled Brown Paper_edited_edited_edited.jpg
Dal is a digital wallet app for users striving to be more financially responsible. They’re provided a secure and helpful way to track, save, and budget their money as they work towards their personal goals.

Overview

Goal

The goal of this project was to create a seamless, easy to use app that is helpful in users daily lives. Users will be able to use DAL’s own banking system and sync their other banks/cards to be able to track all their finances in one place.

Research

Competitive analysis and user interviews were conducted to gain insight into the strengths and weaknesses of digital wallets already in the market and understand potential user needs.
Competitive Analysis
Crumpled Brown Paper_edited_edited_edited_edited.jpg

Competetive Analysis

SWOT profiles were made after analyzing GooglePay and the Wally app. Based on that, I came to the following conclusions about the opportunities DAL has to set itself apart from the competition.

Opportunities

  • No transaction fees

  • Focus on features for financial insights (i.e Budgeting tips/tools, charts, quizzes)

  • Emphasis on security but does not require user to give highly sensitive information like their social security #

  • An app that allows users to create multiple profiles under one account

  • An app that has more personalized UI

User Interviews
Crumpled Brown Paper_edited_edited_edited_edited.jpg

User Interviews

Four participants in total were interviewed. One interview was conducted via zoom. Three interviews were held in person. The average duration of the interviews was about thirty minutes.

Pain Points

Tracking Finances

Users have difficulty saving money and keeping track of when they’re overspending.

Integration

Users want to have the ability to view and track all their finances in one place.

Financial Goals

Users have financial goals they want to achieve and need access to resources that can help them reach their goals.

Education

Users want to have access to financial education that isn’t hard to understand or keep up with.

Solutions

Budgeting Features

Adding budgeting features and notifications so users can feel more aware.

Syncing banks or cards

The ability to sync all of the users banks or cards in one place seamlessly.

Variety of Features

Features that help users reach every type of financial goal in each stage of their lives.

Easy Learning

Providing users with tips and blogs that are easy to access and understand.

user persona picture

Age: 34
Work: X-Ray Technologist
Family: Married, No kids
Location: El Paso, Texas

"Buying a house and planning for a baby are exciting but financially stressful goals. I want an app that takes some of that weight off our shoulders and helps us easily plan and organize our expenses.”

User Persona
Crumpled Brown Paper_edited_edited_edited_edited.jpg

User Persona

A user persona was created based on the information gathered from the competitive analysis and user interviews. It represents target users and allows a better understanding of the target audience.

Akiva

Bio

Akiva works full time at the hospital as an x-ray technologist. She loves her job and her husband of five years. They're both excited about their decision to move from their apartment and into a house so they can start a family. Akiva wants to make sure they are stable enough to do so and needs an effective way to manage and monitor all their expenses.

Goals

  • Plan estimates for future expenses

  • Set realistic budgets

  • Effectively save money

  • Have all her cards and transactions synced in one place

Frustrations

  • Apps that are too basic-lacking useful features

  • Cluttered app interfaces

  • Transaction fees

  • Losing bank cards

Motivation

Future ventures

Growing family

Stability

Current Apps Used

cashapp, nerdwallet, zelle, apple wallet logos
User Journey Map
Crumpled Brown Paper_edited_edited_edited_edited.jpg

User Journey Map

A user journey map was created to visually illustrate and gain insight into the user flow through the app

Phases

Tasks

Thoughts

Feelings

Opportunities

Akiva

user persona picture

Age: 34
Work: X-Ray Technologist
Family: Married, No kids
Location: El Paso, Texas

Scenario

Akiva wants to cut back on unnecessary spending so her and her husband can save up enough to buy the house they’ve been eyeing

Goals

  • Set and follow realistic budget

  • Plan for future expenses

  • Manage and organize expenses efficiently

Check expense tracker

Filter monthly recurring phases

Cancel unused subscriptions

  • Click onto app

  • Go to Insights tab

  • View charts of last five months of expenses

  • Find the filter button on top right of chart

  • Select recurring payments

  • View filtered results

  • Auto calculate how much is saved yearly without certain subscriptions

  • Send results to husband and discuss

  • Cancel subscriptions used less than twice a month

Being able to swipe to switch tabs would be more satisfying

I want more filter options so I can get more specific results

The charts are so easy to view and understand

The auto-calculate function saves me so much time!

Add option to swipe through tabs

Include more filter option to increase specificity

Being able to compare estimations would save users time and make decision making a bit easier

Design

Low and Mid-Fidelity Wireframes & Prototypes of DAL’s core pages and features were made. Focus was put into making the app organized and easy to use, not cluttered or confusing.
Low-Fidelity Wireframes
Crumpled Brown Paper_edited_edited_edited_edited.jpg

Low-Fidelity Wireframes

Home low-fidelity wireframe

Home

Insights low-fidelity wireframe

Insights

Shopping low-fidelity wireframe

Shopping

Mid-Fidelity Wireframes
Crumpled Brown Paper_edited_edited_edited_edited.jpg

Mid-Fidelity Wireframes

Home mid-fidelity wireframe

Home

Link bank search mid-fidelity wireframe

Link bank

Wallet with added bank info mid-fidelity wireframe

Wallet

Checking Accessibility Standards

Focusing on accessibility standards was a main priority while refining the app. Color contrasts, text sizing and spacing were assessed with a WCAG 2.1 Compliance Checker & WCAG 2.1 Guidelines.
The following changes to the colors were made in order to increase readability to users with visual impairments. The contrast ratio reached each time was at least 4.5:1.
Previous Version
Screenshot 2024-04-12 at 8.53.35 PM.png

#848484

Updated Version
Screenshot 2024-04-12 at 8.53.48 PM.png

#848484

Screenshot 2024-04-12 at 8.53_edited.jpg
Previous Version
Screenshot 2024-04-12 at 9_edited_edited

#9DAEE9

Updated Version
Screenshot 2024-04-12 at 9.24_edited.jpg

#6071B7

Screenshot 2024-04-12 at 9.24_edited.jpg
Using color to complement information, the error message has the familiar icon and red color correlated to error messages. Error is also labeled in writing. This ensures that if users can’t see the color red, or have a language impairment, they will still be able to recognize the message.
Sign in error_edited.jpg
Visual & Auditory Accessibility
For future prospective blog and learning aspects of the app, text-to-speech and subtitles/written scripts will be added to aid users with visual and/or auditory impairments as there will be potentially long text and videos.

Testing

A usability test, A/B preference test, and peer reviews were conducted to gauge usability and areas of improvement based on DAL’s first and second version high fidelity prototype.

Usability Test

  • Users thought they would be able to send money through the Wallet page

  • Users want the Wallet page to be organized better

  • Users felt splitting transactions was very confusing and frustrating to follow

A/B Preference Test

  • Users prefer screens that look more modern and polished

  • Open space screens called users attentions

Crumpled Brown Paper_edited_edited_edited_edited.jpg

High-Fidelity Wireframes

DAL’s high-fidelity prototype was refined based on user and peer feedback. Accessibility was also considered and applied to color contrasts and text/icon sizing.
Introduction screen 1 high-fidelity wireframe
Introduction screen 2 high-fidelity wireframe
Introduction screen 3 high-fidelity wireframe

Welcome Page

Simple page new users can scroll and get a better idea of what’s included in the app.

Errors

Errors are notified through text, color, and icon for increased accessibility.

Sign in error high-fidelity wireframe
Home high-fidelity wireframe

Home Page

The home page is kept simple and contains access to users Wallet, Shortcuts, Alerts, and Activity.

Confirmation

The checkmark animation and text is used to indicate confirmations.

Bank linked confirmation high-fidelity wireframe
Wallet high-fidelity wireframe

Wallet

The wallet has access to stocks and send/request. The banks and cards are organized in a way users can easily visualize all their information, but can click on to view specifics.

Send/Request

Users can toggle between sending/requesting funds from their contacts, scanning a QR code, or searching for usernames.

Selected recipients high-fidelity wireframe
Authentication Confirmed high-fidelity wireframe

Security

Users can choose to use Face ID authentication or a passcode of their choice.

Insights

Users can visualize and read insights of their finances for all their accounts or filter for a specific search.

Filtered insights high-fidelity wireframe
Insights high-fidelity wireframe
Specified Insights high-fidelity wireframe
Shopping list high-fidelity wireframe
Coupon page high-fidelity wireframe
Item tracker high-fidelity wireframe

Shopping

Users can use the features in this tab to organize shopping lists and coupons, while keeping their budget in mind.

Crumpled Brown Paper_edited_edited_edited_edited.jpg

Design in Action

Woman holding mobile mockup
Walking with mobile mockup
Mobile on airplane
Person in red sweater holding a phone mockup
bottom of page