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.

Learnings

Product Manager Learnings:

Timothy Goodwin

The importance of focusing on the problem space was reinforced and I learned how crucial it is to clearly pitch the problem space to a team.

I learned how to guard myself and the team against scope creep and how to ruthlessly prioritize shipping a working MVP on time.

Designer Learnings:

Sanah Ahmad

I've enhanced my knowledge of effectively communicating UX design processes and design choices with my team, and understand the significance of consistent communication.

I have also learned the Agile process and can prioritize tasks efficiently under tight deadlines. Additionally, I am confident in presenting, discussing, and receiving feedback on ongoing work as part of our team's iteration process.

Working with the development team was a collaborative process and I was grateful for the support of a great product manager who made the process enjoyable. To ensure a smooth handoff from design to development, I documented everything in the design files and used Figma as a tool.

Designer Learnings:

Jo Sturdivant

Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.

Developer Learnings:

Joshua Zadok

I have learned the value of seeking clarification and actively listening to the perspectives and suggestions of others. This has greatly improved my problem-solving and communication skills. By taking the time to understand different perspectives and ideas, I have been able to effectively communicate my own thoughts and ideas to others, leading to more productive and collaborative discussions and decision-making.

Developer Learnings:

Vanady Beard

&

As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.

Developer Learnings:

Stephen Asiedu

&

As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.

Developer Learnings:

Innocent Chukwuemeka

&

If there’s anything this time spent building our product has taught me it would be how effective communication and synergy among the team members made working on this product seem effortless. Being a part of the decision making process on the roadmap of our product in order to reach the desired goal has been an eye opening and exciting experience.

Developer Learnings:

Maurquise Williams

&

Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.

Developer Learnings:

Jeremiah Williams

&

All in all this experience was very awesome I learned that in coding with others being transparent is key

Developers Learnings:

Justin Farley

&

I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.

Full Team Learning

Working asynchronously was a challenge for all of us initially. The developers hail from Nigeria and were 6 hours ahead of the designer and PM. We quickly learned the value of an async daily stand up, how to utilize video messages to quickly communicate challenging questions or ideas, and to ensure all deliverables were sent on or before their due dates.