Shelter Insurance
Transforming the customer dashboard
Project overview
Timeline: 2.5 months (2024)
Impact: 100,000+ unique monthly customers
Role: Junior Product Designer
The starting point
Shelter Insurance's logged-in homepage experience hadn't been updated in 15 years.
Customers could only access basic features like bill pay and ID cards, and the outdated interface made even simple tasks feel cumbersome.
Newly promoted from intern to junior, I saw an opportunity to transform our static homepage into a comprehensive dashboard serving 100,000+ monthly customers.
The challenge: our customers were lost
User feedback painted a clear picture of frustration:
“It feels like I'm just looking at a list. I can see my policies, but I can't tell what I should do here." — Participant feedback from usability testing
This qualitative feedback was backed by our GA4 analytics, showing a clear disconnect:
Yet all these features required additional navigation steps, leading to frustrated customers and increased support calls.
Discovering the hidden cost of poor navigation
Rather than jumping straight into solutions, I needed to understand why customers struggled currently.
After sifting through prior user research, three patterns emerged:
Everything looks important, so nothings important
Important alerts stacked at the top without clear priority
Same format for every policy regardless of what needed attention
Context is missing
Customers don’t know if any tasks need immediate attention
No distinction between overdue and upcoming bills
Mobile view is a struggle
Stacking on mobile required lots of scrolling
Customers struggled to find Road Assist, which is critical on mobile
The pivot point: from static to dynamic
A key realization changed our approach: we needed to stop thinking about our homepage as a list and start thinking about it as a comprehensive dashboard for our customers.
A mobile-first design approach forces me to prioritize what truly matters in the most constrained environment.
This meant prioritizing action-based items first while tailoring layouts for both mobile and desktop contexts.
Design challenge: fighting information overload
The biggest challenge wasn't just what to show—it was what to hide. Our first iteration tried to show everything in a two-column layout, but my design team provided valuable critique during our review:
"There's a lot happening here, I'm not sure where to look first. What actually needs my attention?" — UX team design critique
This early feedback from my colleagues helped identify key issues:
Too many competing elements
Lack of clear visual hierarchy
Overwhelming amount of information
Simplifying payments
A unique challenge emerged around payments. Customers were confused about total amounts due when having multiple policies:
Wait, so do I owe $150 total, or is that just for my car? I can't tell
if this is everything I need to pay. — Usability test participant
Through iteration and testing, I developed a progressive disclosure approach:
High Priority: Show only overdue amounts when they exist
Secondary: Display regular due bills after overdue are handled
Details on demand: Access to all billing details through the payments page
The breakthrough: priority-based design
Through multiple iterations, I developed a card-based system that:
Prioritizes urgent actions (overdue payments, open claims)
Progressively discloses additional information
Transforms based on context (desktop vs mobile)
Working with my dev team early on helped shape feasible solutions.
Stronger through collaboration: the policy section
While I led the dashboard redesign, another UXer on my team was creating a dedicated policies page. This was our chance to:
Create consistency across both experiences
Leverage each other's user research insights
Build a more cohesive product
Data showed most customers have 3 or less policies, informing our dashboard's focused view.
Building on the payment card solution, I streamlined the policy section by prioritizing auto policies and removing duplicate alerts.
Mobile-first transformation
Mobile users have fundamentally different needs when opening their insurance carrier's website on their phone.
Prioritizing critical features
Added “contact agent” and “Road Assist” as prominent buttons
Positioned high-priority actions for easy access
Simplified layout
Limited dashboard cards to 4 (vs 6 on desktop)
Presented policy information in a scannable, vertical layout
Maintained key functionality while simplifying the interface
Engineering partnership
Working with our developers, I learned each policy required separate API calls for payments, claims, and policy details.
Rather than showing a generic loading state, I designed thoughtful loading skeletons that maintained the page's visual hierarchy.
Balancing business goals
While focusing on customer needs, I also found opportunities to drive business value through strategically placed content:
Option to switch to paperless billing
Online proxy signing
Space to give feedback
Recommendation for Road Assist coverage
The key was ensuring these never overshadowed critical customer tasks by intentionally placing them after important cards.
Final results: transforming the experience
Through 10+ usability tests and multiple iterations, I transformed a static homepage into a customer-centered dashboard.
Transformed a cluttered list-based interface into a priority-driven dashboard that surfaces urgent bills and active claims
Created device-specific experiences: prominent emergency buttons on mobile, clear dashboard layout on desktop
Simplified payments by progressively disclosing information - showing overdue amounts first, then regular due bills
Designed a flexible card-based system that adapts to different user contexts and needs
Post-launch metrics
Post-launch iteration
While the dashboard improved most metrics, post-launch data revealed an unexpected challenge: proxy signatures had decreased compared to the previous year.
I designed a solution that balanced visibility with our established hierarchy: a proxy card that appears after urgent tasks. After approval from our legal team, the solution will soon launch.
Since design is an ongoing process of learning and iterating, we'll continue monitoring signature rates as this solution launches.