PROJECT CLOSEUP: Claremont Savings Bank Website
ONLINE PROJECTS teach me most of my new lessons these days. One example is this project for Claremont Savings Bank in early 2016, when I tackled my first responsive design website.
77% of Americans now own smartphones according to Pew Research, and industry pollsters say eight out of 10 Internet users regularly access the net from a smartphone. That's why a responsive design website is so valuable, working equally well on big desktop monitors or tiny mobile devices. Unfortunately, CSB’s decade-old website didn't work well on either.
Claremont Savings Bank's old site didn't work with mobile devices -- or goals such as growing online revenues.
CSB wanted a virtual branch, but all they had was an online brochure. Big scenic photos wasted valuable real estate while requiring device users to scroll madly for content. Top navigation was cluttered and passive, giving customers no encouragement to make transactions online. Plus it seemed all about the bank, not about the customers.
A "Sandwich" Approach to Responsive Design
Tight budgets meant a lot of the legacy content would get only a modest streamlining, which put me in the unaccustomed position of brainstorming structure rather than form.
I studied some responsive bank websites, and the immediate metaphor that came to mind was a submarine sandwich: a long slice of bread on top with essential navigation, then big interactive buttons as toppings to go with meaty fillings such as dynamic sliders, promos, news alerts and customer-friendly tools. The bottom slice was liberally spread with lesser navigation links such as careers, privacy and security, and so on.
This "sandwich" ended up featuring six layers of content, splicing old legacy content with new material to make the format work. The new homepage still bears a family resemblance to the old one, but it's dramatically better from a customer's viewpoint:
Customers on mobile devices could check rates, apply for loans, open accounts and plan for their financial goals.
Lessons I'm Still Struggling to Learn
Ah, but don't think it was smooth sailing. I had a hard time getting my head around just how many separate pages needed to be consolidated for a responsive site. In fact, it's better to think of them as sections rather than pages.
In print and most online media, keeping content short and "above the fold" is a priority. But a responsive design page is like the elevator shaft in a 10-story building. You're fine as long as there's a buttons for the floor you want.
A mobile device's navigable snapshot is the size of a business card, so "breadcrumb" nav links and collapsible buttons help reduce scrolling.
Hallmarks of a Responsive Design Website
- Easy Navigation: If impatient mobile visitors can’t access key functions directly from your homepage or landing page, you’ll suffer from high drop-off rates. Add a vertical list of shortcut buttons or an icon-driven grid so visitors can shop, compare, buy, download or demo right away.
- Scroll-free Content: Smartphone users want a navigable snapshot about the size of a business card. If you feature sprawling text and imagery that require endless scrolling, your site is probably an annoying time-waster. Compartmentalize everything with tabbed or collapsible content and image sliders, so the big picture is always in view.
- Big Touch Targets: Are you frustrating touchscreen tappers with tiny buttons they can’t lay a finger on? Follow the lead of smart interface designers like Apple and upsize touch targets such as buttons or icons, so the first easy tap on their touchscreen takes them precisely where they want to go.
- Instant Help Options: If you don’t have click-to-call, click-to-text or online chat buttons clearly featured, you’re missing the chance to answer questions, make sales and build loyalty. Put one-touch contact options on your homepage and “Contact us” page. These users have phones in their hands, so they’re ready to engage.
- Videos: The vast majority of consumers find videos helpful when making buying decisions online, and mobile users find them especially valuable because they pack a lot of information within a small space. In fact, some studies I've seen show that videos can increase conversions by nearly 13% on average. And that might be a conservative figure.
A great thing about advertising is that even a grizzled old-timer can learn new things. So stay tuned. I have some other websites in the pipeline that I hope to share soon. | DC |