The BUSSIER
My Role: UX Research, UX Design, UI Design
A live bus tracking mobile app that enables users to reserve their seats before taking their bus and complete their journey.
Bussier allows commuters to easily identify which bus is coming and when it is arriving in a Mid Sized Metropolitan City.
Business Requirements
1- Each of the buses arrives at the Washington & State bus stop.
2- Each rider can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
3- Riders are able to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
Research
1- Survey (Google forms)
2- Interview (Zoom)
3- Usability test (Zoom + Figma)
Survey Analysis
Young (Millennials and Gen Z), lower income participants who take the bus, mostly use Google Maps less than once a month and see it very effective.
What the Participants Prefer?
1- To see weather information, live tracking system of the bus additionally.
2- To buy fares with promotion before they travel.
3- To see seat availability.
4- To experience an unique UI.
5- To have a free or negligible cost of app.
Interview Questions
1- Why do you think you have trouble with your transportation application?
2- What’s the first thing you want to see when you open a transportation app?
3- Why do you think your current application does not show the seat availability?
4- If you get notification for your bus or train arrival time, would it be beneficial for you?
5- Do you use Apple Watch?
Interview Analysis
1- Participants want to see exact bus on the app and track it.
2- Also to get alerted not to miss the bus, and any other unexpected situation, maintenance, heavy weather condition.
3- And see the availability of seat or a place for access for wheelchair
Addressing the customer expectation
Primary (“must”)
“Best Way To Go” Button (based on customer filtering)
Show bus line details on map, and timeline at selected bus station.
Track the exact bus alive on map.
Secondary (“nice to have”)
Show seat availability of the bus
Weather updates
Maintenance/breakdown, accident issues.
Proto Personas
Customer Journey Map
User Flow
Site Map
Physical Sketches
Wireframes
Branding
First High Fidelity Wireframes
Problems
1- Focusing on the business requirements, brings not to use different vehicles other than a bus.
2- Timetable, distance and travel time confused the user.
3- Vehicle information on the same feature with locations, time and selection confused the user. Instead the user recommended the filter option on the same page.
4- Seat availability, purchasing, reserving can be additional nice to have pages.
Second High Fidelity Wireframes
Problems
1- Animation on the opening the app page was not easy and fast for the user.
2- Hamburger menu is nice to have page for focusing on business requirements.
3- Creating a community in users of Bussiers is a good idea but rate and comment pages are nice to have.
High Fidelity Wireframes
