Dr. Car Quotes

Problem Background  

This problem originated from our various experiences at auto shops. We all noted that we would receive wildly different quotes for the same repair or maintenance item. Conversations with others revealed a common theme: it is almost impossible to anticipate a car repair bill. Formal user and market research revealed that the problem was not isolated to our experiences and that the current tools and solutions available did not adequately solve the problem.

User Pain Points

• 89% of users surveyed do not have money saved for car repairs. This made unexpected repairs challenging or impossible.
• 4 of the 6 interviewees shared feelings of helplessness or lack of control over the costs associated with repairs, as well as a sense of urgency to get the repairs completed as quickly as possible.
• 71% of respondents stated that they do not price compare when selecting an auto shop. The most common reason for this was lack of price transparency.

Feedback

There were three key insights that came from the survey and user interviews. In order to keep the scope of this product hyper-focused, we identified the need for quick price comparisons as the most valuable to users. 

• 6 out of 9 users mentioned – unprompted – that they wanted an easy way to compare local prices.
• Auto shops do not post most prices online.
• Quotes are almost always given after a diagnosis. After receiving a quote from one mechanic, shoppers were unlikely to take the car to another, even if they knew there was a cheaper option.

Solution Explanation

Based on our target users' pain points and expressed needs, we knew that the solution should quickly provide clarity on repair bills and provide a way for customers to compare local prices. To make this a MVP, we opted for the following features:

• Select a repair and see general price range for that repair;
• For the selected repair, display the 3-5 most affordable options nearby.

Lofi & Hifi Mockups

We recognized that most users of Dr. Car Quotes will be using a mobile device, so we put our primary focus on mobile designs. 

Lo-Fi Mockup

Hi-Fi Mockup

Shipped Version

Once our mobile designs and workflow were addressed, we made it desktop accessible too.

Iterative Design Learnings

We began the project by conducting user and market research and analyzing the results. Through the process of card sorting, I created a user flow for the web app, "Dr. Car Quotes." During the ideation phase, I recognized the importance of user interviews and was grateful to be on a team that valued this input.

We wanted to create a fun and memorable name for the app. After some brainstorming, our designer landed on "Dr. Car Quotes" and the rest of the team loved it. We aimed for a simple and clean design that incorporated a character users could trust as a reliable source. The color scheme of blue and yellow was chosen to represent honesty and satisfaction.

After iterating through the low-fi and high-fi designs internally to ensure they met our scope requirements, we used Figma to create a prototype and test it with users.

The user feedback indicated that the MVP was on target for its goal of providing customers with clear quotes and confidence.

It also revealed a number of UI/UX improvements that needed to be made. The three we chose to act on were:

• Giving the user an action to complete their experience with Dr. Car Quotes. We incorporated a “click to contact” feature.
• Removing the confirmation page. This page confused or frustrated all of the users who tested the prototype.
• Refining the navigation elements to make it clear how to move forward, back, and navigate to the home screen.

Technical implementation

Where is it hosted? 

• Database: Smarter ASP.NET
• API Project: Azure
• Frontend: Netlify

What is your tech stack?

Backend

• ASP.NET Core (Web API)
• C#
• Microsoft SQL Server
• Entity Framework Core

Frontend

• React
• Vite
• TailwindCSS

High level journey of a request

• Backend tools are responsible for handling HTTP requests from the frontend, querying the database for data, and returning the requested data to the frontend as JSON responses.
• The frontend then performs the necessary mutations on the received data and displays it to the user in an interactive fashion.

Technical challenges

What was the hardest part of development?

• Getting a reliable source of repair quotes data was one of the major challenges we faced during development. Using demo data as a temporary solution allowed us to move forward with our work.
• Implementing the car make and model selection. The default html select was insufficient, so we had to search for a select library with our specific needs and learn to use said library. Also, we later found out that the format of the data received for this needed some complex mutation before we could use it the way we needed and still get it to change in the UI as the user interacted with it.

Does your app have any scaling issues?

• The database is hosted on a cloud provider that offers limited hosting resources on a free plan, which last for 60 days. While this has not caused any significant scaling issues for now, as the number of users of our MVP increases, it might become necessary to consider upgrading to a paid plan or implementing additional resources to ensure optimal performance and avoid any potential scaling issues in the future.
• When the dataset (cars and car issues) in our database grows, the frontend would experience some noticeable lag when loading these data. Mostly during TFP(Time to First Paint).

What are some key takeaways?

• Innocent: As the dev in charge of the Frontend, I had to continuously be in communication with the backend dev so that I could ensure that the structure of the API was built in line with what the design showed. I was in constant communication with the team’s designer during the design sprint, giving feedback to make sure that the design choices were those that could easily be implemented during the relatively short duration of the program.
• Zadok: While working on the database design, effective communication facilitated an easier and faster design process by enabling me to understand the frontend engineer's needs and ensuring a seamless integration between the frontend and backend.

Future Steps

We all enjoyed working together on this project. We see the need for and the potential success of this tool so we plan to keep up the conversation about how to source the data for auto shops and how to effectively monetize the tool.