Derive VQ Installer

Solutions

1. Lack of Transparency

Solution: Better categorization of data + subtle animation

This animation shows the large collection of messages displayed during installs from the previous version (left) and my solution for organizing them in a way that was meaningful for install technicians.

The previous app experience during VQ installations presented technicians with a flurry of messages, some only lasting a fraction of a second. I collaborated with the mobile dev and firmware engineers to decipher what was happening during this process and essentially translate what all these messages meant. We organized the different messages into categories based on things like the type of communication occurring, e.g., VQ-to-cloud vs. phone-to-cloud, and, most importantly, points of failure. This turned out to be crucial for solving the issue of poor error messaging (see section two below).

I'll admit that it wasn't immediately clear to me why technicians frequently complained about this part of the experience, even when no errors occurred. After all, the app was clearly doing something during this process, and what did they care what was going on in the background? It wasn't until speaking with them directly that I realized what they were looking for was a sense of empowerment. Given all of the potential things that could go wrong in this process, they wanted to know exactly what the app was doing during each step so they could take action as soon as possible.

I created subtle animations to indicate where and when data was flowing.

Clarifying Status With Animation

An important part of this solution was the inclusion of animations to indicate the flow of data. By displaying icons of the phone and VQ device on the install progress screen, I was able to indicate exactly what type of communication was occurring during each step. This was especially well received by install technicians because it allowed them to quickly identify what was happening and respond if needed—finding better cell coverage for cloud-to-phone events, for example.

The mobile dev and I went through a long series of trial and error to get these animations just right. At first we tried animated GIFs but the file sizes were too large and the quality was not great. We also considered using small videos but that turned out to be impractical. The solution we arrived at was Airbnb's Lottie. I created the high-framerate animations in Adobe After Effects and handed off the tiny Lottie files (~12k per file 😎) to the developer who was able to quickly install the library in Xcode.

2. Error Handling

Solution: Removing dead ends by making errors actionable

Prototyping was an essential part of defining and documenting all of the app's potential error states.

There was a frustratingly large variety of reasons a VQ installation could fail, and the initial implementation of error messaging gave technicians little to no insight. By collaborating with VQ customer support, the dev team, and install technicians, I created an inventory of the different failure states for the app and incorporated appropriate solutions—either through improved copy, or by branching the app into further actions that install technicians could perform.

One example of a frequently encountered error occurred when a VQ was plugged in and failed to identify a vehicle identification number (VIN). This typically happened on older-model vehicles and required install technicians to call customer support to have the VQ and VIN associated in the database manually. I collaborated with the database team and others to incorporate these extra steps into the app, allowing the install technicians to complete any installation without external help.

3. Device Identification

Solution: Sprinkle in some beeps, boops, and context

Showing some of the improvements that I made to the app's default list view.

One of the first problems that I observed in the original version of the app was how difficult it could be to identify and select the correct device. There was an audio locate feature for confirming the correct VQ by making it beep, but the feature was not super discoverable and the tap target for the button was quite small. There was also no way to discern a previously installed VQ from one that was ready to install. I generally cleaned up the UI and thoroughly tested the results to confirm everything had improved.

Another element that I pushed for in this solution but was unable to get included were vehicle photos. I had a hunch that including an image of each vehicle could go a long way toward making visual recognition faster and more seamless. I confirmed this by including vehicle images in prototypes and clocking the improved recognition times. Ultimately, the idea of including images was abandoned for performance reasons, but the research turned out to be invaluable for a subsequent project (see Epilogue below).

4. Refreshing

Solution: Persistent feedback

Detecting and indicating that new vehicles were present was a more energy efficient and user-friendly way of implementing refresh.

An often requested feature that wasn't in the app's initial version was the ability to refresh the device list. Without this feature, early versions of the app refreshed automatically, causing disruptive shifting of the list and unwanted taps.

When I recommended adding pull-to-refresh, the mobile dev suggested that it might be too advanced of a gesture to include for our audience. I initially balked at this suggestion, then I setup interviews with installers and confirmed that the dev was correct—pull-to-refresh was not necessarily a ubiquitous or discoverable gesture for all those using the app.

The compromise solution that we implemented turned out to be beneficial in two ways: it leveraged the pleasantly smooth experience of pull-to-refresh while providing a clear and persistent indicator of when refreshing might be necessary. This last point was important because refreshing the list was not a trivial action—it measurably increased battery drain for both the phone and vehicle by forcing greater bluetooth activity.