Increasingly, smartphones are the first tool used to surf the Web. Photo by Jonathan Velasquez

Increasingly, smartphones are the first tool used to surf the Web. Photo by Jonathan Velasquez

User experience (UX) and marketing should never be at odds during a website design project. In fact, these two areas are closely connected — one cannot succeed without the other. In this article, we’ll look at four ways UX and marketing can intersect to create websites that are easy to use and effective in presenting a company’s brand and driving conversions.

Responsive Web Design

Sites poorly optimized for a diverse range of devices are a persistent and common problem. Image via wtfmobileweb.com.

Sites poorly optimized for a diverse range of devices are a persistent and common problem. Image via wtfmobileweb.com.

Responsive Web design enables a Web page to adjust automatically for optimal display on desktop monitors, tablets or smartphones. Since the explosion of mobile internet access, responsiveness has become one of the most important UX features a website can have. Websites designed for desktop users almost always provide a terrible mobile experience, one requiring continual pinch zooming and horizontal scrolling. This leaves users frustrated, confused and unable to find the information they are looking for — deadly sins for the UX-minded.

On the marketing side, responsive Web design is a huge priority, or should be. A website that disappoints mobile users is not only damaging, it can be devastating. Consider restaurants. People use mobile phones, not desktops, to look for places to eat, check out menus and make reservations. If a restaurant has a mobile-unfriendly site, it will not only lose a dinner reservation, it may lose a potential new patron forever.

Stacking Stories

Responsive design “stacks” blocks of content to visually prioritize information for mobile users, enabling them to find what they need quickly. Stacking forces UX and marketing professionals to carefully think about the order in which information is displayed on a website.

In the old days of desktop-only design, the idea was to cram as much information as possible above the fold. Marketing and UX had similar interests in this: marketers wanted calls to action to hit users over the head; UX people wanted to reduce vertical scrolling.

Thanks to the pervasiveness of smartphones, most people are now accustomed to vertical scrolling. It is no longer essential, or even a viable option, to stuff everything “above the fold” — the fold no longer exists for mobile users.

3-story-telling-1

The acceptance of vertical scrolling and the need to prioritize content and put it in a sequential order is tailor-made for a storytelling approach. Storytelling is a terrific marketing technique because it is highly engaging and memorable.

On the Highland Solutions landing page, pictured above, we used blocks of content “below the fold” to tell the story of how the firm puts relationships ahead of technology. From a design standpoint, these discrete blocks allow for a variety of imagery, color and fonts that work together to draw users in and make them curious enough to scroll down to learn more. Creating this home page forced us and the client to make decisions about what parts of the relationship-technology story were most important, as well as how aspects of the story fit together from a prospective client’s point of view. From a UX and a marketing perspective, such an exercise leads to far better results than the “information dumps” of loosely connected and barely relevant information that characterize so many desktop-only business websites.

It’s important to note that a storytelling presentation is not only good for mobile users, it’s good for everyone. Desktop users are also mobile users; everyone is accustomed to vertical scrolling, and everyone loves a good story. The technique may yield great improvements and UX and marketing even for companies where desktop users are the primary type.

Sticky navigation converts

So far we’ve looked at big picture UX-marketing issues, so let’s drill down to something specific — sticky navigation. Sticky navigation keeps high-level navigation links at the top of the page so they remain consistently visible as a user scrolls. This is a tremendous convenience, since it allows mobile users to easily move around the site no matter how far down they have scrolled. In addition, sticky navigation creates site-wide consistency that lets mobile users know whether or not they have left the website after clicking on a particular link. The UX grade for sticky navigation: A+.

On the marketing side, sticky navigation is worth its weight in gold. On the Highland Solutions website, both the main and customer support phone numbers are constantly available, enabling users to take action whenever they feel like it — superb convenience, and superb for driving conversions. The main navigation menu is similarly accessible through an icon that appears at the top right of the mobile screen.

For a website as complex as Highland’s, mobile users would be lost without sticky navigation. While this small design feature may seem obvious, look for it next time you are browsing the Internet on your smartphone. You’ll be surprised by how often it’s missing.

Togetherness

highland-solutions

For any website development project, marketing and UX specialists should talk early and often. Marketers help UX specialists understand the nature of the target audience, what information is most important, and what type of actions the website is trying to get users to take. All of these considerations go into creating a website with high UX characteristics. Marketers have a lot to learn from UX specialists as well. For instance, marketers tend to want too much — too much information, too many calls to action, too much (non-strategic) design, etc. However, UX knows that quite often, less is more: a bit less content, a well-placed phone number and a lot of white space could be the winning formula for brand presentation and lead generation.

What’s Next?

Google is boosting mobile search rankings for pages that are legible and usable on mobile devices. Image via Google

On April 21, 2015, Google began implementation of its much-anticipated “mobile-friendly” algorithm update, which will no doubt create a stampede of companies rushing to redesign their websites to avoid losing serious ground in their SEO campaigns. A few observations and thoughts about this:

The fact that it takes a Google algorithm update to inspire companies to give users a great mobile experience suggests companies have not been thinking about their customers enough — mobile Internet use is not exactly breaking news. Perhaps the Web design community needs to be given or earn a greater voice in marketing and sales management.

Google is lowering mobile search rankings for pages that are difficult to use on mobile devices. Image via Google

With “mobile friendly” about to become the shiny new marketing object (in 2014, it was content marketing), one wonders if there will be a backlash. As people spend more and more time staring at screens, more people are questioning the mental and physical risks of cell phone exposure. Might we be heading toward an environment where demand for desktop-friendly websites increases? Perhaps web designers shouldn’t forget everything they’ve learned about desktop design just yet.

With this last point in mind, I can see three types of web design sub-specialties emerging: responsive design, mobile website design and desktop design. Responsive websites make sense for relatively simple lead generation websites, but separate mobile websites may be the best way to go for complex e-commerce websites consisting of thousands of pages. Creative and workflow processes for these three types of websites are quite different — there’s going to be a lot more for designers to know in terms of user experience, that much is certain.

Further Reading

Feeling inspired to merge your marketing efforts with UX best practices? Check out these other great resources:

The SEO of Responsive Web Design

Tips for Storytelling in Case Studies

Sticky Menus Are Quicker To Navigate