INTRO
Project details:
Product design
Product strategy
User experience
Interface design
Looking at the results
Annual page visits
Increase in page visits
Increase in page visits
Introduction (for those wanting the details)
This website redesign was done for Brotherhood Mutual, an insurance company that insures Christian ministries. I worked on this project as a full-time employee.
The company had recently introduced a refreshed logo with new brand guidelines, as well as a co-brand. This was a challenge in figuring out how to present the two side by side.
The interface needed an entire overhaul, so I started throwing together some wireframes after assessing pain points and the sitemap.
Lack of user research
Unfortunately, after we started this process the company suffered an attack that took down the entire current website, and it was mostly unretrievable. Because of this, we were given a quick deadline. In an effort to keep things moving quickly, we were forced to skip over user research, surveys, and user testing. This then turned the scope of the project a little sideways not being able to guarantee UX changes were the correct decisions.
Teamwork with the devs
We worked alongside the dev team every step of the way. One major goal in this redesign was to use a CMS that was accessible for the team to use for quicker page building in the future. So in designing the website, I had to work with a widget mindset. Everything had to be designed in a way that was drag and droppable.
Communication was crucial all around. Communicating with the devs for proper acceptance criteria, relaying decisions to stakeholders and getting sign off, meeting offsite with copywriters to spend time deciphering brand voice — a lot was moving quickly.
Design system
I'm a sucker for organization. I established our design system in Figma using variables to make responsive components, use design tokens for easy color adjustments, and breakpoints for easy tablet and mobile mockups (among other things).
Insurance is not very exciting
So how do we go about making a website that engages users?
Two things really came to mind when keeping in mind when audience. One, copy that relates. We have a niche audience of Christian ministries, so our dialogue should reflect we understand them. Two, adding fun interactions that make using the website just that much more enjoyable.
The biggest pain point
The Safety Library articles are the most viewed pages on the site. And on the previous version of the website, they were all simply text links on pages that led to more text links, followed by other text links. (exhilarating, I know!)
So to combat that experience, I laid out a means for users to find their content easily through filters. (We also have a search bar in the navigation for those who know what they need). This allow users to sift through content easily by giving them the option to jump to their audience-related content, and find the topic they need. They can then dive deeper with subtopics and content type.
Co-branded navigation
Designing the nav went through a few variations. In aiming for clarity, I added icons and descriptions to break up the items visually, as well as give users some idea of what each product or service means. Insurance can be confusing, so little touches like this can help reduce frustration.
In dealing with the co-branding, higher ups informed us they want the brands to feel seamless. So, the sections are separated under distinct nav items and color variation. On each page you get the color adjustments to match the branding, as well as the Brotherhood Works logo on those product pages.
Future plans
Websites can always be improved. One place I've been exploring recently is the request a quote process. Currently, it's a form with everything stacked on one page, doesn't use our fonts, and has no imagery. This mockup is an example of how we could guide users through the process clearly and efficiently, and use copy that is clear, concise, and even a little bit of fun.
