Safeco.com Redesign
Project
Safeco.com responsive redesign
Project Details
Safeco Insurance, acquired by Liberty Mutual Insurance in 2008, was due for a brand refresh and a website overhaul to bring Safeco.com onto LibertyMutual.com’s Teamsite CMS. Liberty’s UX Agile team was assigned to do redesign of Safeco.com. My work consisted of working closely with the content strategist, PO, developers, and other designer.
Work
Information Architecture
Content Strategy
Wireframes
Prototyping
Visual designs
Challenges
The team had to work together to evaluate what components we could effectively leverage from LibertyMutual.com, what new features or functionality needed to be designed, reorganize the content and underlying structure, make the site responsive and follow web accessibility standards, and apply the new branding.
​
The biggest constraint we had as a team was working within Liberty’s CMS and to utilize as much of LibertyMutual.com’s framework and functionality as possible. One of the positive aspects of this approach was in theory it would require less development work. However, in terms of my tasks and decisions, I had to make solid business cases to create a new piece of functionality or alter the layout/structure of the pages which proved difficult at times because of the number of stakeholders.
Personal Challenge
A personal struggle I had was trying to push my team in the direction of creating a full-width website to utilize as much space across the page as possible for content. I received a lot of push back because LibertyMutual.com’s site at the time was still using a left rail for their local navigation. I proposed a sticky secondary navigation that would still allow the user to access those pages while eliminating the left rail to allow more room for content. Because we were working on a MVP, my suggestions were put off until post-launch.
Accomplishments
However, I was able to convince them to:
-
Go with a full-width design on the homepage
-
Create a different navigation from LibertyMutual.com
-
Design new functionality that LibertyMutual.com did not currently have that both sites will now be able to utilize through the joint CMS.
Team Challenges
Our biggest challenge as a team was working on the homepage. I designed a few responsive wireframes to try and encapsulate the needs of 3 sets of stakeholders, the Product Owners, and our team’s goals. The team participated in 2 full days of a usability study that consisted of observing in-person usability test sessions and a collaborative analysis to test the homepage and a few other top-level pages. Through the test and follow-up exercises we discovered a handful of things about our users (such as they were reluctant to scroll) that we needed to consider moving forward with the project.
New Functionality
A majority of Safeco.com's pages were content heavy so I wanted to design a new component that would work within the space unoccupied by the left rail and allow for us to break up the content so it would be more digestible for the user. My solution was tabs. This is obviously not a new concept, but it was a new component that LibertyMutual.com did not have. I created a prototype in Axure to demonstrate how they would function.
Discoveries
After some testing, we discovered users were having difficulty using the tabs on mobile due to the small screen width, so the solution was to switch the tabs to accordions at smaller breaking points. This would allow more room for the user to tap open the content section. So although this component is not groundbreaking, I was able to create something the stakeholders felt was worth our effort and time to invest in that could be used across both sites.
Desktop
Mobile
