Daniel Ly.

Designer

Daniel Ly.

Designer

Daniel Ly.

Designer

Daniel Ly.

Designer

Guided Install App

User interface, User experience (2024)

Project Duration

3 weeks


Role

User experience, Visual design, prototyping


Project Duration

3 weeks


Role

User experience, Visual design, prototyping


Project Duration

3 weeks


Role

User experience, Visual design, prototyping


Project Duration

3 weeks


Role

User experience, Visual design, prototyping


Context


With Nauto’s Installer mobile app, customers can effortlessly follow a guided installation experience, making it simple to install, replace, upgrade, reassign, or remount devices with a seamless and intuitive design.



Problem


We were seeing a high number of devices being reported as defective, primarily because they failed to capture any events on the fleet app, which posed a risk of missing critical collision data.

Research and results after investigation


Through a collaborative investigation with cross-functional teams, including Device, Perception, and Product, we thoroughly reviewed installation histories, device configurations, and fleet app event logs. This analysis led us to identify the root cause—issues stemming from the initial installation process. To resolve this, we deployed experienced installers on-site to re-install the devices. Within a few hours, the devices began capturing events correctly and performing as expected.


As a result of these findings, the solution was implemented to enhance the installation guide within the mobile app. The update provides clear instructions to install the device closer to the driver, ensuring better visibility of key factors such as the driver's facial features, hand movements, and seatbelt status.

Competitive research


I drew inspiration from researching hardware products, focusing on how they guide new users through installation. Across the industry, competitors like Verizon Connect, Motive, Netradyne, Samsara, and Lytx provide instructional content, typically in the form of printable PDFs and YouTube videos for a more visual, human-centered walkthrough.

However, their messaging around device placement on the windshield tends to be vague, which may contribute to suboptimal performance. This lack of clarity stands in contrast to Nauto’s approach, where precise installation guidance plays a critical role in ensuring superior device accuracy, as demonstrated in recent head-to-head studies.

Iterations

For the first iteration, we already had a component structure which included Top bar, Title, Image, body copy and CTA button. This part of the process was really about massaging the copy and nailing the imagery or visuals.

Design decisions


For the first two steps. the feedback was there was a lot going on. The use of photography painted the overall bigger picture well, but made the scene busy and potential of user confusion to focus on what exact information needed to be digested.
To address this, we decided to use illustrations in place of photography. I am able to simplify and remove the noise and provide a more focused less cognitive load on this screen.



The product manager decided that users would only go through the placement guide once, with subsequent visits being optional.l. I responded by introducing a distinct color palette for the placement guide flow, signaling to users that this is a separate process from the installation flow, providing a clearer and more intuitive experience.



Solution


To make device install instructions clearer, we can improve our guidelines. This will help ensure we have the proper inputs for Nauto’s detection models.

  1. Improve communication of installation position choices:

    a) Adding visual cues of priority of more favorable installation positions
    b) Adding 2 additional installation positions that are more favorable

  2. Improve communication of driver’s head positioning:
    a) Ensure the driver’s face remains unobstructed by vehicle parts like the rearview mirror or sun visor.
    b) Provide adequate space and padding above the driver’s head in frame, this will address variations in driver height, seat adjustments and head movement.

  3. Improve communication to full upper body and hand visibility:

    a) Ensure that the driver’s entire upper body is clearly visible in the image. especially the hands, to effectively detect actions like using a cellphone, smoking, or holding objects.

  4. Improve communication of Inclusion of key elements:
    a) Include the driver's lap and seat belt buckle in the frame, along with the steering wheel, if possible. (The feasibility may depend on the distance from the windshield to the driver, which is influenced by the type of vehicle)

Outcome

30%

30%

Reduction in support tickets

50%

50%

Decrease in number of remounts

50%

50%

Reduction in return trips to customer sites