Hamayal
Hamayal

Autoleap
Cloud-based auto repair shop management

Autoleap
Cloud-based auto repair shop management

A game-changing, cloud-based auto repair shop management software that fuels growth,
enhances user-friendliness, and builds customer trust while making your life easier and your shop
more profitable.

A game-changing, cloud-based auto repair shop management software that fuels growth, enhances user-friendliness, and builds customer trust while making your life easier and your shop more profitable.

Role: Senior Product Design Analyst

Improving workflow for
adding photos to DVI

Key User workflow enabled

Simplified Image Management:
Capture, edit (annotate, add notes), and effortlessly upload multiple photos to an inspection item in just a few steps.
current: 8 steps for 1 image, 8+7n for 1+n images (without annotations)

Bulk Image and Video Selection:
Choose multiple images and videos from your gallery all at once, streamlining the process of uploading them to an inspection item.

Ongoing Performance Improvements:
(Work in Progress, Requires Engineering R D)
Ensure images upload faster while retaining their original resolution and quality.

Technical Problem: Streamlining
Image Management

Technical Problem: Streamlining Image Management

As a tech user, I want to add image(s) to an inspection item and annotate on them in fewer steps so adding annotated images to an inspection item takes less time.

Currently, without annotations, it’s an 8-click process in AL, which contrasts with the more streamlined process of just 2-3 clicks in WhatsApp. Additionally, there is a concern about images captured for work through AL inadvertently storing on the user's personal phone. his challenge not only adds friction to the workflow but also raises privacy concerns.

Office User Problem: Enhancing Image
Quality and User Experience

Office User Problem: Enhancing Image Quality and User Experience

When uploading multiple images from memory/gallery to an inspection item, the ability to select multiple images/videos for bulk upload can significantly save time and effort.
For office users, tech users, and end customers, the quality and clarity of inspection item images are of paramount importance.

The current issue of images appearing blurry upon upload hampers their ability to clearly read codes or examine small vehicle components. This image clarity is vital for the Digital Vehicle Inspection (DVI) to serve its primary purpose of establishing trust between the shop and customer and increasing upsells, ensuring a superior user experience.

Objective: Retain and delight

Scope of feature: Adding DVI Items

Mid Market SMB
Touch point:[Tech App] DVI item

Item: Capturing, editing, and saving image(s)/video(s) to DVI item in fewer steps

Front-end Back-end
Touch point:[Office / Tech App] DVI item

Choosing image(s)/video(s) from gallery, editing, and adding to DVI items in fewer steps

Front-end Back-end
Touch point:[Office / Tech App] DVI item images

Reduce image upload time & retain original image quality upon upload

Front-end Back-end

Current: Adding Photos to DVI Items
w/o annotations

Current: Adding Photos to DVI Items w/o annotations

The overall Digital Vehicle Inspection (DVI) process requires 18 steps for users to upload photos to inspected items.

Current Screenshots and User Flows for Image Uploads

Objective: Retain and delight

Scope of feature: Annotate inspection item

Mid Market SMB
Problem addressed:As a technician

I want to be able to insert arrows and circles when annotating an inspection photo so that I don’t have to try to draw a nice looking image for our customers. This makes it easier for me to convey the important information contained in the inspection photo without spending a lot of time trying to get the drawing right

Problem addressed:As a technician

I want my technicians to use arrows and circles to annotate inspection images rather than free form drawings because they are clearer, neater, and more professional looking, creating more trust between me and my customers and increasing the likelihood that we upsell services.

Product Requirements

  • Users can select from the set of shapes (square, circle, arrow) to be added to the image for annotation.
  • Upon Selecting a shape, shape will be displayed on the image.
  • Each selected shape will have resizing handles (small draggler points) placed at the corners or edges.
  • Users will have the ability to save the annotated image by overwriting the original or saving as new.
  • Resizing by dragging handles up and down.

Feature planning

  • Fewer steps for (capturing +) adding images, videos, & audios to a DVI item to save users’ time and effort
  • Reduces time and effort required to attach media files to a DVI item today
  • Positive qualitative feedback from requesters through CSMs

Proposed Flow: Adding Photos to DVI items
w/o Annotations

(Single upload at a time)

The new workflow streamlines the process to approximately 12 steps with reduced effort. Additionally, we will be implementing enhancements to navigational components and making UI updates.

