Rating Portal | Responsive Web App

Portal for Dealerships to Sell Car Warranty Products

Scope: 10-week long re-design project focused on defining 
and designing a MVP Portal Design

My Role: Lead UX Researcher & UX Designer

Client: Automotive Client

The Challenge

The client wanted to re-imagine and consolidate their two current rating platforms into one single, unified portal experience. This project focused on re-designing an MVP Portal to allow F&I Managers at car dealerships to rate and contract car warranty products for consumers.

Business Goals & Intented Outcomes

+ Understand current state user flows and identify areas of improvement to increase overall user satisfaction

+ Simplify the overall UX of the existing tools into
one single experience based to save dealers time

+ Improve the overall experience for dealers using the system so it's easier and faster to sell warranty products

Methods Used

User Interviews, Design Workshops, Wireframes, Prototyping, UX/UI Design, Usability Testing, Surveys

Key Research Question for the Project

+ What is the current process for F&I Managers when creating a rate and contract for a new car customer, and what are the major pain points associated with the current state?
+ What are the areas of opportunity to improve the experience in the current phase, and for future phases beyond the MVP?
+ How can we combine the two current experiences into one new experience?

Final MVP Design: Solution Overview

The final solution was a streamlined platform for F&I Managers to step through the rating and contracting process. The design intended to reduce cognitive load by ordering the steps in a logical sequence.
Landing Screen

A straightforward and clear starting point to make it easy for F&I managers to get started creating a new quote for a customer.

Simplified Top Navigation

The top navigation was simplified to make it clear was dealer the user was logged in as. The design of the top nav was also chose to ensure it could be flexible to expand and include new features.

Guided Stepper

Streamlined steps were created to make it easy for the F&I manager to follow the process and steps that need to be completed to finalizing the contract, ensuring fewer mistakes and time spent collecting all the information.

Rate Selection Grid

Design a rate selection grid that enhanced the current state, by simplifying drop down menus and indicators.

Quote Summary View

Final summary view cleanly shows the F&I Manager and customer all of their selections and final prices before finalizing the contract.

Dealer View

Implemented a "Dealer View" toggle to make it easy for Dealers to manually adjust their profit margins while keeping it hidden from customers.

Process Overview

Generative Research

Discover

Ideate & Prototype

Deliver

Test

More below on why we tested
after delivering designs

Competitive Analysis, 4 Semi-structured user interviews, and 3 interviews with internal portal SMEs

Used insights from generative research to determine design requirements & create wireframes.

Created a prototype of the new experience to gather feedback from stakeholders.

Refined the design based on usability test, and created a design system to apply final visuals

1:1 usability studies to validate the new process and determine overall ease of use.

Wireframes

Hi-Fidelity Designs

Where I joined the project

Development Handoff

Qualitative Usability Testing

Prototype

Discover

Generative Research

Our team conducted a Competitive Analysis, Semi-structured user interviews with Dealer Groups, and Internal Stakeholder Cognitive Walkthroughs to better understand the current state and start identifying future state needs.

Competitor Rating and Contracting Platforms

5

Overview

Review other rating and contracting tools to identifying potential areas of opportunity and gaps in the current portal experience.

Research Goals

1. What features is the current portal missing that could add value?

2. What trends exist in other platforms that the new portal design should include?

Internal Portal SME Interviews

3

Overview

Learn more about how the current portals function, and observe the current features in use in a live cognitive walkthrough.

Research Goals

1. Better understand current portal capabilities and potential scope.

2. What assumptions do our stakeholders have about the current portal design, and what if anything have they heard from their customers?

4. How do the two current platforms differ, and how are they they same?

Semi-Structured Interviews with Dealer Groups

4

Overview

Capture qualitative data from F&I Managers currently using the platforms to understand what works well, and areas from improvement. We interviewed F&I Managers from the same Dealer Groups together.

Research Goals

1. How do F&I Managers feel about the platform today? What tasks do they perform on the portal to fulfill their responsibilities?

2. What prevents current users from being able to efficiently create a quote and contract for their customers?

