Redesigning insurance
checkout widgets
At Protecht (now Teak), I redesigned how customers choose protection at checkout: clarifying click targets and selection states, organising supporting information, and adapting widgets to each client’s brand.
Small interfaces.
Several competing jobs.
A protection widget had to explain an offer, let someone make a choice and accommodate supporting information inside another company’s checkout. I worked as a UX generalist across interaction design and user testing, using feedback to guide client-specific designs.
The existing patterns raised practical questions: which areas were clickable, which action was primary, and how much attention legal text and background branding should receive. Opposing button treatments, warning-like colors and uneven information density could make a compact decision feel harder to read.
The original widget brought the offer, supporting information and opposing choices into a dense layout. This is the starting interface documented in the project, not a new design.
Original interfaceThe annotation isolates a practical question: where does one choice end and the other begin, and is the whole area clickable?
UI analysisClarify the action
The visible boundary, click target and selected state needed to work together. A label alone could not explain every part of the interaction.
Give information a place
The legal language had to remain. The design question was how to organize it alongside the offer, rather than compete with the decision itself.
Make the action—and
its state—understandable.
I explored explicit yes/no actions, checkbox-and-confirm patterns and toggles. Each changed how a person expressed a choice and what they needed to do next.
One important trade-off was whether a default-off control communicated an intentional decline or simply an untouched state. The iterations examined selection states, click targets, primary-action emphasis and the balance between the offer and its supporting detail.
Hotelplanner iterations exploring protection and decline choices, selected states and expandable supporting information. These are design explorations, not A/B test results or a confirmed final release.
Design iterationsA consistent interaction,
in the client’s own voice.
For Patron, I customized icons and styling to fit the client’s brand. Legal and learn-more information were grouped into an expandable area, giving the core decision a clearer place in the layout while keeping detail available.
This was also an opportunity to identify patterns that could carry across clients, while allowing the visual treatment to respond to each surrounding site.
Original detail treatments exploring how supporting information could expand without dominating the initial choice. Wording shown belongs to the historical project.
Interaction explorationDesigning the decision,
as well as the interface.
The value of this work was in the relationship between the visible choice, its interaction states and the surrounding client experience. User testing informed the design process; the available material does not establish a measured conversion increase or a final launch outcome.
It is a focused example of how I translate an interface problem into design questions, explore alternatives and adapt a reusable pattern to a specific business context.