How well does the BART kiosk work? With this initiative question, my partner Himani and I started a project to redesign BART kiosk. Our goal for this project is to adapt Clipper kiosks at BART station for heavy commuters, letting them complete the add-value process as fast as possible (so they could reach office on time, phew). This blog post is a recap of my earlier process posts on this project, with an in-detail documentation of our usability tests. A final design recommendation is given at the end.
1. Field observation
We spent 2 hours at BART Civic Center Station observing and interviewing people, as well as trying out the kiosks ourselves, ending up in a handful of notes, quotes and confusion. Usability problems and insights on rider behaviors were then synthesized from the data we collected. Some notable quotes and observations are listed here, which later contributed to the building of our persona:
"What does e-purse mean.."
"The most common problem people come across with the kiosk is that they didn’t want to add that much money (the default $20) to their Clipper but failed to recognize there are 'Subtract' buttons."
“Everyone has smartphones and we don’t have time to use this kiosk everyday. It’s about time they introduce a Mobile App system to use the BART”
On the screen to “upgrade Clipper card e-purse” , one man pressed “Subtract $1” very quickly 17 times to set “Amount to be charged/debited” to $3.
One man had a detoured use of Clipper kiosk: Instead of purchasing or refilling, he tapped the Clipper to see his balance and ran away. The girl after him had to press “Cancel” button for him to start her own task.
People are always on-the-go. No time to waste. Always in a rush.
We also recognized that there are 3 different kinds of kiosks at BART: Ticket kiosk, Clipper kiosk, and Add Fare kiosk. We created a user task flow chart and hierarchy system diagrams for the former two. (*Click to open original image)
2. Identifying design goal: Persona and success criteria
Based on the redundant steps of operation we observed when riders were adding value to their Clipper, Himani and I decided to pick heavy commuters as the target users we would like to adapt the kiosk for. But before we proceeded to building persona, I looked up possible reasons why commuters might not sign up for the Clipper card auto-fill service online. Below is a list of potential causes I identified:
People don’t know the auto-fill service exists.
People need to register online.
It asks you to "Allow 10 days for value to be available for the first time".
There's uncertain delay (‘usually 1~2 days’) in adding value.
There's uncertain delay (‘usually 5 days’) for the updated amount to show up on some transit agencies.
Adding value online has a higher minimum top-up value. ($1.25 instead of $0.05 on kiosk)
You must order at least $20 in cash to set up autoload.
People might not have a credit card or don’t want to disclose their bank account.
Taking the list above into account, plus a bunch of interesting behaviors, needs, as well as a piece of anecdote, we came up with "Lucas", our Personas.
Lucas is always in a hurry with a lot of things to handle with his hands, hence he is looking for a streamlined experience that is both easy and quick to use. Below is the 5 success criteria we identified for Lucas:
3. Task flows
As a result of what was discussed , we revamped the key use scenarios of Clipper kiosk. Lucas should be able to add value to his Clipper by his favorite payment method in the fewest steps possible, meaning fewer button pressing and fewer calculation in head.
Based on this design goal, we introduced 5 new features to the Clipper kiosk.
Allowing negative balance: the BART system will allow Clipper user to go one more ride even if the balance is smaller than the fare of that trip, so that heavy commuters can have longer top-up intervals and more flexibility.
Express Top-up: The kiosk will remember the last transaction history (amount + payment method) of this particular Clipper card and display it on the screen as a quick access.
Mobile wallet: Include NFC-enabled devices as a new payment method apart from cash and ATM card. This could help tech-savvy commuters save huge amount of time as well as relieve their stress dealing with a lot of objects on hand.
Clipper Tray: Originally riders need to tap the Clipper card twice to add value: once before transaction and once after authorizing transaction, which is troublesome and time consuming. Therefore we suggests a tray enabling riders to "place" their Clipper/wallet throughout the add-value process.
Auto-exit: After completing the top-up, the system will auto-exit in 5 seconds. This prevents potential information leak and avoids letting the next customer awkwardly press CANCEL for the previous user.
Below is the task flow charts of our redesign (*Click to open original image).
Image credit to Himani Deshpande, Oct.1 2018
Based on the task flows above, we drew our wireframes in Adobe Xd and print them out in preparation for review and usability tests.
4. Usability test
*This part of writing is collaborated by my partner Himani and me.
Finally! In this section, we will elaborate the process of our usability test: how we planned them, how we conducted them, the test outcomes plus our reflection.
Purpose
We’re conducted the Usability Test to test out the redesigned BART Kiosk Interface prototype which we created for a specific use case. The test gave us insights on overall task flows and new features that we’ve introduced in the existing system.
Recruitment
We've tested the prototype with people belonging to the specific user persona (ADAPT Path). The participants were chosen according to the following criteria:
Age
Frequency of BART commute
Smartphone usage
Preferred mode of payment
Environment
The test was conducted in 2 phases. Firstly, we tested the prototype in class with our faculty Kate Rutter and other classmates to find out initial usability issues. In the second phase, we conducted with test with regular commuters at the Civic Center BART Station.
It would allow us to conduct a quick and insightful usability test.
It would provide a more realistic scenario.
The participants would be able to test the product in context.
We would be able to observe peripheral factors such as time, anticipation, mental model of the user, interaction with environment (apart from the kiosk) and other distraction.
What are we looking for?
Efficiency of task flows
The time within which the users are able to complete all the tasks? Is there a progress in time with subsequent usage?
Clarity of the hierarchy of various elements in the interface
Learning curve of the user (Is the user able to do the task easier/faster after a few times)
What is the users take on the Mobile Wallet feature?
Is the user likely to adopt the express top-up method. Do they see value in it?
How much information from the interface is user able to retain? (Current balance/ amount added)
Any loopholes or roadblocks that we haven’t considered.
Usability Sessions
Phase One
We did one pilot usability test in the studio with a printed version of our wireframes and identified many problems in the new features we introduced (Clipper tray, mobile wallet, auto-exit). Apart from those, a few problems in task flows and visual representation also need to be modified. Below are what we changed after this pilot test and why:
1. We added visuals of the Clipper at the beginning and the end of the task flows to ensure clear instructions on how to use the Clipper Tray and prevent users from forgetting their Clipper cards.
2. We separated the “Please collect your Clipper/receipt/change” reminder and the print receipt dialog into two screens since the previous version contained too many tasks on the same page. That was overwhelming and might cause users to forget their Clipper card.
3. On the menu screen, instead of using 3 icon graphics in a row, which looked like buttons to our participants, we illustrated the kiosk on the screen with instructions to point out what to do and where to do it to continue.
4.
If you choose to pay by using a mobile wallet and tap your NFC enabled phone as instructed on the menu screen, you will next see an instruction telling you to confirm your payment on your phone (provided by the native operating system of your smartphone).
5.The final modification was on auto-exit. The 5-second timeout was moved to the final screen where no operation is needed. On the menu page, the system is designed to exit itself when the Clipper card is removed from the tray, so that users who only want to check their balance can get information both quickly and safely. (Removing Clipper during the add-value process will trigger a screen saying “Clipper card has to remain on the tray until you see the complete sign.”)
Phase Two
How we conducted the session
We conducted the usability test session after doing an initial roleplay amongst ourselves and revising our script. In order to conduct the tests smoothly, we divided ourselves into two roles. While Yang was responsible for walking the participants through the tasks and helping them out, Himani took on the role of documentation (video-recording) and note-taking. We realized that at each step of the test, it was important for one of us to keep the participant engaged in the conversation, while we prepped for a new task and they were able to provide us with the best insights when the tasks were fresh in the mind.
Improvisation
During both the phases of testing, improvisation played a key role. We had to adapt our tasks according to the availability of the participant and the time they could spare. Participant A had enough time to go over all the tasks and speak to us at length. But due to the availability of the following participants, we modified our script and narrowed it down to 2 major tasks: the task featuring their regular payment method and the task featuring the quick access function. After the session, we both realized that, although we had prepared a detailed script including everything that we needed to evaluate with the test, there was a need to draft a more crisp and easy flowing discussion guide.
Reason one: people are short on time.
Reason two: people cannot remember complex task instructions, especially when we introduce novel information.
An obvious problem is, saying “Imagine that BART is promoting mobile wallet as a new payment method, so you tried it a few days ago and add 30 dollars to your Clipper with Apple Pay. Today you want to top-up using the same method” just contained too much information to remember. Instead, we could reframe the task like “BART adds a new feature allowing Clipper users to redo their last transaction. Please try out this function and imagine the amount and method you see on screen is what you did last time.” We needed to have more clarity while explaining our scenarios and assumptions to avoid confusion while performing the task, and hope to modify our learnings to our usability tests in the future.
Key insights
When we got back from the tests, we immediately sat down to debrief while the insights were fresh in our mind. We did an activity to write down the top 5 points that we could recall without looking at our notes or videos of the session. Additionally, we’ve also extracted task completion time from the videos we took on-site to further support finding usability problems.
After synthesizing all our gatherings, our key insights were:
The users found the big characters centered on the screen very useful and they had high recall value (“When things are big you have to look at them even if you don't want to”)
Not enough people were using Mobile Wallet payment as we assumed. But the ones who did use, really loved the feature and also tried ‘Apple Watch’ to make the process easier. (“I’m glad I don't have to take my credit card out here at the station”)
Most of the participants ended up tapping the screen instead of the button. The reason behind that might be that our prototype had a stark contrast between the dull brown background and the bright white screen. Also, the participants mentioned they were so used to touch screens that it's instinctive.
The participants got better at the tasks after subsequent usage and weren't majorly confused at any junction. The prototype had a very short learning curve.
One participant struggled with forming a clear distinction between a button (clickable) and an instruction (for a to-do task). One participant mistook the instructions for buttons on the payment method screen.
After fixing the Clipper Card issue in the first phase, we were glad to notice that no one forgot their Clipper Card. But one participant forgot her Credit Card.
Our participants who were mostly regular commuters were positive about the default amount and express top-up feature. (“It was really fast and I’m happy. I don't care if it's 20$ or 30$. I’m gonna use it anyway. At least I don't have to think about it”)
What works
Priority elements such as “Amount to be added” and “Current balance” are prominent in terms of visual hierarchy. They also have a high recall value.
The user with a bike and backpack liked the Clipper Card tray (“It’s nice to put it there. I don’t have to remove it again and again”)
Everyone complete tasks with one hand (while their other hand is busy holding their bag/bike)
Participant C liked Apple Pay method and Express Top-Up method. (“I’m glad I don’t have to take my credit card out. And I will use default amount because I don’t want to think about it)
Participant A performed more fluently after each task >> Our interface has a short learning curve.
What changed & why
As a final result, here are what we changed for refinement and why:
1.
[Visual representation] As suggested by one of the subjects, we distinguish 2 different status of balance (positive & negative) and make negative balance red.
2.
[Visual representation] We change styles of the “buttons” (they are not designed to be buttons, ironically) as well as the payment method instructions, in order to eliminate the button form for non-clickable screen elements.
3.
[Information Architecture] According to our subjects’ reaction, there needs to be a clear distinction between the two add-value methods (by picking an amount and by quick access). We add a header with a higher level in hierarchy to wrap the two different paths, indicating that they are two different methods the user can proceed on and enhance their paralleling position.
4.
[Task flow] We add an instruction reminding the users to remove their ATM card. Otherwise the transaction process will not proceed.
Final recommended design
5.
[Terminology] One participant was very proactive in using her Apple Watch, reminding us to replace NFC enabled ‘phone’ with ‘devices’.
Final recommended design
UI screen collection (*Click to open original image)
4 Task flows, refined version (*Click to open original image)
Image credit to Himani Deshpande, Oct.7 2018
Reflection
The entire 3 weeks has been a really fulfilling and enriching experience for us as we gained significant momentum in developing our skills as interaction designers. Although design is a messy process, we could relate with the double diamond process as we went through it. The research took was through a Diverging Phase where all we did was ‘Take it all in’ in the form of observations, sketchnotes, photos/videos, personal interactions etc. We were then able to synthesize our data and narrow it down to our specific use case during the Converging Phase. Gradually, we learned the fact that designing for a diverse audience is tough and the iteration process is exhausting, but the result is equally fulfilling. At every step, we consciously admitted that if there is a flaw, it is within the ‘product’ and not the ‘user’.
The project was a collaborative effort where we both played on our individual strengths and in the process help each other develop our skills. It helped transform us as designers. In the first week, we were very apprehensive to approach people for interviews. But by the end of it we had shed all our inhibitions and were able to conduct full-fledged usability tests with strangers. We hope that our recommended design has taken a step in the right direction towards enhancing the BART experience for heavy commuters. We also strive to apply all our learnings in our future projects. Looking forward to what’s next in store for us!
Comments