ProDemand
A Design Project for Mitchell1 - A SnapOn Tools Company
Executive Summary
The launch of Mitchell1’s first on-line subscription-based program was built to help auto service professionals work faster and more accurately.
This automotive repair software app provides the tools that auto repair shops needs for maintenance, diagnostics, estimates and repairs.
THE PROBLEM
Not Enough Sales
Need to generate more sales than the current Mitchell Manuals database and content library was generating.
Need for an end-to-end business solution
Customers are looking for a full, end-to-end business solution to help run their businesses better. Current customers use different applications in order to run their repair shops, which creates a fragmentation.
Desktop Only Solution
The current product was a desktop only solution. Service technicians were requesting a tablet friendly version of repair information for the growing use of tablets while doing repairs in their bays.
THE PROJECT
Timeline
12 months (2 week sprints)
Make of the Team
- Vice President – Repair Systems & Information, Snap-on Inc.
- Senior Director, Product Dev.
- Product Owner
- Lead UI/UX Designer <—me
- Business Analyst
- Lead Software Engineer
- Senior Software Engineer
My Role
- UI/UX Design
- Interaction Design
- User Research
- Storyboards
- Wireframes
- Iconography
- Data Visualization
KEY GOALS
Generate Sales
Introduce the first Windows-based repair information and shop management system offered in a subscription-based sales model.
Create a Whole Solution
Create an application for independent vehicle repair shop owners to work more efficiently from the moment the customer drives up, to the final invoice and beyond.
Support an intuitive way for users to find repair information on any specific year/make/models of vehicles and support an estimate generator for shops to provide accurate and customized quotes for their customers.
Create Trust through Ease of Use
Navigate between modules no matter where you are in the product. Select and return only relevant information that the user wishes to see due to the year, make and model of the vehicle that they are working on. Structure content in a way that encourages interaction while displaying information that is easy to understand.
Design a tablet friendly version of the application for the growing need of repair technicians utilizing tablets for repair reference and instructions in their bays.
THE PROCESS
Research
In addition to gathering competitor research, I conducted onsite interviews in repair shops of people using their favorite repair information tools.
Along with the SnapOn Tools Innovation team, we conducted numerous interviews and observations and used the information gathered about habits and preferences to form our product.
Identify the Users
I worked with an agency named Sterling-Rice Group in Boulder, Colorado to complete a fully fleshed-out journey map.
This exercise helped us to see visualize interactions, needs and perceptions as each person use a product or service. The output was a visual board that laid out the entire customer journey, helping us to design solutions for key pain points.
Journey Mapping
For each step in our Journey Mapping Process we applied the following:
- Create a line for the people involved: car owner, service advisor/writer, technician
- Map out key activities at each stage
- Map out what each person is thinking, to identify their emotions
- Determine the people and things involved at each step
- Identify desired outcomes
- Identify key people and things the person interacts with
- Mark key business drivers
- Identify pain points
Key Findings and Pain Points
- All activity in the shop starts with the car, and can be organized by it.
- Diagnosis of the car’s issues is the key business driver.
- Waiting for approval is an efficiency loss in the shop.
- The constant back and forth between the Service Advisor and customer make it difficult to manage the technician’s time.
- Customer invoicing and follow up is a key step, and is often inconvenient for both the shop and the customer.
DESIGNING A SOLUTION
Global Elements Identified
Vehicle Selector
- Year/Make/Model Selector
- by VIN
- by Vehicle Selection History
- Header
- Navigation
- Global Search
- Quick Lookups
LOW FIDELITY WIREFRAMES
Dashboard
Creating low fidelity wireframes helped me to confirm and communicate the different global elements and page designs that were needed.
Below is a sampling of the pages that I created in Sketch.
1 - Navigation in a Collapsable Drawer
- We worked on some different solutions for the navigation of this robust product. We solved it with some careful treatment of breadcrumbs.
2 - Header
- Early prototypes played with the search being in the global header. It was changed to the vehicle selector on final output as it was apparent that all results stem from the vehicle identification.
3 - Relevant Data Displayed
- Once the vehicle has been id’d, a top ten list of component failures appears with the detailed graph how this information is determined based on mileage of the vehicle.
Search
1 - Navigation Levels
- Displaying the breadcrumbs in the navigation drawer, helped us to accommodate multi-layered menus in the main navigation.
2 - Global Search
- We purposefully put ‘Search’ at a category level since all relevant data is based off of the unique vehicle identified.
3 - Search Results
- Dynamic search results appear below the search field. This also included results from other data platforms that could be included in the subscription. In this example it shows some SureTrack (Community Forum) results as well.
HIGH FIDELITY WIREFRAMES
Data Visualization
This responsive solution featured many intricate parts, from merging data silos on the back-end to displaying multiple tasks on the front-end, all while making it looks seamless to the user.
Below is an example of how we choose to display some of this powerful information (Common Component Failures) in an easy to use user-friendly way.
Quote Generator
The ProDemand product also features a very robust quote generator tool for the Service Writer to use.
Editable forms were a must in this section so that the user can properly put together an estimate for a customer’s car that needs a repair.
Each shop has different pricing for their services as well as parts, so we made it easy for the user to customize their estimates for their specific shop’s needs.
1 - Entry Form
- Easy form entry included at selector for either ‘Parts’, ‘Labor’, or ‘Misc.’
- Editable fields for ‘description’ and ‘Part #’ as each shop has their own system.
- ‘Quantity’, ‘price’, ‘rate’, and ‘hours’ can be pre-set by the shop. This enables the Service Advisor to fill out the quote quickly and accurately.
1 - Editing Functionality
- Quick functionality for each line item, including the ability to ‘duplicate’ the line item, ‘delete’ the line item. ‘Delete All Rows’ and WYSIWYG drag and drop to re-sort line items.
OUTCOME
Increased Sales
This resulted in a better customer experience, which drives customer satisfaction, retention, and revenue.
Responsive Solution
Service technicians can now use a tablet friendly version of repair information while doing repairs in their bays.
A Whole Solution
Time is money for our customers: The faster they can diagnose problems, the faster they can repair vehicles. We have been successful in helping our customers fix cars more quickly by providing the most comprehensive information about cars and the parts most likely to fail within seconds.
The solution that we delivered helped our customers save time and money by being able to give them the information needed to repair vehicles as quickly and efficiently as possible.
TAKEAWAYS
Creating a mood board got this project kicked off and kept us all on the same page.
From designers, developers, stakeholders, and the product manager. I created the mood board and socialized it right away and often to be sure that we were all sticking to an agreed-upon design.