3. What are the “quick wins” for improving the MVP design?

Key Research Insights

Triangulated insights from our Semi-Structured Interviews, Internal Stakeholder Cognitive Walkthrough, and Competitive Analysis.

01
The current system had a lack of customer customization need so the system will provide the right needs.

Participants interviewed revealed they informally interview the customer at the start of the rating process to understand their needs. The platform should be easy to customize necessary information to fit customer needs.

02
F&I Managers had difficulty navigating and selecting the pricing options for the warranty products.

One of the current platforms had a complicated process of choosing the right price, which required lots of scrolling and clicking to find the right rate for the customer's needs, and ultimately increased time for the user to create a quote.

03
Some of the Dealerships have switched to other platforms that have a better integrated database system.

2 of the 4 Dealer Groups we interviewed were using alternative platforms as their main tool because it offered a better DMS system to manage all their customers’ information.

“It’s a little more of a manual process...it’s a little manual and a little dated compared to some of the software out there...it’s not as intuitive compared to some of the other stuff that has come out more recently.”  
-Participant 1 from Dealer Group 3
04
The current system is not easy to use because it required repetitive actions to complete a task.

Floating Action Buttons (FABs) were off to one side and requires users to click into each one in order to complete the process, which forced them to navigate back and forth between screens to complete simple tasks like selecting a rate, or adding a product.

05
F&I Managers need the platform to be responsive on desktop and tablet when speaking with customers at the dealership.

F&I Managers will sometimes be at their desk or sometimes be in the open main area of the car dealership.

06
Some of the participants felt the current system isn’t modern and has room to add technology features to streamline the system.

Compared to other proprietary systems on the market being used, some participants wanted more capabilities, such as e-signature, to make their day-to-day easier.

Ideate & Prototype

Ideate & Prototype

Using the insights from the User Interviews, we focused on creating a more streamlined process by using a stepper to help make it easy for F&I Managers to create a contract.

Stakeholder involvement:
We reviewed the new prototyped experience with our stakeholders and business analysts to iterate on the design based on refined requirements to ensure we were capturing technical details required.

Wireframes based on the research insights.

Deliver

Final Hi-Fidelity Designs

17 Screens were finalized for the MVP Portal Design. This included making responsive screens for Desktop & Tablet, and creating a design system for the product.

Screens focused on the following areas
+ Landing Screen Create a Quote
+ Search for Existing Quote
+ Choose Customer Products & Get a Rate
+ Add a Payment Plan
+ Finalize the Quote to a Contract

Test

Why did we test AFTER completing hi-fidelity designs?

Our client changed their mind about the timeline & deliverables:
Despite our team advocating the importance of testing the wireframes. However, the client agreed to do a usability study after the final hi-fidelity designs were complete -- better test late than never!

Qualitative Usability Testing

We conducted semi-structured, moderated, remote usability tests with 11 participants to validate the new rating process and evaluate the ease-of-use using the lo-fidelity prototype.
I conducted 4 of the 11 usability study sessions. We shared the prototype remotely and conducted the studies via video conferencing.
Research Objectives

1. Is the new portal design easy to use?

2. Are F&I Managers able to successfully create a new quote and contract for a customer?

3. How do participants feel about the new design and revised rating and contracting process?

4. What is the overall user satisfaction?

Recruitment

11 participants | 7 current users of Portal 1 | 4 current users of portal 2

The client provided us a list of participants for we could reach out to, given their personal connection and relationships with dealerships. We requested a mix of participants that current use both portals.

Task Overview

1. Starting a Quote for a Customer
2. Adding Product & Rates to a Quote
3. Adding a Monthly Payment Plan
4. Finalizing the Quote to a Contract

Note-taking process I established for our team during the 11 usability study sessions.

Data Logging Template

I created an Excel template for our team to track our qualitative findings. This allowed us to track actions that occurred, including qualitative observations and quotes for each participant.
We used this data logging document to conduct our analysis in our final report.

What worked well

