Access / 2018
DATE Mid - Late 2018
ROLE Lead Designer
TEAM Two Designers (Including Me) / Product Manager / Remote Development Team
TOOLS Sketch (Design) / InVision (Prototyping)
If you’re a school bus driver, your work day is divided between having a chat and some Folgers in the break room, heading to your bus and back (often on the other side of a huge yard), and of course, driving. With the time clock located near the break room, it is likely that a few minutes get added onto your time card, either from a long, snowy walk or getting caught up discussing the Bears game. For one Zonar customer, a top 3 national school bus operator, these extra minutes across thousands of drivers add up to millions lost each year.
Access is an Android app that guides drivers through their daily schedule and punching the clock between each assigned task. Drivers can also easily navigate to and from other Zonar apps, such as EVIR for conducting pre- and post-trip inspections, as needed.
SELECTED SCREENS
Home Screen
Drivers use this screen to review performances and start their next schedule task (such as driving a specific route).
Clear hierarchy is the top guiding principle.
The design is high contrast and highly readable to support older users (the average age of this customer’s drivers is 63 ) and outdoor daylight usage.
Most common feedback from the customer when reviewing each iteration: Make the text bigger and bolder.
tASK SCREEN
Each task row expands to access detailed information about each task.
Arrows unconventionally places on the left side of the screen after the customer suggested it was too hard to find the arrow is it’s traditional location on the right.
Testing confirmed the customers’ assumption.
Task Screen (Expanded Task)
This screen is the central point of guidance for the driver. A start button next to a task indicates it is the next one to be completed. The panel that expands below a task walks to driver through each sub-task and provides CTAs to guide them.
Buttons link to other Zonar apps required for the completion of certain sub-tasks, or other screens within Access.
The user’s attention is drawn to the gray highlighted areas, and steps from the task to sub-task, and finally to the blue button’s action.
Performance Screen (Last 7 Day View)
Drivers can view their task completion at any time from the home screen and are required to do so as the final step of each task.
A key safety metric is completion of child checks (confirmation no students on bus) and inspections - and is costly when missed.
Performance Screen (Daily View)
Drivers are able to review their task completion in more detail when viewed on the same day.
Speeding Screen
Drivers view the location, duration, and time of any speeding events in a map or list view.
Customers consider task and sub-task completion (signing in/out) and speeding the most important KPIs to share with drivers.
HOW ACCESS GOT MADE
The aforementioned customer approached Zonar to partner on a workflow app that synchronizes with their time clock system. They had calculated that in the previous quarter “padded hours” had cost $774, 097. Additionally, high driver turnover (about 25% annually) meant that new drivers constantly needed to be trained, and having a self-guided contextual software would greatly reduce training cost.
I met with the customer previously for some smaller projects and was requested by their senior leadership to be involved in discussions from the start. It was an exciting prospect, as I’d found that this customer is notable in how much care they put into crafting a great experience for their drivers. A year earlier I’d had their ear about the importance of user research and within two weeks and they had enthusiastically arranged for me to visit one of their sites and interview drivers.
At the start of this project, the customer was so precise in their requirements that they had already worked with their internal development team to mock up their vision of the app. The information architecture was sound and familiar to drivers, but the interaction and visual design needed help. They hoped that we could whip up something better - immediately.
As soon as we got the green light from Zonar leadership, I got to work as lead with support from another designer. By the next day, after some breakneck sketching, we had a lo-fi prototype to show the customer. We jumped on a call, they suggested changes, and round and round we went, with calls every 1-2 days for about two weeks. They took the final design to their development team and a few months later it was the central technology in their drivers’ work life.
Fortunately, my advocacy for user research was not forgotten. A few months into the school year, myself, a lead researcher, and a product manager travelled to two sites to conduct research (SUS questionnaires and moderated usability testing). The results were above average and we made recommendations for future improvements. Largely contingent on the timely completion of this project and their satisfaction, the customer signed a new multi-year contract - one of the largest at Zonar.
DESIGN ARTIFACTS
CUSTOMER MOCK-UP
We printed out the app mock-up and made notes on changes. The hamburger menu was scratched out as we felt successful contextual navigation would make this staple unnecessary.
SKETCH OF DATA VISUALIZATION
An example of the rapid sketches created by the team (this one was done by another designer).
Each of the sketches shown made it to a full visual design pass within a few days.
The goal of the visualizations is to show the percentage of tasks completed compared with the company goal.
WIREFRAME
With a good amount of the layout and information architecture retained from the customer-created mock-ups, wireframing was a lighter effort than usual.
STYLE EXPLORATION
This early pass at visual design is not far from the final product, as we had a good shared vision between the designers and the customer. Our biggest priorities were content hierarchy, readability, and wayfinding.
HOME SCREEN WITH BARS
Closer to the final visual design. This bar chart did not test well, as users found the segmented goal line confusing.
My initial thought was that the bars give a good sense of working towards a goal, like running on the lanes of a track.