CSAA · Chief Product Designer · Team: +4 · Time: 1 Year (2022) · UX, UI, User Research
Named in the résumé under Other Work at AAA Insurance , also known as CSAA .
Bill pay for a signed-in insurance customer: a bills dashboard with the amount due and AutoPay status, choosing how much to pay, choosing a saved payment method, and paying several policies at once against a pinned total. Three of the steps have phone versions. Pay a bill and the payment shows in Policies and in the agent’s view of the account.
Wireframes
How Payments works, sketched: the job, its two working screens, one choice about the bill cards, and one state.
Pay what's due A flow from Bills with two branches: make a payment through amount, method and review, or choose amounts through per-policy amounts with a pinned total, method and review; both reach Payment received, which leads to a node saying the policies and the agent's record show it paid. Pay what's due The job: pay one bill or several, and have every app agree. Make a Payment payment Amount Method Review received Bills Choose Amounts per Payment amounts policy + pinned total Method Review received Policies and the agent's record show it paid 1 One or several A single bill takes three short steps; several bills share one total. 2 Paid everywhere The payment lands in Policies and the staff record, from one set of bills. 1 Pay what's due. The job: pay one bill or several, and have every app agree.What's due A wireframe of the Bills screen: a left icon rail, the greeting Hello, Alex, Bills Policies Claims tabs, a Pay multiple policies banner, three bill cards each with a due date, a large amount and a Make a payment button, and a right card with Transaction history and Manage payment methods. What's due The bills: what is due, when, and what AutoPay will do. Payments Hello, Alex Bills Policies Claims Pay multiple policies Choose amounts Transaction history CAAS204718263 Due Oct 19 2020 Mazda MX-5 Miata · 2002 BMW M5 · See your past billing and payments. $251.90 Make a payment 2004 Ford F-350 · 2012 Toyota Camry Thanks for your last payment of $251.90 on Sep 19 AutoPay is scheduled for your installment date. View history Manage payment methods Manage AutoPay CAAS204718347 Expired Due Oct 30 Add, update, and remove payment methods. $75.15 27 Alder Court, Pleasanton, CA 94566 AutoPay ended when this policy expired. Manage wallet Make a payment CAAS204718592 Due Nov 4 $54.20 27 Alder Court, Pleasanton, CA 94566 Thanks for your last payment of $54.20 on Aug 4 Enroll in AutoPay Make a payment 1 All three at once Dense two-column cards keep every bill in the first screen. 2 What happens next Each card says if AutoPay will run, or why it won't. 3 Status in words Expired is a tag; the amount is still due, and payable. 2 What's due. The bills: what's due, when, and what AutoPay will do.Several policies, one total A wireframe of the multi-pay screen: per-policy cards on the left with amount choices, and on the right a pinned summary listing three policies with trash buttons, a filled total of $381.25, a payment method row, and a disabled Continue button with the reason Choose a payment method. Several policies, one total Paying several policies against one pinned total. Payments How much would you like to pay? Auto policy CAAS204718263 2020 Mazda MX-5 Miata · 2002 BMW M5 · 2004 Ford F-350 · Pay multiple policies 2012 Toyota Camry Select payment amount Auto policy CAAS204718263 $251.90 Minimum due $251.90 Pay in full $503.75 Property policy CAAS204718347 $75.15 Personal Umbrella policy Pay another amount No payment CAAS204718592 $54.20 Property policy CAAS204718347 Expired Select payment amount Total $381.25 Select payment method Amount due $75.15 No payment Payment method Due Oct 30 Continue Choose a payment method 1 The total follows Every choice on the left changes the pinned total at once. 2 Take one out The trash leaves 'removed · Undo' in the line's own place. 3 Off, and says why Continue names what's missing instead of just greying out. 3 Several policies, one total. Paying several policies against one pinned total.How tall a bill card is Two options side by side: tall stacked bill cards with a dashed fold line cutting the second, struck through, and three dense two-column cards all above the fold, circled as the choice. How much room does each bill get? CAAS204718263 CAAS204718263 Due Oct 19 $251.90 $251.90 Make a payment Make a payment CAAS204718347 Due Oct 30 $75.15 CAAS204718347 Make a payment Due Nov 4 $251.90 the fold CAAS204718592 $54.20 Make a payment Make a payment the fold Tall stacked cards Dense two-column cards Two columns put the amount and its button beside the policy, so every bill is visible without scrolling. 4 How tall a bill card is. Making room for every bill on the first screen.Paid, and proved A wireframe of the done screen: a check, the heading Payment received, a sentence giving the amount, card and date, a line about the transaction history, and a row for the auto policy with the new balance $251.85 and a was-line outlined. Paid, and proved state: just paid The done screen, showing the payment actually applied. Payments Payment received $251.90 from Visa 4417 on Oct 17 Each payment is listed in your transaction history. New balance Auto policy CAAS204718263 $251.85 was $503.75 · next due Nov 19 1 Counts from what it was The balance counts down, and the line under it keeps the old figure. 2 Said once What, from where and when, in one sentence. 5 Paid, and proved. The done screen, showing the payment actually applied.Mockups
Its 5 mockups, in order:
Payment Dashboard
Making a Payment
Payment Method
Pay Multiple Policies
Making a Payment
