Overview

Service Quoting is a dealer-facing tool built as part of the Xtime platform, designed to enable Service Department users to create detailed estimates with accurate pricing. Part of the success of this product hinges on its integration with other apps within the product ecosystem. The ask was to integrate the tool with Engage, a tablet-based app for expediting the check-in process for service appointments.

Challenges

Every project comes with its own set of challenges and complexity, and this one was no different. Some of the high level challenges worth noting:

• Cross-product integration
• Cross-team collaboration
• Cross-platform experience

Kick-Off

Given that this was a cross-team effort, the kick-off looked a little different than most. We started with a demo by the Service Quoting team to better understand the tool, the use cases driving it, and their intended users.

From there, we begin gathering a list of stakeholders, overlapping products and the teams involved, and loose timelines. You know, the usual stuff!

It's worth noting that our particular brand of product development embraces the Double Diamond, LUMA Human-Centered Design, and the Lean Canvas.

Problem Discovery

Before jumping headlong into implementation, we had to address some key questions:

• Is there a current need to create a service quote during check-in?
• If so, where in the existing check-in workflow do we surface the quoting experience?

Lean Canvas - Problem

Most projects start with our flavor of the Lean Canvas. It serves as a framework for identifying what we think we know and, more importantly, highlighting what we don’t know.

From surfacing the knowledge gaps and questions we have around the problem space, we begin to create a discovery plan of HCD activities to find the answers and close up the gaps.

Research

After identifying additional knowledge gaps, we needed to validate the problem at hand as well as gather additional information around the context of use. In collaboration with my product partner, we decided to start with a survey to, then, be followed by a quick round of user interviews.

Solution Discovery

For implementation to be successful, we had to address these addtional questions:

• Where in the existing workflow do we surface the quoting experience?
• Will the integrated tool work on tablet with considerations for a smaller viewport and touch interface?

Lean Canvas - Solution

Returning to the Lean Canvas, we continue the process by trying to define the solution space and creating a plan for gathering information and addressing any outstanding questions we have.

More than an academic exercise, we begin trying to answer some of the practical questions around project scope and context.

What can be adopted from Service Quoting?

1. Dashboard
2. Create Quote
3. Edit Quotes
4. Sending Quotes
5. Collaborating Quote
6. Collaboration Tracking
7. Service Search
8. Reporting

What’s the context?

1. Walk-in, create quote on the fly.
2. Helping others (dealership employees) with a quote
3. Bringing in quote services from a quote into an establish appointment (merging)
4. Displaying un-actioned quotes within the awareness of declined services or prior visits

Task Flow Analysis

With a more defined general context, we needed to better understand the task flows for two products at a high level and explore how they might mesh for the integration.

And since this was the second phase of an ongoing cross-product effort, we also needed to understand the current integration to provide a consistent experience across solutions as well as learn from any key takeaways.

From the analysis, we were able to to start zeroing in on the primary app-specific workflows and edge cases.

Primary Workflows (Happy Path)

1. View Existing Quote
2. Convert Existing Quote to Appt (Walk-In)
3. Attach Existing Quote to Existing Appt (During Check-In)
4. Create New Quote

Edge Cases

1. Merging a quote services into an established apppointment.
2. ??
3. ???

Workflow Mapping

With our primary workflows and potential edge cases defined, we needed to map out the screens that aligned to these workflows in order to start ideating on changes to the information architecture, interaction design, and UI.

Note: Even for known or mature products, it's standard to conduct these mapping sessions as somewhat of a sanity check and to dispel any false assumptions about how the apps work.

Feasibility Analysis

In addition to all the above, this integration also the complexity of lving on a different technology stack: Service Quoting was built for the web, Engage was built for native mobile (tablet). From this note only raised platform concerns, but also usabilty concerns as the form factor had changed.

The above screens are from the two phases of UI audit that I performed while accessing the standalone quoting tool from my iPad Mini. In it, I was looking specifically for not only layout issues due to the smaller viewport, but also issues with touch targets, gestures, and conflicts with the virtual keyboard and form inputs.

In parallel, the Engineering team ran a spike to investigate options for how to complete the integration at the implemenation layer. There basically two options for a path forward:

1. (Re-)Build everything in native UI
2. Pull the existing UI in via WebView

Delivery

After several rounds of conversations with stakeholders, users, and the teams involved, the following was what was delivered for MVP.

MVP Definition

1. View existing service quote
2. Convert existing service quote to appointment
3. Create new quote

Future Workflows

Future state workflows illustrating Service Quoting use cases meshed with the primary use case for Engage were created and discussed with the two teams. The below expample includes some of the notes captured from our conversations to address questions and concerns that were voiced as well as some technical detail.

Mockups

The part that most people associate UX Design with, the mockups are probably the most tangible aspect of the recommended solution aside from an interactive prototype (below) and working software (of course!).

The mockups above illustrate the main touch points for the integration and call out some of the technical challenges of the overall effort.

Interactive Prototype

For complex problem spaces, interactive prototypes are essential. They help to highlight potential gaps in the workflow or interaction design that cannot be easily seen in static mockups.

In this particular case, it helped to highlight what might happen when an existing quote was added to an existing appointment or the challenges with creating a seamless experiences as the apps cross over from native to web then back again.

Outcome

In a plot twist, the decision was made to pivot and invest in other priorities. The initial questions we asked around product-market fit and problem validation inpired leadership to reconsider the effort.

From a product discovery perspective, I would consider this a success. Even though time had already been invested in solution discovery, techinical feasibility, and initial concepts, the company saved resources by redirecting to other efforts.

Morale of the story: Having a proper discovery process works!