Bart Kiosk

Introduction

Project type

Personal project
Time

January - March 2020
Tools

Adobe Creative Suite (Persona and Customer journey)
Lucidchart (User flow)
Miro (Digital deliverables)
Pen and Paper (Paper prototype)
Sketch (Low fidelity and high fidelity wireframes)
Marvel App (User test)
InVision (Clickable prototype)
My role

Secondary research, User interviews, Diagramming, Wireframing, User testing, Prototyping.
Overview and Objective

Bay Area Rapid Transit (BART) is a transit public transportation system serving the San Francisco Bay Area in California.

The goal is to focus on the single ticket purchase at the kiosks located in every Bart station, making the process easier and more accessible to everyone.

Problem and Target user
Have you ever bought a ticket at the train/subway kiosks before starting your journey? How fast and easy was the process? Was it accessible to everyone or was easier for local people who know already how it works?

This project aims to answer these questions.
Doing research, observing the process in-person, and conducting user interviews I realized that the process can be slow and confusing especially for a specific target: first-time users and tourists who sometimes have to ask other people for some help.
Current kiosk
The picture on the left shows the fist screen which presents a lot of overwhelming information that can confuse users.

The second photo shows the language menu, there are no languages other than English, making the system accessible to those who can speak English only.
Photo that shows the interface of the current Bart kioskOne more photo that shows the interface of the Bart kiosk
My approach
I approached the problem employing a thorough methodology and going through four specific phases: Discovery, Design, Test, Iteration.

Discovery

Secondary research
Design brief
User interviews
Persona
Customer journey
Story map
User flow

Design

Paper prototype
Low fidelity wireframes

Test

User tests

Iteration

High fidelity wireframes
Clickable prototype

Discovery

Design brief
Design brief
Persona
After conducting secondary research and user interviews, I sketched a proto-persona and refined it with more details, creating a persona.
Persona made with pen and paperFinal persona
The persona I created reflects the target user group I identified and the goals and frustrations that characterize it.
Customer journey
Based on my persona I created a customer journey, analyzing stages, steps, thoughts, touchpoints, pain points, and opportunities.
User journey
This step was very helpful for having well in mind who my user is, and what the main needs, pain points, and opportunities are.
Story map
I worked with my peers to find out the activities, tasks, and subtasks of users before getting on the train, and then I made a digital version of the story map.
Story mapAnother story map of getting on the train
This step helped me to understand the tasks people have to achieve for each activity and it was very useful to make the user flow afterward.
User flow
I analyzed thoroughly how the process of buying a single Bart ticket would be.
User flow prototypeFinal user flow
I learned each action the user would do, how many screens, and what decisions there would be.

Design

Paper prototype

I hand drawn each screen to start shaping a flow.
Paper prototype start
Change language page of paper prototype
Select quantity page of the paper prototype
Insert page of the paper prototype
Insert your pin code page of the paper prototype
Thank you page of the paper prototype
Low fidelity wireframes
I started making a digital version and working on the design of each screen.
This phase was important to map out the interface and the content of the overall process.
Start low-fidelity wireframe
Change language page low-fidelity wireframe
Select quantity page low fidelity wireframe
Payment page low fidelity wireframe
Pin code page low fidelity wireframe
Thank you page low fidelity wireframe

Test

User test
The user test helped me to understand the points I could improve and refine, such as adding the google/apple pay feature and redesigning the Select quantity screen since it is not intuitive, and what was clear and I could keep, like the language menu and the number of screens.
Paper prototype user test photo 1
Paper prototype user test photo 2

Iteration

High fidelity wireframes

Paying attention to visual design details, I iterated my wireframes until I achieved a functional, clear, simple, and fast process.
Start page high fidelity wireframe
Select tickets quantity page high fidelity wireframe
Payment page high fidelity wireframe
Pin code page high fidelity wireframe
Thank you page high fidelity wireframe
The purpose of this design is to simplify as much as possible the process and the interface so that people are more oriented and know where to click exactly. 

I chose as primary color a light blue that reminds of the brand of Bart, which contrasts well with the white background and the black Helvetica font.

I also added a light background picture to make the interface more engaging and contextualize it more.

Clickable prototype

After designing high fidelity wireframes, I focused on the interaction between the user and the screen for each step.

Conclusion

Meeting goals and needs
Thanks to the simple redesign, the language menu and the additional google/apple payment method, now first-time users and tourists are autonomous and don’t need other people for clarifications. 

Key learnings
From this case study, I learned the importance of diagramming and prototyping, focusing on each step of the user flow. The usability test was the enlightening step that helped me analyze the process more deeply and iterate it.

Next steps
I plan to test my clickable prototype and continue to iterate it.