Financial App

Financial case study during Bethel Tech Bootcamp, by Eva Barnhart, to prove and disprove biases centered around millennials and finances. This app hosts encouraging stories, and bite sized tips.

Date Completed
November 1, 2021
Project Details
UX Case Study
GOALS & OBJECTIVES
Goals
1
Research

Conduct competitive analysis, research and test local transit app, and survey local & non-local public transport users

2
Test

Perform card sorting activities to determine information architecture in order to increase user experience.

3
Design

Design a delightful experience based on the core features that users want and need most.

Research

In our research, we wanted to understand how millennials feel about finances, and gain insight into what they do to set and achieve their financial goals.

research

Research Questions

We crafted these four core questions in order to understand what people are experiencing, and why they are experiencing it.

1. What are the most common tools that millennials use to manage & grow in their finances?
2. Do millennials feel intimidated by the home buying process?
3. How do millenials grow their wealth?
4. Do millennials buy into what the older generation is saying about financial discipline?

Goals

Goals & Objectives

1

Create

Create a way for people to learn about ocean conditions and beach safety in a quick and relevant way.

1

Create

Create a way for people to learn about ocean conditions and beach safety in a quick and relevant way.

2

Design

Design a way for people to discover time frames at beaches that have the conditions that match their desires.

3

Decrease

Decrease the number of people entering the ocean in spots or conditions that are far to dangerous for their skill level.

Background

Statistical Evidence

Stats from research, and user research.

research

Research

The need for beach safety education is clearly there, so in my research I set out to understand if people see the need to learn about ocean safety. I discovered their experiences through surveys and interviews, and then synthesized the data to inform the direction of this project.

250
Potential customers surveyed.
5
Interviews from 3 different countries.
4
Key insights that were established directly from the data, before the deisgn phase began.
research

Key Insights

Key Insight #1

Millennials wish they knew how to successfully increase their credit score, because they have learned the hard way by making grave mistakes.

Key Insight #2

Most millennials are interested in investing, and learning more about diversifying their portfolio, due to encouragement from their family, mentors and friends.

Key Insight #3

The majority of people that we surveyed said that they are currently trying to learn more about finances in general because they want to have wisdom rather than continuing to learn things the hard way

research

User Personas

No items found.
research

Competitive Analysis

The forecasting apps that I studied are most useful for experienced beachgoers, like boaters, surfers and fishermen, who already understand what type of conditions are best for them and how to interpret the information.

The First Aid Fast App has a very simple goal- provide people with an  easy way to respond to an emergency, with step by step, concise info.

Incredibly helpful for people to pick a trail best suited for them based on accessibility, activity type and experience level. Does not include very many details about beaches.

The Problem

Millennials need a value-oriented, trustworthy and time efficient resource to learn more about financial planning and investing. Millenials value being generous, and good stewards of finances, but are lacking tools.

Information Architecture

In order to create the best information architecture for an intuitive experience for our users, I needed to test the app categories by performing card sorting activities with 8 people. From there, I was able to create clear and intuitive site map and user flows.

Information Architecture

User Flows

User flows allowed me to test out and refine the flow through the core features, to ensure that each click a user will make is significant.

Goal #1

Carissa needs to understand interest rates, credit, and how to get out of debt.

Goal #2

Jen wants to save time and not have to read a bunch of articles and figure out what info is best for her. She and her family need a mentor who can tailor advice for them.

Information Architecture

Site Map

I iterated the site map on paper and in figma in order to create the ideal experience.

Design

I designed mid fidelity wireframes in order to understand the user experience alone, without the added effects that color and UI has on our users such as emotion.

Information Architecture

Mid Fidelity Wireframes

Style Guide

Colors

Primary Colors
Sunny Blue
Pine Green
Barely White
Secondary Colors
Midnight
Charcoal
Style guide

Buttons

Primary Buttons

343 Width, 64 height
Rounded at 3pts
White 20pt font
Medium, IBM Plex Sans
Pine Green Linear, Subtle gradient

343 Width, 64 height
Rounded at 3pts
White Fill, Black stroke at 2 pts
Black 20pt font
Medium, IBM Plex Sans

Secondary Buttons

145 Width, 48 height
Rounded at 3pts
White 20pt font
Medium, IBM Plex Sans
Pine Green Linear, Subtle gradient

145 Width, 48 height
Rounded at 3pts
White 20pt font
Medium, IBM Plex Sans
Charcoal fill

User experience

Mid Fidelity Wireframes

user experience

Style Guide

Up to this point in the project, I had been thinking and iterating the logo, colors, and typography. These are the choices that I made to guide the consistent interface and experience of the app and the brand of Beach Wise.

Logo

The Beach Wise logo encompasses the colors of shallow and deeper water of the ocean, allowing our users to imagine diving into deeper waters. The word “wise” with the wave breaking in the W, allows our users to recognize that becoming wise in the ocean is important. The ocean topographical lines show that there is more to the beach than what meets the eye.

Style Guide

Type

IBM Plex Sans

Aa Bb Cc Dd

Headline 1

Size: 25px
Weight: Medium
Line Height: Auto

Headline 2

Size: 25px
Weight: regular
Line Height: Auto

Title 1

Size: 20px
Weight: Medium
Line Height: Auto

Title 2

Size: 16 px
Weight: Regular
Line Height: Auro

Body

Size: 18px
Weight: Regular
Line Height: Auto

STYLE guide
Icons and Drop Shadows
Drop Shadows and rectangles

