Boosting Westfield's website from 1843 to modern times.
Written by
Justin Watts
Duration
1 year
Team
6 UX
My Role
UXD
Type
B2C
INTRODUCTION
A new website and brand. All at once.
Highly regarded northeastern Ohio insurance company Westfield Insurance wanted to redesign their website and brand. The company had always had the same rustic, old-world branding and needed a refresh. I was on a team that was tasked to design the website in six months.
PROBLEMS
A new website. In record time.
The task was to complete all research, design and development in 6 months. The old site was not extremely salvageable so each screen needed to be designed from the ground up on a short timeline.
APPROACH
Starting fresh. One design at a time.
The team split up and handled design, wireframes, information architecture and all functionality. The approach was to work quickly and try to validate concepts with users whenever possible.
UX Deep Dive Below
WHAT I DID
Senior UX. Resident goofball.
My role on this project was Senior UX on a team of 6. I was predominantly working on wireframes with a heavy focus on interaction design. I was also responsible for interactive insurance tools and partnered with another UX designer on those. We also collaborated to create a design system for the new website.
UX Deep Dive Below
Wireframes
Prototypes
Competitor Research
Insurance Tools
UX Strategy
Design System
DISCOVERY
User Research
Interviews with external client users and internal stakeholders. Since the site is very customizable it was helpful to learn about specific issues, pain points and requests.
DISCOVERY
User Research
Interviews with external client users and internal stakeholders. Since the site is very customizable it was helpful to learn about specific issues, pain points and requests.
RESEARCH
Discovering customer needs.
For discovery, the UX team conducted user research with internal teams and external customers, completed heuristic evaluations, card sorts and a competitive analysis to get a firm understanding of user needs.
UX Deep Dive Below
Usability Evaluation. Reviewed the old Westfield site and surfaced over 50 usability issues. I wrote a detailed heuristic evaluation report and shared it with stakeholders. We used this information to as design tenets for improving the experience.
User Research. Talked with 10 internal and 10 external website users to understand opportunities, pain points and how we could help to improve it. This was tricky because the previous site was hardly used by anyone.
Competitor Analysis. Reviewed 20+ competitor sites and put together a report with the basic design patterns so our team could understand best practices within the insurance industry.
INSIGHTS
Out with the old. In with the new.
The old Westfield website was very much a placeholder. As we really began to dive in we realized that we would need to redesign it from the ground up. The issues below are areas we specifically focused on cleaning up during the redesign.
During research we learned that the old Westfield site did not have any self-service tools you would expect from an insurance site which was problematic to users:
There was no way to log into the system so people just did not use it much.
There was no way to access account or payment information so customers had to call to get that information
The purpose of the site prior to that point had been merely a placeholder for Westfield.
Users were clear the old site provided little value since there was no functionality.
Outdated Experience
We also learned that people just plain didn't like the look and feel of the old Westfield site. It had a lot of design issues due to it's age and so users saw it as a less-than-official source for Westfield's insurance products. Some areas of concern:
Multiple types of calls to action with no consistent design system.
Lack of clear visual hierarchy around the site leading to a disjointed feel.
Design best practices were not followed and elements did not appear as clickable.
There was a lack of true value proposition for using the site.
Usability Issues
Through our own research and evaluations we determined the old Westfield site was highly unusable. Best practices and industry standards were not followed creating a lackluster experience:
Lack of consistency in the site design which reduced overall usability.
Functionality was lacking and what was there was largely unclear or unhelpful.
Lack of strategy behind the site made it a catch-all for all Westfield departments which encouraged fragementation.
Fonts were small, site was not accessible and used outmoded design elements.
Navigation Problems
Participants did not understand the old navigation system and felt it was very confusing. The issues below all contributed to the overall navigation problems:
Since insurance has levels of products which need to be under specific umbrellas, it was very hard to find information.
The information architecture had grown out of control. It was extremely difficult to find specific insurances.
The mega menu approach did not work well and some types of insurance architectures became top-heavy or bottom-heavy.
The menu functionality was not optimized from a usability perspective and was hard to use.
UX Deep Dive Below
DESIGN
Wireframing and branding the new website.
The challenge was piecing together a complex insurance website from scratch. Sixteen main templates were designed starting with sketching and then moving into Sketch for wireframes addressing the entire site: information architecture, structure and functionality. The designs were shared with both internal stakeholders and external users periodically and their feedback was incorporated through the design process.
UX Deep Dive Below
THE NEW SITE
Six intense months later Westfield Insurance had a lovely new site.
The project itself was tough but yielded a beautifully designed website and brand. The scope of what we were able to accomplish in a short time was surprising. The site had a new design, new content and new tools available on launch - see Design Solutions for more.
UX Deep Dive Below
DESIGN SOLUTION
Insurance Product Pages
A big win for this project was designing informative and helpful product pages for each type of insurance. Each of these 'hubs' contains detailed information about the benefits of each product and allows the user to easily contact an agent.
DESIGN SOLUTION
New Branding
The UX team was heavily involved in the rebranding efforts for the new site. After some iteration the red-hued, friendly branding was implemented and fully replaced Westfield's older branding throughout all sites and brick-and-mortar locations.
DESIGN SOLUTION
Simplified Navigation
The UX team optimized the navigation and information architecture. The new design allowed for the complexities of insurance while also providing visual affordance to clarify any additional subcategories through text or icons.
DESIGN SOLUTION
Interactive Tools
In addition to the website design we were tasked with adding some insurance tools to the mix. The purpose of these is to ensure users can get access to agents, quotes and other information via interactive interfaces which we designed and built into the site.
DESIGN SOLUTION
Career Portal
The career portal which is powered by Taleo was also fully rebranded by UX. Westfield prides itself on being an incredible place to work so it was important the new brand was reflected early in the hiring process.
DESIGN SOLUTION
Westfield Blog
In an effort to provide a friendlier and more helpful tone to customers Westfield marketing requested a blog to give tips, news and other communications. This blog was designed by us and enabled the Communications and Marketing teams to easily update or add content.
OUTCOMES
Stats and figures.
Measureable results after the new Westfield site went live. A lot of the information below was pulled in from analytics software and some survey work.
UX Deep Dive Below
-34%
Bounce rate reduction after the new site went live.
+23%
Conversion rates in this case finding an insurance agent.
3min
Average session duration after launch.
+62%
Increase in site events and activity post-launch.
WRAP UP
Westfield returns. New Site. New Brand.
The new website was immediately well-received both internally by our stakeholders and externally from people using the site. The new brand offered a fresh take on Westfield and gave users a breadth of functionality, information and interactive tools.
UX Deep Dive Below
Designed Templates
20
Designed Insurance Tools
05
Interactions with Site
24% YOY
Awards for Design
01
Updated Brand
Complete
Added Service Tools
Complete
Fixed Navigation
Complete
New Site in 6 Months
Complete
Thank you for reading!
ABOUT JUSTIN
Justin Watts
Sr. UX Lead, Usability Fanatic and Avid Record Collector
Product Design. UX Strategy. User Research.
Justin Watts is a UX Designer with a decade of experience. He attended Kent State University and received a Master of Science degree in User Experience Design. He has worked on UX projects in enterprise, agency and startup environments. Justin created this blog to help share lessons and information learned over the course of his UX career.