Case Study: Safeco.com redesign
My design for Safeco.com Homepage 2012-2017 is shown below. I was responsible for designing and creating all the graphical assets on Safeco.com. This includes everything that is visible on all pages and required expert Photoshop skills.
Safeco.com redesign summary
2012-2017
Safeco Insurance needed to redesign it's consumer facing site to better serve the needs of the customer. The goal of the redesign was an improved user experience that was customer centric. Business goals centered around these areas of the site:
- Improved interface that the customer could easily use and identify with
- Larger areas for Hero images and advertising
- Improved conversion for Get a Quote
- Attract more customers to use Find An Agent
- Higher usage of Manage My Account
- More engaging CTA's on KPI's and ads
- Visually clear list of products
- Design must be easily updated with templates and modules
- Creation of a Mobile App and iPhone App
Research
Identifying who the Safeco Customer was mandatory for creating a Customer Centric Design.
Safeco User Persona
I was part of an ongoing effort to understand who the Safeco User was and what were their habits and interests. By creating User Personas the team was better able to understand the needs of the customer.
Story Boards and User Stories
By creating Story Boards I was able to better understand the customers journey thru the site. This also helped create a more detailed User Story.
Safeco.com redline templates
I created six different Homepage configurations that could be rotated in the CMS system.
Homepage Redlines
I designed the Homepage to have six different templates that could be inter-changed in the Content Management System (CMS).
Shown left is one of the production redline templates that I created. The white boxes in the center are the areas that were broken out in different layouts. These areas hold content and being variable had the advantage of optimizing SEO and user engagement.
I created over eighty pages of highly detailed redlines for the redesign of Safeco.com. I worked in direct collaboration with the developers daily to ensure the designs were understood and built to function and look as intended.
A / B Testing to improve User Experience
I have many years experience of testing ads, calls to action, page layouts and modules
Test and Target
I designed many testing options for Safeco. Tests ranged from simple to complex multi-variant testing. Testing included ads, copy, color, links, page layouts, modules and more.
Summary of Test Results
I created a library of Test Results so team members could track data and testing progress. By identifying winners in the tests I helped conceive new testing options to test again in order to continually optimize the target.
Safeco.com Hero Images
Safeco.com required beautiful and engaging Hero Images that elevated the brand
Hero Images
As designer for Safeco.com I understood the brand well. I knew the customer needed to identify with and relate to beautiful Hero Images that adorned the top of each web page.
This was a wonderful opportunity to capture the user's immediate attention. I spent much time finding the perfect image.
I always took the images to the next level with retouching in Photoshop. Hero images had to be painted out to fit the unusually long horizontal format.
As keeper of all the imagery on the site I took great care selecting the imagery so each page felt beautiful and cohesive.
Design for UI
I designed Find An Agent for Safeco which is currently live
Find An Agent - Search Results page
This was a challenging project that needed to be designed so that it fit seamlessly into Liberty Mutual's new design of Safeco.com.
I collaborated with the Technical Development Program's team of young and very talented group of UX and developers.
The Search Results page is designed to be elegant and user friendly with large input boxes and strong buttons. The design has a sophisticated aesthetic that blends nicely with Safeco.com.
Find An Agent - Agency page
This is the Agency page showing main contact information at the top and Team information below.
The User can link to the Agencies website or Get a Quote. There is a lot of information displayed on the page in an elegant and readable layout. Also shown is a map, clickable photo album and Social Media at the bottom of the page.
This was a challenging UI design project due to the abundance of information that needed to be displayed for better functionality.
Design for UI
I designed the UI screens for Specialty Lines Quoting, which is currently live
Specialty Line Motorcycle
I created designs and assets for six Specialty Lines of insurance. Shown here are just two of the six screens, this screen is for getting a quote for Motorcycle insurance.
These UI screens are currently live and sit at the core of Safeco online quoting tools.
I designed this with engaging Hero imagery and easy to use large format input boxes and call to action.
Specialty Line Watercraft
This is the Watercraft quoting screen. I designed these screens with the Safeco Customer always in mind. The design reflects a solid understanding of portraying the Safeco Brand and knowing who the target audience is.
I always made every effort in my design work to portray the brand in an elegant, sophisticated and fun way that the customer would find engaging and be able to relate to.