I created an Excel template for our team to track our qualitative findings. This allowed us to track actions that occurred, including qualitative observations and quotes for each participant.
“Having it all shown in front of me and having it move forward is not a bad start…it seems like you guys have put in the time and it's definitely something we can use”
-Participant 6
“I think it's very easy, the breakdown of it. How to navigate; if you just take a second to look at it you can get to where you need to go pretty easily. I think it's very user friendly. I definitely like it compared to what we already have. I think we're moving in the right direction by making it better”
-Participant 5
01
The initial landing screen made it easy for participants to begin the quoting and rating process

+ 11 of 11 participants noticed & found the ”Change” button

+ 10 of 11 participants felt the “Create New Quote” inputs were clear to understand and start the quote

"It's better that [the inputs are] here now before I look at a quote so I don't mis-quote something later and have it be higher because of the options on the vehicle”  
-Participant 3
02
Adding a product to a customers quote and being able to change it was easy for participants to follow and complete

+ 7 of 11 participants liked the table/grid view and thought it was easy to use

+ 10 of 11 participants were able to change the product price without any issues

+ 8 of 11 participants were able to easily identify when a product was added

"You can easily go to the column and find information instead of rows of information that are stacked on each other…it's a cleaner look…I think it's more simplified"    
-Participant 8
03
Finalizing the Quote into a Contract was intuitive and didn’t reveal any major obstacles

+ 8 of 11 participants liked the information provided by the “Dealer View” toggle

+ 5 of 11 participants liked the ability to “VOID”a contract directly on the “Success” screen

“I think it's more helpful than what is currently in place because you have to go all the way back and click a specific number. I like this better.”  
-Participant 4

Areas for Improvement &
Design Recommendations

Based on findings from the Qualitative Usability Study.
01
Difficulty Understanding what “Uses & Attributes”
and how this would affect the customer quote

+ 7 of 11 participants found the term 'Uses and Attributes' confusing; would prefer a different term for that section

Recommendation: Change “Uses and Attributes to a term that is more familiar to F&I Managers, such as “Quote Add-ons” or “Surcharges”

+ Include only add-ons that require selection and make any that could be automatically added to the product rating be automatic

“I think it's more helpful than what is currently in place because you have to go all the way back and click a specific number. I like this better.” -Participant 4
02
Concerns around the usefulness of Print Prices" and redundancy between "Print Prices" and "Quotes"

+ 4 of 11 participants said they would not want to print a grid view as it would provide the customer with too many options to choose from

+ 6 of 11 participants felt that Print Prices button was redundant and not needed

+ 5 of 11 participants did not notice the Quotes bar

Recommendation: Remove redundancy with the print options by making print prices option more subtle

+ To print grid, create a subtle link within the grid modal to remove redundancy but have it available for users that want it

“Feels like an unnecessary added step to [Print Prices]"  
-Participant 3
03
Participants expected to be able to adjust the “Uses & Attributes” on Step 2 and were unclear and confused

+ 6 of 10 participants were not clear how “Uses & Attributes” affected product options

+ 5 of 10 participants would have expected selections from the initial screen to increase product rates

+ 4 of 10 participants expected some options to appear under “Options/Surcharges” dropdown, while others be added automatically

Recommendation: Show selected “Uses & Attributes”on Step 2 to allow users to make updates, and consider renaming “Uses & Attributes” to “Surcharges”

+ Add a button to show “Uses & Attributes” on this screen, and upon selecting would behave similarly to filter selections

“I think it's more helpful than what is currently in place because you have to go all the way back and click a specific number. I like this better.” -Participant 4
04
Not having an explicit “Back” button was confusing when participants were asked to adjust a product’s rate

+ 5 of 11 participants wanted a "Back" button to go back and change a product rate

+ 5 of 11 participants knew the stepper was clickable and successfully navigated back to Step 2 with it

+ 3 of 11 participants did not expect stepper to be clickable

Recommendation: Add a “BACK” button on the bottom left of the footer that allows users to navigation back to the previous step

+ The stepper should still be functional and potentially easy learned behavior, but this provides another intuitive way for users to navigate the quote + contracting process and eliminate any confusion

