Coach (Manager) / 2019

 
 

DATE Late 2018 - Present

ROLE Lead Designer

TEAM One Designer (Me) / Product Manager, Technical Program Manager, Dev Manager, and Remote Engineers (5)

TOOLS Sketch (Design) / InVision (Prototype) / Zeplin (Code Hand-off) / JIRA / Agile Development in Monthly Sprints

WHY If you manage a fleet, driver shortage and turnover is the problem keeping you up at night. With so many drivers in and out, training is a costly undertaking and makes safety even more difficult to ensure. Any manager would tell you that the safety of theirs and all drivers is their top priority on a personal level, but it’s also undeniably a top business priority. According to FMCSA (Federal Motor Carrier Safety Administration). the average cost of a truck accident is $75,000. If you add injuries to the equation the cost becomes $470,000, and soars to $11 million if the worst should happen and fatalities are involved.

Coach is a mobile app (Android and iOS) that helps commercial truck and bus drivers increase safe driving behaviors and learn from real-time feedback when they are driving. Beyond the driver experience (described separately), a significant component of the Coach product is a web app for managers to analyze the Coach data and use it to enrich their safety training programs.

 

Selected Screens

FLEET (HOME) SCREEN

Coach is divided into three main areas: fleet, drivers, and trips. When a manager starts their day, they want to take a look at how their drivers are doing collectively.

  • Home screen provides summary data about the driver, driver cards sorted by lowest scoring to highest, and trip cards.

  • Driver and trip cards are the primary navigation point for browsing.

  • Drivers may also be accessed from search in the header.

  • Style and interactions throughout Coach drove the creation of Zonar’s first design system.

  • Most of the elements on these screens were formalized in tandem by another designer for the library.

 

FLEET COMPARISON SCREEN

Occasionally managers will want to explore fleet performance in more detail, trying to find the answers to questions and improving their driver training practices.

  • Managers can compare up to 6 drivers and/or fleets (divisions, company-wide, or all Zonar fleets/”industry”).

  • High-level data visualizations are generated below the selections.

 

FLEET INCIDENTS SCREEN

This screen, accessed from the flag icon in the header or from a card in the home screen, presents any incidents that drivers have “flagged” or requested to have removed from their record.

  • The flagging feature gives drivers a voice, and lets them claim they are not at fault.

  • We had many debates about how prominent this feature should be - it could potentially be overwhelming to deal with flags on a daily basis.

  • Customers overwhelmingly felt that it was a key feature and their responsibility to deal with these claims.

 

DRIVER SCREEN

Driver cards on the fleet home screen provide summary data about each driver, and clicking on one takes the user to that driver’s information.

  • This screen is where users would spend the most time while actively working on safety training. Tabs divide driver content into 5 areas.

  • Static side panel presents driver summary data that is valuable to have beside content in the main area for comparison and reference.

TRIP SCREEN

Trip cards on the fleet home screen take users to individual trip screens. The trip’s path is shown with pins at the location of each incident. Clicking on the pin, or incident in the list, opens a call out with the incident video and speed graph.

  • Without any technical expertise on the team with maps, the map needed to be kept very simple.

  • Future work will focus on enhancing the contextual data along the path.

 
 
 

FLEET HOME SCREEN - MOBILE VIEW

Coach was built responsively as managers are often meeting with drivers away from their desks.

HOW COACH GOT MADE

I joined Coach several months after Zonar partnered with a company in India who developed a system that combines camera technology and computer vision to detect driving incidents, such as lane drift and tailgating. Initially I performed an audit of the existing interfaces and recommended improvements, but shortly into this effort I raised a red flag and successfully advocated for a complete redesign of both the mobile and web apps.

After a few weeks of customer feedback gathering, there was enough evidence that the poor web experience was Coach’s biggest sales roadblock and it’s redesign was prioritized over mobile (which was also poor, but more stable). We worked with the team of machine learning engineers who developed Coach’s camera technology to build the new web app, which was a high risk decision as front-end development was solidly not their expertise.

A front-end developer was hired by our partner after several unproductive sprints with insufficient work that I could not sign off on. Adding to our woes, prior to the start of the redesign, the Coach team had cycled through three product owners, two technical program managers, and had no development manager. As a result of these challenges, and as the only designer, I had to be very intentional and well-organized in creating an MVP experience that was a compromise in scope, but not a compromise in quality.

Mountains were climbed over several months, and the key to the product team’s success was our alignment in prioritizing quality and not settling for “good enough”. As the project gained stability, and a development manager, we were able to bring Coach beyond MVP and closer to the design vision. Our virtual team became a company model in working with design as I, quite unusually for Zonar, had a seat at the table for business meetings, contract discussions, and nearly everything else the other project leads attended.

The design team used this product as an opportunity to push Zonar’s design system into formation: As I made design decisions on Coach I worked closely with the design team on developing our first proper design system and library. 

Because of the challenges of this project, and not in spite of them, I grew more as a designer and leader while working on this product than any other I’d participated in. Not only is Coach Zonar’s best-selling new product of the past few years, but more significantly it changed the company’s expectations and standards for cross-team collaboration, and gave design leads more seats at the table across the board.

DESIGN ARTIFACTS

COACH BEFORE THE REDESIGN

An audit was performed with a very long list of recommendations for improvements. The web experience only consisted of these two screens.

 

FLEET HOME SCREEN EVOLUTION (GALLERY)

Highlights of the progress made over several months from lo-fi to hi-fi and with countless variations and experiments in between.

 

USER FLOW

A manager searching for and collecting evidence of an accident or incident for training or legal reasons.

 

DRIVer screen - MVP

Over a year we worked iteratively and in a way that would accommodate the limited front-end resources in the first Coach development cycle.

This streamlined version of the driver screen (and the only driver-related screen at that point) was similar in style to the driver screen.

  • It wasn’t sitting well with me how similar the fleet-centered screen looked to the driver screen. It was difficult to know where you were between these pages.

  • User feedback confirmed this assumption and I worked towards a more distinct look for individual driver-focused screens.

 

DVR Feature whiteboard session

I joined the team leads for many sessions where we worked through features and problems.

Users can request a short video clip from any point in a trip. Something notable and worth recording would happen on the trip but would not be captured by the incident recognition technology.

 

TRIP PAGE CRITIQUE

Notes and sketching from a critique with the design team. I gathered feedback from the design and product teams at every opportunity.