Self-service vehicle warranty portal for SilverRock
Summary: Redesigning the website for SilverRock, a vehicle warranty service company, to create more opportunities for customers to initiate and resolve their claims.
My role: Strategy, user research, design system creation, UI design, UX design
Project background
Creating a more functional, customer-focused website
SilverRock approached our team to lead a website redesign in order to improve the self-service capabilities of their website. The previous website had limited functionality and didn't accurately describe the claim process:
Scope and constraints
Based on user feedback we determined the initial list of functionality that we wanted to research. From there we divided the functionality into high vs low priority based on level of severity and business needs.
High priority
- In-network vehicle repair center map
- Improved homepage with mobile-first focus
- Robust FAQs and claims process information
Low priority
- Searchable FAQs
- Online chat
- Customer portal and login
- Testimonials and brand management
Process
Identifying friction points
I worked with our analytics department to identify the most performant paths through the website and friction points for users. We discovered that users had the lowest exit rate from the repair shop map (22% compared to 47% on the rest of the site). This stood to reason as most users were trying to initiate repairs and claims on the website. We also saw that the homepage did a poor job of routing users to the repair shop map and a had a high bounce rate. With this in mind we placed a high priority on creating an easy route to the repair shop map throughout the site.
Conversations with current customers helped us identify other key areas of opportunity. The most common questions and pain points for customers were confusion around how the process worked and how to initiate a claim.
Find a shop task flow
Since the repair shop locator was such a key area of the site, one of my early tasks was to create a task flow for that process. Our development leads and I spent many hours discussing the different ways users could "break" the map and how to account for these edge cases. In the end, we aimed for minimizing dead ends in the flow while accounting for development timeline limitations.
Lo-fidelity designs
Based on our user research, business needs, and feature requirements, we narrowed down the must-have items from our initial scope conversation to the following:
- Improving the repair shop map
- Adding a searchable FAQ
- Creating a mobile-friendly and functional design
- Expanding the explanation of coverage and process
- Adding a text message widget
Creating a design system
Once I had the site structure and content settled, I created a design system to build the foundation of the hi-fidelity comps and prototypes. These elements would be the building blocks for the rest of the site and future phases.
I took an atomic approach to this process, ensuring that the design system would be scalable and flexible for SilverRock to be able to continue to enhance their site.
Hi-fidelity designs and prototypes
At this point, the hi-fidelity comps and prototypes came together quickly. I also put together animated examples of the different repair shop map functionality we had discussed to aid in the development process and built functional prototypes of the entire experience.
View the mobile prototype and desktop prototype.
