RABA App

Public Transportation app redesign by Eva Barnhart. The new app allows for a simpler, safer, and more rewarding experience for public transportation users in Redding, California

Date Completed
December 1, 2021
Project Details
UI 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

62% of the people surveyed use apps to access public transport in other cities, but in Redding, only 25% of the people surveyed use the app to see bus times and love getting updated if there is a delay.

Key Insight #2

57% of people surveyed do not feel appreciated and valued as a customer by the public transport system.

Key Insight #3

89% of the people surveyed prefer cars to public transport because of the freedom it provides. But in Redding, 33% of the people surveyed do not have access to a car, so they take the bus out of necessity, for their work commute, buying groceries, etc.

Key Insight #4

The people of Redding love electric bike and scooter rentals and want that offering to continue to grow. Visitors  and locals both enjoy them immensely, and wants the program to grow.

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

RABA does not feel safe, and is only used out of necessity for people. It is not an enjoyable experience, and people need a better way to track and board busses.

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

Download app & check bus times & get notified

Goal #2

View safety policy

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

Make people feel safer and more appreciated while using public transport by crafting a minimum viable product that has real time updates, safety reporting, and a rewards system in place for app users.

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!