CSAA · Chief Product Designer · Team: +1 · Time: 4 Months (2020) · UX, UI, User Research
An insurance customer portal for one household, on desktop or phone: a welcome page of task shortcuts, a navigation rail, a policies overview, and policy details for auto and property. Edit policy opens the policy-change interview, and a bill paid in Payments shows here.
Wireframes
How Policies works, sketched: the routes through the portal, its two working screens, one choice about the offers, and one state.
The hub A hub diagram: Policies overview in the centre with spokes to Welcome, a policy's details, Make a payment, Edit policy and Go paperless; dashed return arrows from Payments and Interview lead back to the centre. The hub Welcome: four shortcuts A policy's details Policies overview Make a payment Edit policy (Interview) (Payments) back where you left: same scroll, same open sections Go paperless (Communication settings) 1 One household Every app reads the same policies, bills and settings. 2 A round trip Leaving for another app and coming back lands where you were. 1 The hub. The portal as the hub of the household's insurance.Four policies, three states A wireframe of the policies overview: a lead Auto policy card, Property and Personal Umbrella cards side by side, a slim canceled Auto row and a paperless banner on the left, and a link-your-policy button with two promo cards on the right. Four policies, three states Hello, Alex Bills Policies Claims Auto policy Active CAAS204718263 Don't see your policy? Link your policy 2020 Mazda MX-5 Miata · 2002 BMW M5 · 2004 Ford F-350 · 2012 Toyota Camry Next $251.90 due Oct 19 ID cards Quote policy changes Edit policy View policy details Property policy Personal Umbrella policy Bundle and save up to 15% on your auto insurance when you add home Expired Balance due $75.15 by Oct 30 Active $1,000,000 limit Get a quote Pay now View policy details Next $54.20 due Nov 4 View policy details Explore more benefits of AAA Membership Go now Auto policy Canceled 2006 Toyota Corolla View policy details Go paperless and go green Set preferences 1 Lived in Four policies in three states, a bill coming due, from the first screen. 2 Status in words Expired and Canceled are tags; colour only confirms them. 3 What's due, on every card Each card's next amount matches Payments to the cent. 2 Four policies, three states. The overview: every policy, its state and what's due, at once.Numbers that add up A wireframe of the Auto policy detail: a header band with the policy number and an Active tag, named insureds, address, four vehicles, a Charges column that sums to a total, three action buttons, and a Drivers card with two rated drivers and one excluded driver. Numbers that add up Auto policy All policies CAAS204718263 Policy period 12 months, renews Dec 19 Active Named insured(s) Alex Rowan Mailing address 27 Alder Court, Pleasanton, CA 94566 Morgan Rowan Vehicles Charges 2020 Mazda MX-5 Miata 2002 BMW M5 2004 Ford F-350 Premium $2,858.00 Taxes and surcharges $164.75 Total $3,022.75 2012 Toyota Camry Quote policy changes View documents Edit policy Drivers $78 per year Alex Rowan Rated driver $39 Morgan Rowan Rated driver $39 Theo Rowan Excluded driver 1 Totals you can open Every total is the sum of rows on the page. 2 Edit policy goes to the change It opens the policy-change interview and comes back here. 3 Who's covered An excluded driver says so in one line. 3 Numbers that add up. A policy's details, where every figure reconciles.Where 'Go paperless' sits Two overview layouts side by side: with Go paperless as a fourth rail card the right column runs past the window edge while the policy column ends far higher, struck through; with Go paperless as a banner under the policy cards both columns end together, circled as the choice. Rail card or banner under the policies? Go paperless and go green Go paperless and go green Rail card Banner under the policies As a banner, the two columns end together and every offer is on the first screen. 4 Where 'Go paperless' sits. Balancing the overview's two columns.A change arrives The Auto policy detail after a committed change: a dated change note over the header band, the Charges column with a higher premium and total, and the Drivers card with a fourth row for Sam Rowan tagged Rated driver. A change arrives state: after a change in Interview Auto policy Change effective Oct 18: Added driver Sam Rowan. New premium $3,329.00 per year. CAAS204718263 Active Policy period 12 months, renews Dec 19 Charges Premium $3,329.00 Taxes and surcharges $164.75 Total $3,493.75 Next $291.91 due Oct 19 Drivers $549 per year Alex Rowan Rated driver $39 Morgan Rowan Rated driver $39 Theo Rowan Excluded driver Sam Rowan Rated driver $471 Date of birth Mar 14 1 Shown once The premium counts up the first time the change is seen, never again on reload. 2 Dated, in words A note above the policy says what changed and when. 5 A change arrives. A change made in another app, arriving here.Mockups
Its 7 mockups, in order:
Welcome
Navigation
Overview
Drivers
Liability + Vehicles
Property
Endorsements
