Inspector App

Turn a highly manual process into a fully digitized product


We started by flying to BI&I’s HQ in Toronto, Canada for a workshop. In the room there was the whole CxO board and their request was for a digital app that worked offline for their new Dell Tablets. To be used by their inspectors to cut inspection times.
What the workshop revealed, is that they actually needed a way to track their inspectors activity. As Canada is vast, they didn’t know when their inspectors scheduled meetings, how, how long until they got there and how munch the inspection lasted. Or a way to verify this. So the mission was this: Design an app that’s easy for the inspectors to use and cut their paper process. And satisfy the business need for tracking. This was a bit tricky from an ethical point of view so we posponed development for it for later.

IMG_6050

Turn a highly manual process into a fully digitized product.


Inspection Process at BI&I is highly manual: site visits are manually scheduled, Work Orders are printed and inspection performed using pen and paper, WorkOrder updates and new objects manually entered in IICES, Reports typed manually and uploaded to network folder for review, Loss Prevention Reports created in word and stored on network folders.

Impact:
Reduce the costs and improve the efficiency of the manual process by replacing the paperwork.
Turn paper workorders like these into a digital app.
BitmapBitmap2

LOGIN

I’m not really a fan of wireframing when dealing with clients and user tests. I’ve learned that clients always want to see how it will look and work. So I prefer to go straight into high fidelity design. And create the interactions in something like Adobe XD or Invision Studio.

I tried a more creative way of logging in and skip tap or two.
The system would check if the username exists and immediately display the password field. This is also where the sign-in confirmation would happen.

NYID
NYID typed in

DASHBOARD


Dash

From user interviews, I found out that the most important thing is an easy way to see where the workorders are. So The first thing you’d see after logging in would be a map with your work orders.

The dashboard below is the result of user tests. For instance we found out that the icons without labels made the inspectors confused on what they have to do. In these user tests I used the prototype. Having things behave and animate like in an actual app made me say “This isn’t a working app” a lot of times. I told them what’s the app purpose, that is not an actual app and gave them tasks.

The tasks sounded like:
– Open the filter pane
– Tap a workorder from the list.
– Perform an inspection

They needed to express every thought out loud and at the end to provide feedback.

Here’s a sample of an early feedback session:

 

  • Add Street address to work order map tooltip
  • Have the ability to tap on a map pin and see tooltip
  • Add the ability to increase the font-size.
  • Add the ability to change white/black contrast.
  • Add an “objects” button to the work order overview.
  • View Objects that are due (visual cue)Add the number of objects in workorder card and tooltip
  • Add Labels to icons.
  • Color coded Work Orders based on importance (max 3)

 

INSPECTION

This is the part where I spent most of my ideation time on how to turn what was on paper into a digital view.
So my question to the inspectors was “What’s the most important piece of information you are looking at when you start your inspection?” Because some of the workorders had a lot of information, most of it not important for the inspectors. That’s why I’ve added that “Full details” switch there. If there was something they needed they could quickly access it.

You can see below how lengthy one of these could get.

Turning this:
Bitmap2
Into this
W.O Overview full view
Full Details off.

THE BIGGEST PROBLEM AND AN ELEGANT AND QUICK SOLUTION


The object list required a lot of visual aids that would help inspectors identify what is going on with that object.
Object List Paper
icons
Object List Digital
But the biggest problem, we later learned during a feedback session, was that clients would rush them during an inspection.. They didn’t have the time to tap all the input fields and complete the inspection on site. That they usually open notepad, and using the tablet’s pen then take notes about the inspection and later complete it.



I came up with the SCRIBBLER.
This is a pane that appears as soon as you open an object and can quickly be hidden if you don’t need it.
The inspectors LOVED IT. I later got an email telling me how easy it is for them to use the app and file inspections.

Note: Normally, the easiest solution here would be handwriting recognition. But with this being a PWA, it was out of the budget required for developing it.

 

 

Scribbler

The inspectors LOVED IT. I later got an email telling me how easy it is for them to use the app and file inspections.