summary
mission
Sure's partner, AmTrust, came looking for a digital solution to optimizing their purchase flow (and, by extension, their conversion rate). With the use of the Canary Design Language, Sure's native design system, getting a Renter's Insurance policy should be made as easy as possible.
my role
I created the new and improved purchase flow for not only AmTrust, but for Renter's Insurance products in the future. Patterns and conventions created to accommodate AmTrust's complex insurance requirements were then finalized and able to be recreated with future clients, as well.
impact
AmTrust's partnership with Sure went live; the conventions created to suit AmTrust's needs were added into Canary Design Language, and the effect was faster-than-ever purchases of plans.
client
Sure & AmTrust
services & skills used
User Experience Design
User Interface Design
Critical thinking
End-to-end design
Innovation & iteration
This project was as much about the perfect purchase flow for AmTrust as it was about the perfect purchase flow.
The beauty of a design system like Canary Design Language (CDL) was that the component library was flush with beautiful and simple foundations. The question had become: how do we apply those components to create reusable, configurable patterns and models for consistently successful digital purchase flows?
Although the product can vary - e-commerce, coverage, or otherwise - the core of the flow should always be both succinct and effective.
process
Ultimately, the insurance purchase flow should be fairly straightforward: a user should be able to enter, configure their coverage selections, add on anything that isn't directly included (or legally necessary), and check out.
Insurance products, however, are rarely simple. There are many complex rules and often state-specific coverages that have to be accounted for, and AmTrust was no exception.
There were many sessions working through the proper order of operations for AmTrust, while still maintaining the priority of efficiency.
Along with standard coverages for renter's insurance, like Personal Property coverage or Liability, there were some elements specific to this product.
Plus, there was the issue of standardization.
In the case, for example, of adding an additional person to be insured under the plan, there was the question of where that interaction should occur - and furthermore, how to create a rule with the least friction.
So much of the time and energy spent on this project was on developing these rules: when should information input be in-line, versus in a modal? Where should tables be displayed, and how can they be as mobile-friendly as possible?
It can be easy to allow things to get convoluted, and by figuring out where information could be tucked away or where it should be as easy to find as possible, it ended up also being a question of priority.
results
After countless working sessions with stakeholders, important and clarifying conversations with engineers, and wireframing many different iterations of flows, I landed on a purchase flow that was as simple as it could be.
01
Flow entry
Mimicking conventions established by Canary Design Language, the personal information captured on the first page is dynamic: they begin with the address of their property, and then quickly are prompted for "last minute" quick details.
02
Customize coverage
The order of information here is key: first, the user is prompted to either accept or alter their standard coverage options. They are then able to add a few additional pieces, defaulted to 'No' to keep the flow as short as possible. They're then able to enter their coverage start date - with the expectation they could be ready for Checkout as soon as possible.
03
Optional additions
AmTrust has a wide expanse of additional offerings. In order to minimize visual overload, the less prioritized offerings are hidden in an accordion, and the specific coverage adjustments are only visible once a coverage is toggled on.
04
Checkout
In just a few screens, the customer has already reached the Checkout screen! I made a point to move the billing cadence here, to put all relevant information in one place. With minimal information entry, and a signing ceremony of documents via the terms & conditions section, the purchase is complete.
05
Confirmation
Transparency, in my opinion, is one of the most important values in effective user design - especially when it comes to a successful purchase.
The confirmation screen offers a brief summary of what they've completed, without too much information bogging them down.
in conclusion
AmTrust is preparing to launch its purchase flow with Sure in 2025. It is my hope (and expectation!) that the work done to optimize this purchase flow will increase conversions not only for this partner, but for many more in the future.
It was such an important challenge to balance both product specifications and future functionality, and I feel proud of the outcome!