780-633-0415
INFO@PAPER-LEAF.COM

project case study

CAA School Zone Safety Mobile App

https://paper-leaf.com/wp-content/uploads/2018/03/caa-app-overlay.png
^

summary

The Challenge

Every year, local CAA clubs run a school zone safety campaign. The volunteers look for driving infractions, or “behaviours”, in school zones and log them – the data is then used in campaign messaging, designed to draw attention to safety in school zones. In years past, the process was all paper-and-manual-entry based, rife with errors and wasted time. We were brought in, on short notice, to turn the paper process into a digital one via the design & development of a custom mobile app.

The Solution

In order to hit the 8 week deadline, we adopted an agile workflow including weekly meetings with CAA National, our direct client. Each week, we reviewed progress in all regards: CMS implementation, prototyping, design, and more. In the end, we built a web-based mobile app powered by WordPress that allowed volunteers to easily and quickly log infractions; clubs to generate and export multiple reports. The initial run of the app was a roaring success, and will be adopted in 2018 by clubs across Canada.

Key Project Features

  • Workflow Mapping
  • Prototyping
  • UX Design
  • UI Design
  • Front-End Development
  • Back-End Development
  • Reporting & Exporting
  • WordPress Implementation
  • QA Testing
https://paper-leaf.com/wp-content/uploads/2018/03/caa-workflow-sketch.jpg
https://paper-leaf.com/wp-content/uploads/2018/03/caa-highfidelity-workflow.jpg

The Details

To quote our client CAA directly, “School zones have changed a lot in the last decade. Today, nearly three quarters of kids are driven to school, which means there has been a significant increase in vehicle traffic to school zones – bringing with it more pollution and more unsafe driving behaviours.”

Those are some of the reasons CAA runs their School Zone Safety campaign focused around capturing data on and bringing attention to school zone driving infractions. However, in years past, volunteers would log all infractions on paper, then manually re-enter all that data into an Excel sheet – and like all manual and duplicate content capturing and entering processes, with that comes a huge amount of time, and errors. Thus, CAA looked to us to turn the paper-based process into a mobile app – but we only had 8 weeks.

Mobile app login screen

Agile Workflow

Luckily, the only way to hit the deadline for the mobile app was to adopt the style of work we prefer best: agile. We iterated on the key user stories, with the client in each weekly standup. Each week we were able to bring in new workflows, or updated previous workflows, to test assumptions and ask specific questions. These workflows weren’t just limited to front-end; the administrative, reporting, and content management tools and workflows were continually reviewed and iterated on as well. CAA National completely bought in and committed themselves to the project, understanding the nature of iterative work, which was absolutely integral to the success of the project.

UX Design & Workflow Mapping for a Mobile App

As usual, we approached this project with user-centred design methodology – starting with user research and understanding exactly how the paper-based system worked, and why. Key learnings we uncovered included the fact that, during busy periods, users are logging multiple activities in a span of seconds; creating new “behaviours” or infractions on the fly; starting and ending multiple behaviour tracking sessions at different school locations within their region; and more.

This led us to design a system that allowed for extremely fast behaviour logging in the mobile app, with an “undo” notification in the event behaviours were mistakenly logged; the ability to create new behaviours through the app on the fly while also assigning them an icon through a robust icon set; and more. The primary workflow designed included session creation through to behaviour logging, session review, and completion – with the ability to toggle between logging and reporting, without losing your session.

Mobile app workflows

Mobile App Reporting & Club Features

Logging behaviours/infractions is the method of data capture for the School Zone Safety campaign; the next step is pulling reports from the dataset to be used in campaign communications. To that end, we also designed and built a reporting suite for CAA, allowing them to get various reports including: total infractions per location; infraction breakdown per location; infractions per session; and more.  Compared to the old manual entry and Excel sorting system, the new reporting tool saved CAA Clubs countless hours of time while also improving data accuracy.

There are also a few key features required to solve problems specific to each Club. For example, the mobile app also supports bilingualism for the Quebec chapter of CAA, and the system stores custom metadata in user profiles to mark active sessions.  In turn, the metadata are attached to each logged action the user performed so Clubs could vet the accuracy of volunteer efforts.

Technology & Implementation

Like the mobile application we built for Campbell Scientific, CAA’s application was built as a mobile-first web app, using Bootstrap’s responsive framework with a custom UI. Atomic design principles were used, wherein a design system was created, then implemented once across all the variable Club options. WordPress powers the back-end, including user role management (and club-level management). With regard to the WordPress setup: all clubs were managed from a single WordPress install, with each having unique options (for example, Quebec has bilingualism and the ability to mark an area of a school zone, e.g. the NW corner bus stop) – but National can see all data. Handy stuff.

An innovative solution was created to allow for the previously mentioned use case wherein volunteers need to log multiple behaviours within a few seconds in the mobile app, but also control for errors in logging. To that end, the system works as such: tapping a behaviour button doesn’t directly submit a behaviour; instead, it creates a JS Timeout ‘intent to submit’, with a 3s delay. While this timeout is running, the user is shown an ‘undo’ toast at the bottom of the screen that they can use to cancel the timeout manually, preventing the behaviour being logged. These timeouts are stored in a queue, so that if another ‘intent to submit’ is created, it simply adds it to the queue of items. This enables users to ‘undo’ multiple actions in a row, so long as their timeouts haven’t been reached.

The End Result

CAA’s School Zone Safety mobile app was a complete success: on time, on budget, well-received, and most importantly it provided a high-value solution to the problems around the old paper process. The app was rolled out as a pilot for two clubs, and following the success of the campaign and follow-up presentation to all clubs, two new Clubs signed up on the spot. We continue to work with CAA on iterative development and user training for these new Clubs, and are exploring distribution of the app to a partner association in the Dominican Republic.

My boss’ boss was amazed and thrilled with the pilot project and can’t wait to see more Clubs adopt the tool... This is very exciting! This is a big accomplishment within the CAA federation. Thanks!

Senior Manager, Public Affairs Division

CAA National

contact us

Let's make something amazing together.

Interested in working together, or maybe just having a conversation? We’d love to hear what you have in mind, and answer any questions you might have. Let’s make whatever’s rolling around in that brain of yours happen.

Onwards to view The Next Project →

The Paper Leaf Design Weekly

If you love design, you’ll love the Paper Leaf Design Weekly. Join thousands of other designers getting wallpapers, in-depth design articles, free fonts & other design goodies delivered via our weekly design newsletter. Why wait? Join now and don’t miss a beat!