Coach (DriveR) / 2019
DATE Summer 2019 - Present
ROLE Lead Designer
TEAM One Designer (Me) / Product Manager, Technical Program Manager, Dev Manager and Remote Engineers (6)
TOOLS Sketch (Design) / InVision + Craft (Prototype + Code Hand-off) / JIRA / Agile development in 2 week sprints
WHY The number of fatal large truck and bus accidents increased 40% from 2009 to 2017, with 4,889 fatal accidents recorded by FMCSA (Federal Motor Carrier Safety Administration) in 2017 alone. While the distracted driving caused by the emerging screen devices is a significant factor in this growth, not all screens have a negative impact on driving. Zonar recently became one of a growing number of smart fleet companies creating technology for good to help commercial drivers make the roads a safer place.
Coach is a mobile app (Android and iOS) that helps commercial truck and bus drivers reduce unsafe behaviors that are costly to themselves and their fleets in many ways. A “smart” camera detects safety violations, provides audible feedback during trips, and presents video evidence to drivers alongside supporting, motivational information about their safety performance.
SELECTED SCREENS
PERFORMANCE SCREEN
Drivers explore their performance data from the selected date range, and can tab to the previous periods for comparison.
Trips Screen
Cards provide an overview of the trips driven on the selected day.
Selecting a card takes the driver to a map displaying the trip path and location of each incident, with videos of each incident to review.
TRIP DETAIL SCREEN
With the map as the primary focal point of the screen, cards emerge and horizontally scroll from the right side of the screen for further investigation.
Drivers swipe through the incidents or select a map pin to bring incident cards into focus.
DRiver challenge menu
In the overflow menu on each incident card, drivers can request removing (or “flag”) an incident from their record so that it will not count against their performance and score.
This flag interaction is the most important source of control and trust, through “having skin in the game” and never feeling wrongfully accused.
PERFORMANCE SCREEN IN DARK MODE
With drivers using the app primarily outdoors in full sunlight and on overnight trips, having flexibility and readability through dark mode is planned for next year - and a game-changing first for Zonar.
HOW COACH WAS MADE
In 2018 Zonar partnered with a group of machine learning engineers who developed a camera that detects speed and stop signs, lane drifting, accelerating, cornering, braking, and tailgating. They developed a rough and barebones UI, but even with exhausting and extensive sprucing up it could not match the quality Zonar required for customers.
Having been brought in for some improvement recommendations on the original app, I successfully made a case for undertaking a complete redesign from scratch and got buy-in from senior leadership. I was involved in all planning and management activities alongside a product manager, technical program manager, and development manager while also handling every ounce of design work. We worked with a remote five person engineering team in Vietnam in an agile environment.
Most of my first year on the project was spent stabilizing the existing mobile and web apps while I collected data to inform the redesign. For a few months I spoke to dozens of customers running the early “proto” app, did “ride alongs” with drivers in the field, and led weekly calls with customers. Later the same pool of customers were relied upon to provide feedback and participate in testing.
Design of the mobile app was quick, iterative, highly-collaborative, and took place in about two months. I printed and posted my work daily on a wall for the Coach leads and the rest of the Zonar design team to provide constant feedback. Beyond critique and guidance from the design team, I was the only designer to work on Coach. Both the mobile and web projects were significant undertakings respectively, so it was important I chose effective and lean methods to run both projects concurrently without compromising quality.
Having the other leads equally invested in prioritizing quality was the secret sauce for Coach’s success. SUS scores were high, but in terms of sales, it is the most successful new product that had been launched by the company in my nearly five years at Zonar. The number of units running Coach increased 500% from a few hundred at the start of 2019 prior to the redesign, to several thousand six months later - and with the product still in it’s MVP incarnation.
DESIGN ARTIFACTS
PRIMARY SCREENS BEFORE REDESIGN (SLIDESHOW)
Many, many issues with the app created by our technology partner led to my recommendation for a complete overhaul:
Lack of information hierarchy
Confusing data visualization and meaningless metrics
Accessibility issues
Poor/Good/Fair categorization too abstract
Problematic wayfinding
Sloppy visual and interaction design
REFRESHED HOME SCREEN CONCEPT (BEFORE REDESIGN)
Working with a visual designer, a visual refresh and some minor usability improvements were proposed and would have helped - but not nearly enough.
Contrast improves readability
Metrics are cleaner, but not clearer
Hierarchy better, but still lacking
Interactions not intuitive enough
REFRESHED MAP SCREEN CONCEP (BEFORE REDESIGN)
Another proposed visual refresh, also unable to correct the deeper issues with the IA and value of the data and it’s presentation.
INFORMATION AUDIT - Rough pass at the IA taking account for existing features and data.
LO-FI COMP - First pass at interactions, with navigation still under construction
LO-FI COMP - Concept sketch of trip page interaction design.
LO-FI WORK IN PROGRESS
LEFT: Rough pass at the IA worked into an early concept with a header and bottom navigation layout.
CENTER: Playing around with the bottom navigation, card layout, and tabs for filtering.
RIGHT: Map exploration indicating an approach of synchronizing pins to horizontally-scrollable cards.