Bus App
An app for managers to record daily information about
Unifi bus drivers and their vehicles.
PROJECT OVERVIEW
The product:
Unifi has a big busing contract working in different airports. In order to record the daily work of drivers and vehicles. We designed the Bus POI App. Drivers upload certain data about themselves and their vehicles to the app at the start and end of each trip. Their managers can see daily information on the manager's portal website.
The problem:
In the previous design, it was easy to miss a step or forget what needs to be done. Because there was no step guidance, and users need to upload data at the beginning and end of each trip, every log includes a few trips, many logs will be uploaded by one user in a day.
The goal:
A simple step guidance user flow needs to be redesigned for users.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs
UNDERSTANDING THE USER
User research: summary
I conducted interviews and created empathy maps to understand the users I’m designing for and needs. A primary user group is bus/shuttle drivers who use mobile phones to work. Drivers upload certain data about themselves and their vehicles to the app at the start and end of each trip. Their managers can see daily information on the manager's portal website.
Research also revealed that other user problems included some external conditions: Drivers may use the app outdoors, weather factors may be considered, and drivers may wear gloves.
User research: pain points
1
Step guidance
A simple and effective step guide ensures that users don't forget each step.
2
External conditions
Drivers may use the app outdoors, weather factors may be considered, and drivers may wear gloves.
3
Switch account
It is possible for multiple users to have one device.
Persona
Problem statement:
Brian is a shuttle bus driver who needs to upload many bus logs during the work day.
User journey map
Mapping Brain’s user journey revealed how helpful it would be for users to have access to Bus app.
STARTING THE DESIGN
User Flow
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the Create a new log screen, I prioritized a simple step guidance for each trip to help users save time to recall the steps.
Star were used to mark the elements of each sketch what would be used in the initial digital wireframes.
Digital wireframes
Low-fidelity prototype (Bus app)
The Low-fidelity prototype connected the primary user flow of creating and filling out a new log, so the prototype could be used in a usability study with users.
Low-fidelity prototype (Manager's portal)
The Low-fidelity prototype connected the primary user flow of filtering and finding a log, so the prototype could be used in a usability study with users.
Usability study: findings
These were the main findings uncovered by the usability study:
1
Optimize steps mode
The user must complete the first trip. After the user can start filling in the second trip information.
2
Making end time and mileage noticeable
Add a step of end time and mileage to the end of each trip.
REFINING THE DESIGN
Early designs doesn’t restrict users from filling out all the trips, but after the usability studies, I made the rest of the trips in non-editable mode. So users have to fill in all infos of the first trip before they can edit the second trip.
Mockups
Early designs doesn’t Making end time and mileage noticeable on each trip, but after the usability studies, I added a new step for end time and mileage. So users have a noticeable step of end time and mileage.
Mockups
The final high-fidelity prototype presented cleaner user flows for fill out submission and submit.
High-fidelity Prototype (Bus app)
High-fidelity Prototype (Manager's portal)
Design assets
Accessibility considerations
Used of color
Don’t specify important information by color alone. Use a combination of text, color or graphical objects.
1
2
Consistent navigation
Ensure that repeated components occur in the same order on each page of a site.
GOING FORWARD
Impact:
The app makes the process of submitting a bus log more convenient and more efficient for Unifi bus drivers.
One quote from peer feedback:
“I like the new design very much. This allows us to spend less time recalling and thinking. Clearly find the last place you filled in.”
What I learned:
In the process of designing Bus app, I have a deep understanding of the work of people of specific types (drivers). And I can using my design to help them improve their work efficiency.