Insurance company website redesign
Walnut Creek, California
*just scroll down
Diagnose structural issues inherent to current web design and restructure interface and visuals to enhance user experience
When it's time to redesign your website, you're probably thinking along the lines of visual design—making it prettier and more like competitors' websites. But it should be so much more.
When someone approaches us to do website redesign, they get two things: user experience design and visual design. (What are the differences? Check out this infographic.)
We start out with a comprehensive website review, where we look at Google Analytics data, when available, and interact with the site as a typical user (your customer or client) would.
As we began this process for a client, we noticed a few serious problems.
Visitors who were not logged in repeatedly hit walls when trying to explore areas of the website that looked promising, a process that was both frustrating and counter-intuitive.
This menu was available on every single page, whether the visitor was logged in or not, from a common sidebar. But if users weren't logged in, they got a mysterious 401 error:
What is a “401?” the user might wonder. And why can’t I register from here? What will Help do for me, or can I just use my browser’s Back button? Not to mention, the page looked entirely different from the rest of the website.
That’s some bad UX.
The process to register was convoluted. Visitors were taken to a login screen where they were prompted to register, but then they had to click through on a separate link to do so.
A primary goal of the website was to get more registered users, which would allow the company to market to an ever-growing list and to provide access to their suite of insurance raters and other valuable resources. While registration was a known primary goal, the main callout for registration from any page was too easy to miss.
Their registration link is that little blue link that says “Create new account.” All too often, you see the actual primary goal of the website being shifted lower and lower, hidden among other interface areas or demanding repeated clicks to get there.
That’s some bad UX.
The header menu and sidebar menus were confusing and not easily expandable.
The current site only serves two states, but the company was expanding to three more and beyond that, they would continue to grow. The menu structure would make that a logistical headache. We had our work cut out for us.
Two news feeds confuse the content intent. Navigation disguised as a new header shows a web design being restrained by the template, not the function.
The website has a blog, which is clear. But from the homepage, it also loads a separate company news feed, which is not easily accessible from anywhere else as a full news feed except from a small text link on the same page. Users won’t understand the difference, and since the product-related news and updates are more informative than the blog, using one spot for both, under a header users can identify (e.g., News) eliminates the confusion.
Using audience goals and demographic information to determine users' needs
If your website isn’t addressing even its primary goals (in this case, registration of new members), then you may not be as familiar with your target user as you think. During our initial consultation in preparation for a website redesign, we point out the inherent frustrations and confusing elements of the existing website, and then ask questions like:
- Who is the primary target group—demographic information, gender, age range, etc.?
- What do they need, i.e., access to what types of information, in what order?
- Who are the secondary and tertiary target groups?
- How do the needs of the primary group differ from those of the other groups, and how do we define a balance between meeting all those needs without cluttering up the visual look of the site?
By crafting personas around these various user groups, we can then prioritize various areas of the website.
Primary Users
In our primary group, we have Joe Jones, a registered user of the website, who needs access to a single-sign-on area where he can quickly access raters and quote forms, so those areas should be given top priority. He might be late 30s, upper-middle income, very tech-savvy. He understands what he’s looking for, but he has limited time to find it, so he needs an interface that will make his life easier. He needs quick access to resources and quotes so he can better manage his clients’ needs.
Secondary Users
Susie User B isn’t yet a registered member of the site, so she might be interested in exploring the company as a whole (About, Team, etc.) and the insurance products they offer. It might be relevant to her that they offer insurance products only in certain states, and to access the products for her specific state only. She might be shopping for a new insurance wholesaler to work with, but needs to understand not only the insurance offerings, but the tech tools that the company can offer her. She might be late 50s, with a comfortable level of tech-savviness, at an even higher income level than Joe.
Starting from the Top
We first set out to restructure the sitemap and menus. We rebuilt the navigational structure to make clear what was truly publicly accessible, while making the menu titles more applicable to the submenu items. Translated into visual design, this meant that the menus could be easily expanded.
Anything that could only be accessed by logged in users was hidden from the main menu. We relocated the information accessible from those dated sidebars to clear main navigation items.
We also made it easy to add new states to their assortment, using mega-menus to clearly display the product specific to that type of insurance and state.
Visually, the restructured header shows two clear call-outs to log in or register, then the phone number and search to make it easy for users to get what they need in a variety of ways, should they be unable to locate it using the menu.
This is GOOD UX.
For the secondary audience, whose needs were more marketing-bent, we restructured the homepage slider to be keyword-driven and to include clear calls to action to access news stories relating to, in this case, a newly announced product.
Directing Traffic
Our initial consultation allows us to get to know our client’s users, but also helps us to restructure how the content should be presented visually. We translate that conversation into a sketch and a wireframe to lay out and prioritize the content. This process allow us to then move into “adding color” by creating the Photoshop mockups we present to the client, who is now fully educated on what his users needs are, making communication that much more fluid! From the existing site, it wasn’t clear what the users—primary or secondary—were supposed to do, so we created a balanced presentation that welcomed newbies while instructing seasoned members.
The content used in this area was drawn directly from conversations we’d had with the client, who had made it clear how he wanted his business to be perceived (tech-forward, friendly, etc.), and his own tone helped us set the tone of the text used there.
Following a clear intro and login area, complete with two clear callouts to invite users to register if they’re not already members (as well as a brief explanation of what they’ll find if they do register), we included three navigational boxes designed to shoot visitors off to the specific of the areas of the website they needed. This maximizes the user’s experience by showing them exactly what they’re likely to need, moving them past the homepage and deeper into the site.
None of these three call-to-action buttons would lead non-logged-in users to a dead-end. Instead, they’re encouraged to keep exploring these three core areas of the website. The Quote & Submit button, for instance, wouldn’t prompt the 401 page shown above. Instead, it would lead to a sales page with information about their proprietary comparative rater system, and a login form akin to the one used here for users to either log in or register to use it.
Highlight key areas
We then present a few other core areas of the website, which the owner identified as important but that, mainly, he wanted to highlight to generate more interest and signups. The subsequent section presents the most recent news in a more appropriate (and minimal) way, as opposed to the former design where it dominated the homepage like a journalism website or blog site, and then to showcase a carousel of logos for their carriers.
Note the way the various sections of the homepage are clearly delineated as well, making it clear that, as users scroll, they’re coming upon a new featured section.
Clear, organized, and visually appealing—that’s good UX!