Designing an Efficient DVI Workflow: Figma Iterations and Prototyping

  • Clear Hierarchy: Establish a clear hierarchy in the user interface.
  • Effortless Navigation: Fine-tuning options to ensure technicians can navigate effortlessly.
  • Inspection Status Marking: Marking inspection statuses within the DVI workflow.
  • Enhanced Media Attachment: Improving the process of attaching images and other media files.

High fidelity Mockups

Inspection Checklist

Inspection Status

Inspection Checklist

Redefining the work flows and adding annotations

  • In our ongoing quest to improve the annotation feature in Digital Vehicle Inspection (DVI) items, we encountered an intriguing challenge: how to best facilitate interactions within the annotation process. Through diligent user research and thoughtful consideration, we've arrived at a solution that balances user guidance with flexibility.
  • However, after comprehensive user research, we recognized the value of implementing constraints for resizing. This addition provides a balance between user freedom and the necessary limitations to ensure quality and consistency in annotations.

Final updated design flow

Future Updates for DVI

Effortless Bulk Upload and Annotation

Under this enhancement, we are introducing a feature that allows users to effortlessly bulk upload multiple images and videos. Whether you have a collection of media in your gallery or you're capturing new content within the application, this new capability will streamline your process. What's more, you'll also have the option to annotate each individual image or video, making it easier to add context and details to your inspection items.

Feature: 02

DVI - Add recommended services /
labor items when inspection item

DVI - Add recommended services / labor items when inspection item

Enhancement requests

User Experience Improvement:
In our pursuit of a more user-friendly experience, we're introducing a side-by-side view feature, facilitating a simultaneous comparison of the Inspection Checklist modal and the Services search modal.

Backend Index Development for Efficient Service Management:
This index will save and display services associated with Inspection Items, ensuring quick access and management of services directly linked to your inspections.

Search Term Passing Capability for Services Modal:
The ability to pass search terms to the right-side Services modal will empower you to search and access specific services more efficiently, saving time and effort.

Understanding the problem

Simplifying the process of converting inspection findings into services on the Repair Order (RO).

The challenge is to make it more efficient for users to turn inspection data into actionable services within the RO. Canned services, while considered, may not be the most effective solution, as they are infrequently used. Users struggle with the repetitive switching between the DVI and RO interfaces, hampering the estimate-writing process.

Objective: Retain and delight

Scope of feature: DVI add recommended services

Enterprise Mid Market SMB
Touch point:Clicks on inspection status

Update inspection status + enter selected state + populate services section if health status = yellow/red

Front-end Back-end
Touch point:Clicks on media item

Open carousel with selected media item showing + enter selected state + populate services section if health status = yellow/red

Front-end Back-end
Touch point:Clicks on notes field

Focus into note field (with insertion cursor blinking) + enter selected state + populate services section if health status = yellow/red

Front-end Back-end

Solution Overview

Office App flows (new = yellow)

User: As end customer, help me with service authorization decision by showing relevant inspected items against each service

Planning workflow: Previously Added’ services

Designing interfaces for the SW view

We iterated on initial designs and collaborated with stakeholders to review and assess the changes in interaction, ensuring alignment with project goals.

Use cases: Previously Added’ services

Fetch all MOTOR service names (irrespective of YMM/MOTOR vehicle ID) from Internal DB that were previously added against selected inspection item

Leveraging Figma Prototypes for User Testing

We employed Figma prototypes to conduct user testing, focusing on unguided interactions, enabling us to identify and address critical pain points, enhancing our user-centered design process.

Behind the screens

Reach Assumption

"50-75% of our user base would readily embrace Digital Vehicle Inspection
(DVI) if our inspection reports included these valuable recommendations.
"50-75% of our user base would readily embrace Digital Vehicle Inspection(DVI) if our inspection reports included these valuable recommendations.

Presenting the Final Design Snapshots for the Product

Based on the feature described above, we have crafted the final design snapshots to showcase the culmination of our design process and stakeholder input.

If user clicks on any field within an unselected inspection item card (status, notes, media etc), card enters into selected state + performs relevant action.

Open send estimate modal with a banner encouraging associations.

When none of the services are attached, a message prompts the user, saying, 'None of the items are selected.' This encourages the user to attach services.

Future Enhancement Focus: Distinguishing Services and Inspection Items

This process begins with bifurcating these elements and subsequently developing design improvements to enhance the overall user experience.

Our primary objective is to streamline the process by associating inspection items with services. This approach, informed by user research, will result in a more efficient workflow. The enhancement will enable a smoother transition when inspection items are linked to services, ultimately simplifying the billing process.