My Charlie App
YOUR TRANSIT & CHARLIE CARD GUIDE TO BOSTON
MOBILE APP | TRANSIT | PROPOSAL
My Charlie
App
Your only app for Boston Transit.
Explore Boston at the palm of your hands.
Hassle free travel and reloading of card.
The brief: "My Charlie App" is a Transit Oriented app in Boston, MA, to streamline
Charlie Card by introducing digital recharging, thereby eliminating the need for
physical queues and reliance on traditional payment methods.
Problem Statement
Charlie cards make using the MBTA very easy, but in today’s technologically digitized world, waiting at only physical kiosks is a pain. Recharging only through debit or credit cards and being unaware of lack of funds in the card until tapped is a huge set back in the fast-paced life of most commuters.
MyCharlie: An application for all your Charlie Card Needs
My Charlie is the only transport application, which allows you to recharge your Charlie card digitally no longer having to wait in queues or at the kiosk to charge your Charlie cards.
Solution
MY ROLE
Design & Prototype
Lo-fi wireframes, conceptual development as a sole designer.
Refined features for the hi-fi prototype in Figma, and interaction
design of the high-fi prototype.
Research
Conducted remote and in-person user tests with the 10 user
groups to understand their pain points
Led recruitment of survey participants, and co-designed an evaluative survey.
THE TEAM
1 Designer
2 Product Managers
TIMELINE
Project
Sept 2022 - Dec 2022
TOOLIKIT
Design & Research
Figma
Adobe XD
Adobe Illustrator
Photoshop
Balsamiq Wireframes
Boston Travel Companion
Explore Boston with your fingertips at your service
Jump to Solution >
View Prototype
80% liked the app
These people were of the opinion that
such an app will help improving with the
implementation of this app.
target audience
4/5
participants
would use the app
due to it's features.
80%
users could complete all assigned tasks during user testing.
test
45%
of the participants
found the app
useful.
empathize
iterate
User Testing & Impact Highlight
BACKGROUND
People of Boston use the Charlie Card. However, the limitations of Charlie cards are a pain point.
In 2012, MBTA announced plans to introduce tickets that could be purchased and scanned on smartphones.
We conducted field research among students at Northeastern university to understand their pain points and preferences. Being a student at Northeastern, we, as a team, could relate to the pain points of the people we interviewed.
However, to ensure there were no biases in our design, we considered the target audience before making any design decisions. We found many students had similar opinions on facing issues with recharging their Charlie Card and constantly having to carry a physical card.
How might we provide a digital solution to solve the
problem of recharging your Charlie Card at a kiosk?
PAINPOINTS
People of Boston use the Charlie Card. However, the limitations of Charlie cards are a pain point. In 2012, MBTA announced plans to introduce tickets that could be purchased and scanned on smartphones.
Our group formed assignments to grasp various elements of the transit experience by studying a range of users, transit structures, and distinct locations in Boston, in order to unravel the users' key areas of difficulty.
01.
Unable to reload Charlie card on the go.
02.
Physical Card keeps getting misplaced.
03.
Needs a digital solution.
Final Design
Highlights
The "My Charlie" app has transformed Boston's public transit system. It offers digital recharge, real-time balance tracking, management of multiple cards, instant alerts, and customer support. It's user-friendly and accessible, including for the visually impaired, and ensures security with two-factor authentication.
This final prototype aims to make public transportation more interconnected, convenient, and efficient.
The functionality of the app along with its multiple functions were transformed into a structured diagram to improve comprehension of the user navigation. This offered us a scaffold to build the preliminary design ideas and translate them into wireframes.
User Flow
Orange line is running late! Read More.
Chalie
Card
Chalie
Card
*
Add Physical Card Anytime: Seamlessly integrate your physical Charlie Card with the app at any stage, ensuring effortless management and accessibility.
*
Customizable Autoload & Security Settings: Tailor your experience with flexible settings for activity autoload and enhanced security measures for lost or stolen cards, keeping your commute worry-free.
FEATURE 2
View Train
Schedule
FEATURE 1
Mange your
Charlie Card
MBTA Fare Card
Charlie Card Screen
Connect Card
Find T Station
Find Kiosk
These screens guide you to find a Charlie card.
Don't have Card:
Steps to help you find a
Physical Charlie Card.
*
Route Discovery & Timing Flexibility:
Search for your destination to access various route timings. Utilize available filters to refine your search based on preferences, ensuring a tailored commuting experience.
*
Timing & MBTA Schedule:
Overcome the uncertainty of public transport schedules. Our feature provides real-time updates on bus and train arrivals, keeping you informed and on schedule.
*
Comprehensive Route Itinerary:
Receive a detailed route itinerary to fully understand your journey, including specific stops and transfers. Designed to assist both tourists and regular commuters in navigating their way effortlessly to their destinations.
MBTA Map Screen
Transit Route Map > Schedule a Train
Chalie
Card
Chalie
Card
QUICK TAP:
A quick button to allow you
to tap your card on the go!
Bus
Tram
Ferry
Favorites
Search
All
Locate a Train Station:
Locate the nearest T station where you can get a Charlie Card
Last step to get the card:
Seamlessly integrate your physical Charlie Card with the app
FEATURE 1
Schedule
your journey
TRANSIT ROUTES
Orange line is running late! Read More.
Creating a flawless digital MBTA.
Behind the design,
The method of creation, the WHAT, HOW and WHY for our design.
Using Lean UX & Agile Process
Brief And Estimation
Design Team Process
Information Architecture & Wireframes
Feedback
Usability
Testing & Validation
Interaction & UI Design
Calendar Update
Satisfaction Survey
Final Delibarables
Discover
Validation
from Target Users
Kick- Off
We undertook field research to comprehend the MBTA, and conducted interviews to grasp challenges encountered by both service providers and users. This facilitated our identification of areas for enhancement. Through this procedure, our aim is to gain a thorough understanding of the present state of MBTA and discover avenues to improve the service experience for all stakeholders involved.
Decoding MBTA
Boston's T operates both over and under ground, yet there aren't any Charlie Card Reloading kiosks at the overground stations.
The transportation infrastructure includes extensive routes and a broad grid, hence a significant populace relies on mass transit for their everyday jobs.
The transportation infrastructure includes extensive routes and a broad grid, hence a significant populace relies on mass transit for their everyday jobs.
The kiosks are solely accessible at the subway stations that are quite distant from one another, hence numerous individuals don't bother to pay for the journey or fail to catch their ride.
The transportation infrastructure includes extensive routes and a broad grid, hence a significant populace relies on mass transit for their everyday jobs.
Physically tapping a Charlie card for access often leaves individuals stranded when their card balance is inadequate so they have to search for a kiosk to top up the card.
Targeted User Interviews
To initiate the project, we held several discussions with current users of Boston Transit, and Charlie Card. Following our field research, we conducted two face-to-face interviews to obtain a deeper survey and feedback, with the aim of discerning possible areas of opportunity and categorizing them into solution compartments.
Outcome: This effectively guided us in creating the MVP features for our app.
Ken McCormick:
A working professional who utilizes the MBTA transit system for commuting to his job daily, he holds the belief that it's the quickest path to his workplace.
Converting findings to
build User Personas
Kai Silverstone:
A Northeastern University student who utilizes Public Transit for her daily commute to campus for lectures.
UNDERSTANDING USER PAIN POINTS
The user's journey proved to be a paramount
way of understanding the prime features
of the My CharlieApp.
We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 2 personas for each of our user segments. They were based on user interviews and surveys, and we kept updating them throughout the project as we gathered more data. We used these personas whenever we wanted to step out of ourselves and reconsider our initial idea.
FIND A TRAIN
CONSIDERATION
PROBLEM OCCURS
DOWNLOADS
MY CHARLIE
WORK TIME
SCENARIO
Ken is preparing to go to work. He has a crucial sales meeting this morning and must arrive on time. While eating his breakfast, he checks the transport app/site to see when the bus is leaving from his closest station and if there are any planned outages today.
EXPECTATIONS:
Easy interaction with the transport app/site
Clear information: bus departure, bus arrival, bus number
Truthful information
Getting ready for job. Must arrive punctually, locates a train using Google Maps. Organizes everything and departs home.
The data from Google Maps was remarkably precise.
Figuring out the correct train schedule was a breeze.
He's delighted as he is now assured of reaching his office punctually.
He realizes his Charlie card's credit is insufficient. Pressed for time, he aims to top it off without needing to commute to a different T station to use the kiosk.
The subsequent train is due in 8 minutes, yet he won't manage a kiosk visit and return in time.
Anxiety over missing his critical appointment builds; hailing a cab is a costly option.
Search online for ways to refill Charlie's card.
Learn about the Charlie Card. Download the respective app.
After logging in, he enters his payment info and other details.
He promptly manages to top up his Charlie Card online, all before the arrival of the next train in approximately 8 minutes.
The apps main job succeeded, his card got reloaded.
Allowing him to use the ready transportation without significant delay.
He considers this app immensely valuable.
Will I get on time for my buss?
TRUST
HAPPY
FRUSTRATED
WONDERING
HAPPY
I hope this app helps
me recharge my card asap
How can I get to work on time now?
I wished I could recharge
this card online, Arghhh.
Why don’t I have
balance in my card???
What if the bus gets delayed like yesterday?
Was the information accurate?
Are there any planned outages today?
What is the quickest way to find when the train leaves?
What time should I leave my home?
Well, this went well, Finally I am at work on time
Okay wow, this was quick, now the next T is arriving
ACTIONS
WHAT DOES THE CUSTOMER DO?
CUSTOMER THOUGHT
WHAT IS THE CUSTOMER THINKING?
PHASE OF JOURNEY
CUSTOMER FEELING
WHAT IS THE CUSTOMER FEELING?
SCENARIO & EXPECTATIONS
WORK TIME
RESEARCH AND PLANNING
WALKING
PROBLEM OCCURS
DOWNLOADS
APP
SCENARIO
Kai is planning to attend university today; she plans well in advance and has a lecture to attend today. After she gets out of the house and waits for the T to arrive, after entering the T, she realizes that she doesn’t have enough balance on her card and can’t take the ride since she isn’t even carrying emergency cash. She has to go to a nearby kiosk in the cold to reassure her card, and she will get late for her lecture.
EXPECTATIONS:
Recharge information
Digital method of recharging the card
Wakes up in the morning
Preparing for her lecture
It’s super cold outside
Finds the schedule that is suitable for her
Saves the route and leaves her house for the T station
Leaves home
Walking to the station
Waits for the T
Is in a hurry
The T finally arrives, and Kai taps her Charlie Card, only to realize that she needs more balance.
She is asked to step out of the T and hence loses a lot of time.
She worries that she will get late and has to walk to the kiosk to recharge her card.
She searches online how to recharge her Charlie Card fast or any other alternatives
She finally comes across the MyCharlie app and downloads it.
She finishes logging in and connecting the Charlie Card and payment methods.
She recharges the card.
The next T is almost arriving, and Kai has recharged her Charlie Card
She taps her card, and Voila, she has balance and can travel now.
Why is the T so late today?
TRUST
HAPPY
FRUSTRATED
WONDERING
HAPPY
Can I still arrive on time?
I hope this applicaiton is easy to use and helps me !
Why is it delayed?
What if the T gets delayed like yesterday?
Why is Google Maps so confusing and innaccurate?
I hope I reach to the lecture on time!
Why is it so cold today!
What time should I leave my home?
Well, this went well
I hope this digital recharge works.
ACTIONS
WHAT DOES THE CUSTOMER DO?
CUSTOMER THOUGHT
WHAT IS THE CUSTOMER THINKING?
PHASE OF JOURNEY
CUSTOMER FEELING
WHAT IS THE CUSTOMER FEELING?
SCENARIO & EXPECTATIONS
WIREFRAMING & IA
We used wireframing for early testing of our
design and prototypes, to understand what
works best for MVP features.
We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 2 personas for each of our user segments. They were based on user interviews and surveys, and we kept updating them throughout the project as we gathered more data. We used these personas whenever we wanted to step out of ourselves and reconsider our initial idea.
Card wallet with
one card only
Idea 01
Card wallet similar to
Apple Pay wallet
Idea 02
Card wallet swipe
for multiple cards
Idea 03
Targeted Problem:
Recharge and
tap card page
Targeted Problem:
Connect your current card
The Design System
17pt.
17pt.
17pt.
17pt.
Helvetica
Helvetica
Helvetica
Helvetica
Using the 60-30-10 color rule:
The 60–30–10 is a very simple rule for creating well-balanced color palettes. The idea is simple —when you choose a new color palette, the 60% of the palette should be dedicated to one color (usually, it’s a neutral color), another (complementary) color makes up 30% of the palette, and a third color (accent) is used for the remaining 10% of the design.
Call to Action
Other Buttons
Call to Action
Error Buttons
How we will use it?
Firstly, we had to set our color ratio based on the palatte.
We set the dominanat hue (60%) to Light Blue, (#F2F4FF)
Secondary (30%) to Green (#005C0E)
And the accent color (10%) to Green (#005C0E)
Background (#FFFFFF)
Primary
60%
#9D9D9D
Secondary
30%
Text
(#1C387C)
Secondary
30%
Accent
10%
#005C0E
USER TESTING FEEDBACK
We spoke to 15 people, who were daily
commuters of the MBTA, and tested the
hi-fi prototype with them.
Some verbatim feedback:
"clean and modern"
"no hindrance to search"
"I'm able to find what I need"
"contact and keyword"
"suggestions are helpful"
Upon finalizing the revamped interface, we initiated Flash Feedback rounds with our My Charlie mobile user community. We requested them to give the new interface a whirl, and to our utmost glee, every participant could spontaneously commence and conclude their search tasks, comprehend and employ the novel functionalities, encountering virtually no obstacles throughout the process.
Key findings from the user studies we undertook.
The trial engendered some heat maps and mis clicks, thereby delivering us an accurate results and feedback.
View User Research Document >
The design of this app has helped improve Boston's transit system by digitizing it and creating a seamless user experience for
travelers and visitors. it will help imporve and address the current pain point of transportation.
Reflections: Ensuring a smooth travel experience for Boston
Transit System users, while gaining insight into their difficulties to
create a practical application.
🚇 Collaboration and Work
We collaborated with many students to conduct diverse tests, which enabled us to grasp user difficulties and gain a comprehensive understanding of the MVP features for this application.
📱 Proposal to the MBTA
This application is now set to facilitate the Boston transit system and was even forwarded to the MBTA as a future suggestion we might want to incorporate in enhancing the Boston transportation network.
Other Projects
All Projects
Webiste & Mobile App Design
Project Stree
Redesigning the spotify podcast experiecne
Spotify Podcast Redesign
Ai- Powered Design Tool