Turn-By-Turn / 2017

 
 

DATE Late 2017

ROLE Lead Designer

TEAM One Designer (Me) / Product Manager, Technical Program Manager, Dev Manager, Front-End Developer

TOOLS Sketch / JIRA + Confluence / Agile Development in 2 Week Sprints

WHY 130 million people use Waze every month to get directions. If you’re a school bus driver, and you don’t know a new route or how to respond to a road closure, you rely on a print out - think Mapquest circa 2006 - or radioing your dispatcher for help. Navigating school buses requires many regulations and considerations unique to their world, such as sequencing turns so that the bus only stops on the right-hand side or more than 500 yards of a strip club.

Turn-By-Turn is an Android app that provides navigation based on the directions generated by schools through their routing software. The app uses standard navigational cues and lets drivers know when they approach and reach a stop. Minimized distraction and increased driving confidence makes Turn-By-Turn a valuable support system for drivers on the road.

SELECTED SCREENS

Home Screen

Driver’s schedule is displayed and a trip selected. The status of each trip - completed, scheduled, next up - are indicated.

  • Identifying trips and buses can be tricky. Drivers know their bus often by the location in the yard, not a number. They think of trips by “what school and when” rather than the route ID generated by routing specialists.

  • High contrast, for bright daylight use, was an important aesthetic feature.

  • Why is the time listed in the header when it also appears in the status bar? Overwhelmingly, drivers voiced the important of constantly knowing the time as the need to keep exact pace with stop schedules. It’s just too hard to read in the status bar.

NAVIGATION SCREEN - BETWEEN STOPS

I had limited control over the map itself as there were limited points of flexibility in which the developer could modify elements.

  • Created a custom set of icons to use instead of those provided by the map service.

  • Did some quick online usability testing to confirm some directional arrows were confusing.

  • Time, the most important piece of information for drivers, remains prominent.

NAVIGATION SCREEN

Bottom sheet menu allows provides the primary source of navigation during a trip.

  • Swiping from the bottom of the screen is a relatively imprecise interaction for busy drivers who need information quickly and with no patience for errors from needing to touch a small area of the screen.

ROSTER SCREEN

Roster selected and displayed from swiping the bottom sheet menu.

  • Purely information, the student roster for each stop is shown. A straightforward solution for a simple use case: Drivers wanted an easier to read and digitized copy of their roster print-outs.

  • A similar screen displays the route as a list of directions.

NAVIGATION SCREEN - LAST STOP

A floating action button appears when drivers reach the last stop of their trip. In most cases the driver would immediately start the next trip and not need to return to the schedule screen (but always can through the bottom sheet).

how turn-by-turn was made

This project was short and sweet, with Zonar’s student transportation customers consistently asking for a navigation solution that would be low cost, small scale, but make a big impact in on their operations. The app was built in just over a month from start to finish with a team of one designer (me), a product manager, and one front-end developer.

The clear and simple design, and the speed at which we needed to develop it, meant that the leap from my lo-fi comps to the visual design was more of a hop. Working in tandem with the front-end developer, the small scope of the app was a treat for growing my visual design skills, as I could see substantial impact in the subtlest changes to color, contrast, and typography.

Knowing development was only for Android and with little time for research and testing, we steered pretty closely to Material guidelines. Ideation and discovery was brief, and I spent more of my time working with the visual design. It was a simple app, but the first where I owned and produced the design entirely by myself. It was a nice baby step before some big projects that quickly followed.

Delivering this simple app required a lot of effort and synchronicity from the team, and the beta customers were satiified with the outcome. Since it’s release, it’s success has led to the business exploring ways to expand and create a hybrid solution similar to Verify, our roster management app. Drivers spend hours a day on the road and there are an array of opportunities to make their jobs easier and passengers safer. 

DESIGN ARTIFACTS

NAVIGATION SCREEN

Between Stops. Lo-fi comps acted as wireframes.

  • Given my familiarity and past research with Verify, a similar product with an overlapping user flow, there was no need to spend time modeling.

  • A lot of design decisions, such as the font size and weights, and screen hierarchy, were informed by previous and still valid research.

  • I jumped right into visual explorations and it was more efficient to combine this work into traditional wireframing.

 

NAVIGATION SCREEN - Last Trip

On the last stop of the last trip of the day, the primary action is to return to the schedule.

 

NAVIGATION SCREEN

A style exploration phase followed the black and white comp/wireframe session.

  • At this point Zonar did not have a design system, but we did have an evolving color guide. I had a small selection of blues to work with and a guiding principle of high contrast and readability.

 

NAVIGATION SCREEN

Another style direction. Here a stronger hierarchy (than above) is created through color with the dark background contrasting with the lighter bottom sheet.

  • The color ratio between the blue text and background, and concerns about accessibility, was a reason why this style was discarded.