As part of my interview process, I was assigned the task to design a kiosk at a transit stop. Its purpose is to let regular commuters buy and/or refill their transit cards.
1. Whiteboard, pen, paper and notes (used for ideation, doing data analysis and creating low-fi creation)
2. Google excel (used for doing data analysis)
3. Sketch, Photoshop (used for creating the mockups and visuals of the presentation)
4. Invision App, Principle (used for prototyping and creating animation)
5. Zoom, Quicktime (used for recording the remote interviews and prototyping)
Create an intuitive and convenient user experience for regular commuters to buy and/or refill their transit tickets at a train station.
To achieve the goal of designing a convenient user experience for train commuters, I first started off by asking myself the questions: who are the commuters? I wanted to better understand commuters in order to better solve their user problems. So I conducted user research. Due to time constraints, I was only able to interview 5 commuters at the train station where we would be installing the new kiosk. So the user findings are a mix of real notes and assumptions.
I developed some main questions to investigate for the research:
1. What are commuters’ age groups? How frequently do they need to commute by train? How often would they need to buy/refill tickets? When would they need to commute by train?(what)
2. How do commuters buy/refill tickets currently? (how)
3. What do they want when buying/refilling tickets? (incentives / goals)
4. What are their pain points when buying/refilling tickets? (pain points)
User research findings
Out of the 5 commuters I interviewed, 2 were frequent commuters who used Clipper cards at gates. They usually did autoload online to keep the balance on their cards and seldom used a kiosk at the train station. Another 2 commuters took a train sometimes and they would purchase tickets at the kiosk every time they commute by train. The last commuter was a tourist who bought the train ticket in California for the first time. She had difficulties reading English on the kiosk screen since English is not her native language.
Target audience: (primary) local commuters who take a train sometimes
(secondary) non-local commuters who take a train for the first time here
Based on the breakdown of user data, I realized that since frequent commuters don’t need to use the kiosk as often as other types of commuters, though they were the majority of commuters, they were not primary target audiences of the kiosk I’m designing for.
22–40 years old
Target audiences’ needs
I categorized users’ needs into 4 big categories and realized that checkout efficiency and pricing information were the most important things to them as most target audiences expressed needs in these 2 areas:
- (most important need) Being able to quickly buy and/or refill their transit cards.
- Understand pricing information in order to make smart purchases.
- Accessibility needs/ always get help when needed.
- Get receipt.
Target audiences’ pain point
- Users are not able to checkout efficiently at a kiosk
a. don’t know what to do at each step
b. don’t understand how much they would need to pay for their trips
c. checkout steps are complicated
2. Most kiosks don’t have accessibility features and commuters cannot get help immediately when needed
A typical scenario when they need to commute by train
A local commuter who would need to take a train to go to an event. He is in a rush to buy and/or refill his transit ticket.
After conducting the user research, I defined 3 design objectives:
- Create a user flow that would allow target audiences to efficiently checkout using the kiosk.
- Make the pricing information intuitive to end-users and help them spend money wisely.
- Always provide users enough help and assistive support.
Based on the priority of users’ needs and pain points, as well as existing kiosk user experience and design objectives, I proposed the following new task flow to create a convenient checkout experience at a train kiosk:
Before I dived deep in the actual designs, I listed out the assumptions I made for the exercise to make sure that edge cases were taken into consideration.
- The machine is right next to a station agent, who can help with anything.
- The kiosk is in ideal lighting conditions and the kiosk screen is clear to users.
- The kiosk has a card reader, bill acceptor, mobile pay scanner and dollar-coin return.
- The kiosk is located in a secure area.
- If users left the kiosk without completing their tasks, the kiosk will time out and end the session.
- There’s only 1 type of pass (the concept of the pass is a monthly pass with which commuters can do unlimited trips in a month)
- Users know it’s a touch screen
- Error states designs are not included due to time constrain
Based on the user research results and the task flow, I did quick free hand sketches to help me further understand the user flow and overall information architecture. The screens roughly cover the key features I want to design to achieve my 3 design objectives.
Hi-fis & animation
Buy ticket user flow:
Create a user flow that would allow target audiences to efficiently checkout using the kiosk.
Existing kiosk screens are confusing as there are always many options on the same screen. Target audiences mentioned that when they got confused about which buttons they should focus on, and as a result, they were very slow in finishing their task using a kiosk.
I changed the visual hierarchy by putting visual emphasis on buttons that are critical for each screen.
References of where I locate the most important information on a kiosk screen:
I always put our primary content (e.g. important buttons) at the user’s eye level to help users efficiently read the information on the screen.
To address users’ pain point of not knowing what to do on each step, I used icons and animations to provide target audiences with more visual explanations.
Make the pricing information intuitive to end-users and help them spend money wisely.
To better help end-users be aware of how much they would be charged for the trip, I showed pricing information from the beginning to the end of the purchase flow. Also, the upsell of the monthly pass could help drive business revenue and help target audience make wise spending depending on their needs.
Due to time constrains I ran out of time creating the hi-fi of the refill ticket flow. But the refill flow I have in mind also has a focus on helping users to spend just the amount of money they need to. E.g., the system could check for users how much they need to add to their current balance in order to complete the trip so that they don’t need to manually calculate the money they need to add or accidentally add extra money to their account.
Always provide users enough help and assistive support.
Based on user research finding, the secondary target audience would need assistive help, e.g. being able to read the screen in native languages is a primary need. Other than that, end-users would also want to get help when they are stuck. I keep the language and help options on a bottom nav bar on each screen, so that users could get help anytime and be able to efficiently checkout.
Stretch the goal
If given more time, I would conduct in-depth user testing to see if my designs solve the problems for target audiences. The UX metrics I would use would be the HEART framework created by Google. I would be using the UX metrics to check whether or not the design meets the 3 design objectives I created.
I will also think through the more engaging interaction process, the end to end flow of each of the proposed features, the refill ticket user flow, as well as edge cases. Screens letting users know that ticket is printing out, credit card information is being processed are not included in the hi-fi design due to time constraints.
I also came up with many other ideas such as having a separate kiosk for children, elderly and disabled people. The reason is that they might need special help and more guidance. A special kiosk and a regular kiosk could help all target audiences to efficiently finish their tasks.