Usability improvements – Delaget.com

Background

When I was hired by Delaget in May of 2017, they had recently launched a complete rebrand of the company and a brand-new website designed by a local agency. Our team knew that we would want to evolve the design and content of the website as we began to learn what was and wasn’t working.

Pretty quickly, we began to see that the large photo banners at the top, while pretty, weren’t working well from a usability standpoint; they were just taking up too much space and visitors weren’t scrolling down far enough to get to much content.

Process

Our first action was to shorten the height of the existing photo-based banners. We didn’t see much improvement, and began to hear anecdotally that people weren’t even reading the page headlines within those banners. Their eyes were just skimming right past. The banners looked nice but were essentially dead space.

Our interactive marketing manager started some Crazy Egg tests with heat maps and scroll maps and in the meantime I began to mock up some different banner possibilities that didn’t use those tall photo backgrounds.

Ultimately, we landed on a drastically simplified banner design. It was well worth the sacrifice of “pretty” for usability, and we liked the clean minimalism.

We also went page-by-page through some of the key pages on the website and reworked content to put the most important elements above the fold. You can see in the scroll map comparison that I had redesigned this page pretty significantly. It was important to come at the people-don’t-scroll dilemma from more than one angle.

The Finished Product

Take a look through the pictures to get a visual sense of the process and my role in making these usability improvements to the website.

00000-banner comparisons.png

00000-banner options

zscroll map comparison.png

 

000000heat map comparison

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s