Case study: corporate home page
Updating brand design language for web & mobile
trupanion pet insurance website overhaul
Confidentiality Notice:
The screenshots below were taken from the actual published & publicly available versions of the website; no internal product codenames, design system references, internal document versioning, or proprietary information is shown. Additional design rules and implementation details are available for discussion upon request.
Before & after: mobile site
BEFORE
AFTER
This project focused on updating the existing Trupanion information and marketing site with a cleaner look and newly available call-to-action interface that could automate the sale of insurance without requiring customers to call a sales desk. The goal was to establish a tone of loving care and “total pet cuteness,” creating a pleasing environment for exploring and purchasing pet insurance.
Before & after: desktop site
BEFORE
AFTER
After working through some design studies that developed a new pattern language for the site—and marketing and sales materials in other media—I overhauled the main page and launched it. The project was 45 days all-in and included UX writing and interaction designs in addition to the graphic and visual design seen here.
One key point of evolution from the design studies and initial marketing materials was to turn circular fields into rotated tear-drop and speech-balloon shapes that adhered to rectangular components and directed attention throughout the layout.
Top of scroll functions as landing page
photos tug on heart-strings; unique color makes call-to-action crystal clear
Target audiences that need to explore cat vs dog insurance
character eyelines connect to key content
Call out key value propositions
circles interacting with lists
Repeat call-to-action at end of scroll
emphasize key emotion: loving care
Conclusions
Design decisions were shaped by marketing requirements, a collaboratively-defined design system from and for multiple departments, and new opportunities to sell product directly from the site.
The final system enabled contextual commerce with a light and caring emotional tone; we established reusable design patterns for web, mobile, video, and print deliverables.
• Launched a national e-commerce ecosystem
• Guidelines for product photography
• Reusable content for other media
• High cuteness factor for viral possibilities
I was the lead designer for Trupanion on this project.
All assets and interaction designs were built in Figma.