Hi Auto Repair < Back to Home

Saving a Business from Falling Behind in Our Technological Society

Hi Auto Repair has been known to be a cheap, quick, and quality auto service repair shop for more than 10 years. With society rapidly transitioning to an “on-the-go” mentality, Hi Auto Repair has been faced with the challenge of maintaining a business that can transition with society to be even quicker in service — all while maintaining the cheap, honest, and quality service that their customers love.

As a business that relies on invoices and receipts to maintain coherency and efficiency in business operations, these documents are vital in assuring that employees and customers have a shared understanding when conducting business.

The Status Quo

Because small businesses usually operate based on their own standards, immediately transitioning to advanced technology can often be a relatively slower process in comparison to larger companies— especially when it comes to document digitization as it requires much time and resources to develop and learn how it works.

As Hi Auto Repair is a small auto repair business of its own which still uses paper documents, a lack in document digitization has been a major contributing factor in its ability to maintain that quick service their customers value. Just hand-writing invoices, receipts, and other important information alone slows the process of business operations.

Thus, working with one Senior UX Designer, our challenge was to design and digitize Hi Auto Repair’s service work order using a software called, KnackHq, with a mission to improve the efficiency and productivity of the user experience of both employees of the business and their customers alike.

What did we need to do to save Hi Auto Repair from falling behind?

Hi Auto Repair’s existing service work order was made of a typical carbonless copy paper — you know, the one where you write on a top layer of white paper, which then transfers that information onto the pink and yellow sheets underneath with a type of dye or ink.

Hi Auto Repair invoice in a carbonless copy paper medium

This process was great before document digitization was introduced into society when this type of paper was commonly used by businesses for making multiple copies of an original document.

However, in considering how to enhance Hi Auto Repair’s employee and customer experience, simply digitizing their work order wasn’t going to be enough. To really empower their users to provide quick and productive service, the Senior UX Designer and myself needed to provide Hi Auto Repair with a digital work order that wasn’t just on a digital platform, but also catered to their business operation experiences and process as well.

"Okay, I get it. So carbonless copy paper is an outdated and slower process. How did you solve that?"

User Research

As the UX Designer and Researcher, I first conducted user research on both the customers and the employees of Hi Auto Repair to gain an understanding of the some of the values that needed to be incorporated into the design.


I looked at the business’s Yelp reviews, Google reviews, and comments on their Facebook page to see what their thoughts were from an outside perspective and then analyzed the data to come up with some key insights:

Customers care about quality service and honesty because they want to trust that they are feeling safe and cared for

Customers care about cheap pricing because they want to be able to afford the service

Customers care about quick service because they want to save time

Customer reviews highlighting a couple of key characteristics that are valued when visiting Hi Auto Repair
Affinity map used to analyze some high-level insights regarding customer values in repair shops

I then interviewed the employees to understand their current experience and process using their existing work order. If this was not a remote project, I would have taken a step further to conduct direct and participant observations and contextual inquiries. However, with the I circumstances I was placed in, in-depth interviews were the main source of research.
From the interviews, I was able to understand that their process was heavily dependent on communicating their current statuses in each step in the repair process from initial contact with their customers up to final payment transactions.

We also understood that employees care about efficiency because they know saving time for their customers brings loyalty and return visits.

Empathy Map illustrating some of the stressful feelings that might be associated with an employee’s experience when trying to conduct their business operations while meeting customer satisfaction
Journey Map illustrating employees’ frustrationing experience using their current carbonless copy paper method of invoices

From this, our goal was to design the work order to be highly interactive in a productive way from beginning to end as their current process deemed unproductive in certain areas.

Market Research

We then looked at Hi Auto Repair’s current work order and did a competitive/comparative analysis that highlighted the pros and cons of other types of invoices in the automotive industry.

From this, we were able to pinpoint several design strategies that suited both the customers’ and the business needs.

It needed to:

Follow a flat design to emphasize minimalism and simplicity

Provide a clear user flow to improve usability and efficiency during the repair process

Maintain the business brand values to increase customer business and loyalty

Hai Auto Repair 2’s invoice includes the invoice number, separation of parts and labor, as well as a clear total and payment section which provides a clear user flow and efficiency.
Zillium Inc’s invoice offer minimal and simplistic designs that provide a clean overall look to enhance visibility and usability

Sketching Out Ideas

Now it was time to brainstorm all of our ideas and sketch out multiple designs that included the necessary functions the work order needed to have. With the KnackHq software in mind, we sketched out ideas for wireframes for the work order based on user case scenarios and the KnackHq technical features.

Upon coming up with several sketches, it was important that we tested our ideas with others as well as the users by observing how intuitive and productive it was for them when interacting with the design — keeping in mind that the design was to be used interactively throughout the process of conducting their business.

Early stage sketches and lo-fidelity wireframe
Usability testing with 3 users demonstrated the following key insights:

Buttons needed to be larger for easy gestures and accessibility on a mobile device or tablet

“Labor” and “Parts” needed to be separated for both user flow and efficiency

Ability to edit data needed to be more distinguishable for accessibility, and require fewer steps for efficiency

Creating that Visual Appeal

After several usability tests and multiple mock-ups, it was time to look at the design in a visual standpoint — one that was professional and effective enough to keep up with the business values.

I chose to create a mood board that highlighted the values, styles and visual language that Hi Auto Repair is known for: a cheap, quick, reliable, and quality auto repair shop. I also based the mood board on some of the basic themes found throughout the competitive/comparative analysis of other auto repair businesses.

Mood Board highlighting the values, styles, and visual language to be used in designing the new logo

Using this mood board, I then came up with several sketches of a possible new logo the business can use on their work order with consideration to other areas where the logo could be used. Two major concerns were the colors and size of any words or images used in the logo in relation to the cost of ink, visibility, and resources needed to produce an effective logo.

Mind Mapping and brainstorming some initial sketches for the logo
Logo screenshots created with a Wacom tablet, Sketch3, and Photoshop

Working on Drafts

From our sketches, we were able to come up with our first draft, but quickly found that there was room for many revisions and re-iterations for each draft as we progressed.

Hi Auto Repair First Draft
Hi Auto Repair Second and Third Draft
Hi Auto Repair Third and Fourth Draft

The End Result

Taking a look at the final design, the employees of Hi Auto Repair can interact with each phase of the repair process including:

Modifying important vehicle information

Inputting labor and parts

Updating it for other employees to view the current status of the vehicle or repairs

Requiring their customers to interactively sign their autograph using a mobile device such as a tablet.

Hi Auto Repair Client Screen Shot

Despite being a remote project, the end results yielded a design that not only enhanced the user experiences of both customers and employees, but also provided a usable and efficient way for Hi Auto Repair to conduct business in a technological society.

Check out Hi Auto Repair's business website here:


View Next Case Study: Life Alert | Nido >