UX & Visual Design Case Study: Frontend Redesign

Insurance Website Design

UX & Visual Design Case Study: Frontend Redesign

When it’s time to redesign your website, you’re probably thinking along the lines of visual design—make it prettier, make it easier to use, more white space, more like our competition’s new website… something along those lines. 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 recent 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.

coreclick

This menu was available on every single page, whether the visitor was logged in or not, from a common sidebar. But if you weren’t logged in, you got this:

UX Frustration

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? (Back just happens to be the most used button in a web browser.) 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.

Registration and Login Confusion

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. Can you find it on the top half of their homepage?

User Registration Hidden

If you couldn’t find it, don’t worry. It’s 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.

Look at all these menus! That’s all we have to say about this… for now.

UX Menu Screen Shot 2015-04-13 at 11.52.37 AM

Wait, TWO news feeds? Why?

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.

UX News Feed Design Screen Shot 2015-04-13 at 11.56.08 AM

Meeting Your Audience

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. But that’s OK. (That’s why it’s a good idea to bring on experts like us to help.)

Sometimes you have to get an outsider’s perspective to truly see who it is you’re trying to attract and how you’re doing it. 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:

  • 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.

SEE ALSO:  How housing authorities increase accessibility with mobile-friendly websites

Hmm… Another UX hurdle.

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.

UX Menu Design

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.

UX Menu Design

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.

Where Do You Want Them to Go?

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!


Bonus to Hiring a UX + Visual Design Team

At this point, the redesign process becomes fun for the truly engaged business owner. He begins to see his own ideas come to life, real-life problems being addressed, and solutions visually presented. He can imagine the way his users will respond because he’s been repositioned to see the site from the other side.

While many web designers move forward with a redesign project as if separate from their clients, this often leads to disjointed end results that don’t truly meet long-term needs. By bringing on a team that understands UX and visual design, you truly serve your customers better!

Learn more about this project, including the interior page and backend UX and visual design provided at their subsequent request following this project’s completion, in our portfolio.


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.

UX Welcome AreaThe 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.

Moving On . . .

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.

Jebfurther

Direct, simple, clear—that’s GOOD UX!

We restructured the homepage and navigation, both from a UX and visual standpoint, but we then moved inward to create several interior layouts. Of course, this post is probably long enough, so…

Learn more about this project, including the interior page and backend UX and visual design provided at their subsequent request following this project’s completion, in our portfolio.

0 Comments
Share Post

Sarah Williams

Founder & director of 816 New York and passionate about all things strategy.

Leave a Reply

avatar