20% black opacity drop shadow
3 pt rounded rectangle
Icons
The MVP SOlution

Core Features

I want to give our users an app that will be easy to navigate to pertinent, bite sized information about budgeting, saving, investing, and getting out of debt. I want it to be a fun and encouraging way to be inspired and empowered about their own finances.

Home Screen
Easy to understand, this home screen invites the users to search where they want to go. The default location is always their current location, but everything is easily adjusted with a tap.
Bus Routes
With one intuitive tap, the user is able to navigate to the Bus Routes & Stations page. The user can zoom into the map, and view stations near them by clicking the universal “near me” arrow. The bus routes are scrollable from left to right, until the user needs to view more. When the user wants to see a route expanded, they simply need to click on the name “AC” for example.
Notifications
Users can easily toggle on notifications on any search. The main feature the user will use this for, is when they want to be at the bus stop at a certain time; they will be able to plan on being at the bus stop at the planned time, but if the bus is delayed, they will be notified by how much. This will give them peace of mind, and increased satisfaction while using public transport.
Reloadable Epass
The epass is easily reloadable to create a seamless process of boarding to riding the bus in Redding. The final step to reload the epass is to pay with a card on file. The process to confirm, or add a card on the file is the same for any other purchases in app, creating consistency for the user.
Share a Trip
Our favorite feature, people can share the exact details of their trip, such as location on a map with a loved one. This is to increase safety measures and make the customer feel secure.
Design

Wireframe sketches

I sketched out wireframes for each page as the first step in my iterating process
Design

Mid Fidelity Core Features

Core features
Dashboard

The main dashboard is an overview of each of the app’s core features that make up the minimum viable product:

- A link to all resources and articles
- A Free financial coaching offering
- The ability to search for a specific tip
- A newsfeed with encouraging stories
- The ability to share your own encouraging stories
- The community overview, so that the user can add new friends.

We will now go over each of these expanded core features. 30 mid fidelity wireframes were created.

Core features
Articles

One of the main things that will change millennials financial status and help them reach their goals is education. Our app features budgeting, credit, vehicle and home financing, and investment resources. Users can also save articles to easily find it later.

Core features
Encouraging Story of the Day

In our research we found that millennials can get overwhelmed by information, so we wanted to include an encouraging story of the day feature front and center, in order to highlight real people having real success by implementing tools that they learn through our app. Users can also create a post.

Core features
Coaching

The app is free, and allows for a free 30 minutes clarity coaching session on finances. If the user decides they like coaching and want to continue, they are able to virtually book a financial coach/advisor to help them meet their specific goals.

Core features
Newsfeed

Our research showed us that millennials don’t want to learn things the hard way, or the long way. A solution we came up with was to connect millennials in their financial stories to encourage and inspire each other. The newsfeed is designed to be a place where users scroll and can quickly skim through and digest other user’s stories, and the one minute quick reads.

Core features
Live Teachings & Recordings

Our app also hosts live streams once a month for users to ask questions, or to watch an expert interview. Users can access past recordings through the resources tab.

home screen

Discover Beaches

The home screen is the explore page, where users can scroll through beach options near them, search a beach or city, and apply filters by activity and preference type. They will also get their initial touch point with the learning hub, to “discover true ocean confidence”.

Individual Beach Learning

Explore One Beach

Users can learn about a single desired beach through scrolling through current conditions, learn what it means for that beach. They can also learn about consistencies at that beach such as sea floor, type of tide, etc. The luxuries section allow users to have a more satisfying experience at a beach by knowing which spot to choose for the extra essentials. The reviews give users real time data on what the beach is really like. A long term goal for Beach Wise is to have beach access information, not just general information about a 3 mile stretch of beach.

notifications

Saved Beaches

Users have the ability to save a beach that they want to be notified about for ocean condition changes. Notifications can easily be turned off and on in the “current” and “past” tabs. This feature allows users to get to know a beach’s behavior in preparation for a vacation to a beach, or to be notified of important changes while they are at that beach. The notifications are not just notifications like the weather app would give, they will be easier to understand through simple language.  Users will have the the opportunity to learn more about ocean conditions in general in the learning hub through the notification.

Learning hub

Learning made fun

Everything in the app guides the user to the learning hub. The ulitmate goal for our user is to become aware of the rhythms of the ocean, and the way the ocean works, so that they can approach any beach with the confidence to make an informed decision to get in the water or not, and achieve their goals for their time at the beach. The learning hub has various important topics that opens up to a video, or image with written information. Quizzes are the last step in the learning process, which allows for the information to stick, and for users to earn badges and get positive reinforcement.

Reviews

Sharing Experiences

Users will get to share what they did at the beach, report any hazards, and give additional information. If it makes sense in the future, a community aspect of the app will be added to encourage more reviews. The reviews give Beach Wise, and other users, the most accurate data about these beaches.

Profile

Badges and Levels

Gamification is a proven effective way to teach users a new skill. As users earn more badges through quizzes, their level of understanding will increase. Hawaiian terms were chosen for the levels of understanding. Each badge is clickable to bring a user to the learning page of that topic.

notifications

Alerts with Education

Bite sized, relevant education on the ocean condition that is changing will come with every notification. The notifications will help users get to know beaches before their trips, and while they are there. A common frustration for people is tidal changes and their items getting wet. Imagine if we not only told them when the tide was changing, but also gave them tips on seeing where the tide line is, and understanding how drastic of the tidal change at their beach is. How much more helpful that would be!