“Once you [use the stepper] once, you'll know what to do”
- Participant 2
Post-Test Survey

+ 4.2 average rating on participant satisfaction using the system to complete the scenarios

+ 4.3 average rating on how easy participants found the portal

+ 4.8 average rating on how confident participants were in completing the F&I process correctly

Unique Challenges During the Project

Challenge 1: Client Privacy Constraint

Script Limitations for 1:1 User Interviews: The client was concerned their partners and competitors would learn about the new platform re-design, and request we approach user interviews under the guise of "general market research".

Workaround & Key Takeaway

This greatly limited our ability to directly ask current users about their experience using the platform, which made it difficult to gain insights about areas of improvement. We requested to do internal stakeholder walkthroughs of the platforms where we could ask more direct question. If we had more say, I would have requested we find participants that were willing to sign an NDA, and potentially have paused the user interviews until the client was comfortable sharing the news about the re-design.

Challenge 2: Participant Recruitment

The client gave us an extremely limited list of participants, sometimes internal employees who weren't true users.

Workaround & Key Takeaway

+ We worked with the client to explain why the insights derived from internal users would be biased and potentially inaccurate to a user's experience. This helped us work with the client get more target participants.

Challenge 3: Stakeholder Involvement & Scope

There was mismatch in expectations around the generative research producing the business requirements and user stories for the final design.

Workaround & Key Takeaway

+ Level-setting expectations and team dynamics upfront is important ensure everyone's are being accounted for.

+ We also found new ways to collect and solicit feedback on research and designs by using tools such as MURAL so the client could have visibility into the work.

Challenge 4: Rushed Timelines

Our original timeline was delayed due to some of the above challenges, causing the client to request removing user testing. Despite our design team pushback, we ultimately had to deliver final designs before getting user feedback on the wireframes.

Workaround & Key Takeaway

+ Learned how to be flexible and complete final designs as best as possible. As we designed, we documented specific areas and tasks we would like to test.

+ We convinced the client to still do a usability study on the wireframes afterwards, explaining it would validate some their concerns and provide insights about specific elements.

+ If I could go back, I would have taken more time specifically on this step to before concept testing or A/B testing on several main aspects of the flow, such as selecting a rate for a product, to confirm we were headed in the right direction.

Business Impact

Delivered final, responsive designs that were streamlined and designed to reduce user cognitive load

+ The generative research we conducted ensured we were deriving design decisions based on insights

+ The final designs were more streamlined by providing clear steps compared to the original portal, which had the potential impact to increase product sales.

Handed off full usability report to the client which validated design improvements & next steps

+ The usability study provided validation that in general users were happy with the new design and felt it was an improvement from the current system

+ The report included design recommendations that could have be designed and implemented in the first sprints of the MVP development

Insights into future state needs and digital capabilities the portal should consider

+ User insights from generative research sessions and usability studies provided the client with features and ideas to consider in the next phase of work

+ These insights could be used to drive a future state roadmap

Reflection

What would I have done differently?

+ I would have advocated for more brainstorming and co-design sessions to help define the new flow before finalizing the wireframes. This would have helped stakeholders feel more involved, and would have allowed us to ideate more and test different concepts.

+ Request we do user shadowing at some of the car dealerships to see how F&I managers use the tool with a customer. Seeing the process live and getting a chance to view the experience would have helped us understand the flow and pain points.

What did I learn?

+ User testing, even if not at the ideal part of the process, is still better than no testing!

+ How to be flexible and still derive insights even when research sessions or participant selection isn't ideal.

+ Stakeholder buy-in and understanding the value of the UX process largely influences pivots in the direction of a project, and in the outcome of key decisions. In specific situations it's important to remain flexible and creative, finding new methods and workarounds to ensure the team is able to get insights from users to drive key decisions.

+ Understanding stakeholder dynamics is important to learn upfront, for example if a stakeholder is personally attached to their product like in our case. This can help the team strategically manage initial timeline and approach conversations to ensure the client is onboard with the UX process and its value.