Skip to content

Bank Website Redesign Case Study


Monroe Bank serves central and south-central Indiana from its headquarters in Bloomington. The bank has a strong brand that’s focused on customer service and community commitment.


Monroe Bank’s old site didn’t reflect their brand or meet their changing needs as they reached out to new markets in the region. The design was generic, the code wasn’t search engine-friendly, and the site architecture was confusing. And when did they need the new site? Yesterday.
See and learn more


Brand: Our design built on the Monroe Bank brand by using its signature green along with warm accent colors. While many banking sites feature “lifestyle” photos that show generic people working with laptop computers, we chose photos in which people look directly at the visitor. With rich textures, classic colors, and friendly faces, the photos create an immediate emotional connection and demonstrate how Monroe Bank’s people make all the difference.

Site architecture: Our navigation system “chunked” information into major and minor categories. We narrowed navigational choices on the home page to key categories, then offered visitors access to a wealth of information one click down. One photo is assigned to each category of information so visitors can easily tell when they’ve switched categories. We also created a series of ads for the site to tell the visitor about related offerings in other categories. Finally, we added a search engine and site map as additional navigational aids.

Content: The redesign also allowed us to greatly expand site content. The new site describes products and services in greater detail, and account comparison charts and other tools help visitors decide which product is best for them and how to contact the appropriate staff. In addition, the bank can now easily promote special programs, such as its banking and travel club, special seminars, and community events. We specifically wanted to promote online banking, so we created visual and textual aids to drive people to that product.


The redesign brought a quick and overwhelmingly positive response, immediately leading to more sales. Search engine ranking is good and both customers and internal staff find the site much easier to use. Because the site captures the brand so well, its design elements are appearing in new print materials. Plans are underway to make site content dynamic, integrate online and offline marketing efforts, and publish additional financial planning content to help attract search engine traffic. In December 2006, the site was featured in Community Banker, an industry trade magazine, for its powerful brand impact. In May 2007 and again in 2008, Monroe Bank received a Maxi Award, one of the industry’s highest accolades, for this site design.


Cairril has a great grasp of the larger picture and is one of the best collaborators I’ve had. She knows how to listen. She doesn’t stop at the words I say—she digs deeper to learn what I really want. She was the perfect choice for our site redesign.

Our new website is leaps and bounds beyond our previous site. Cairril would be a great choice for anyone who wants marketing to be a bigger piece of the whole. Working with her was overwhelmingly positive—I’d trust her with any marketing problem.
Danise Alano, Vice-President of Marketing, Monroe Bank

Designing a bank website

A case study of HSBC website redesign

Recently I had the opportunity to sit in the Digital Week roadshow organised by HSBC Australia digital team. Finally HSBC Australia is updating the website to cater for mobile visitors, with a proposed design inherited from HSBC Hong Kong. I was particularly interested on the UI/UX of the new website, so I evaluated the HSBC Hong Kong website to get a feel of the new HSBC Australia interface.

The modern and slick user interface (UI) has definitely help to stand out from the crowd. But the user experience (UX) have room to improve. From experience, slick new design follows the best practices alone generally does not guarantee for improve conversions and increase revenue.

The problems

People don’t visit a bank website very often other than coming for the internet banking. For me, I generally visit with a specific reason in mind, either to shop for a rate/account, to find contact numbers, or want to get things done.

My first experience with the HSBC Hong Kong website required a lot of guesswork to explore where information were placed. There were multiple products and services staked into the menu, and information buried in links after links. I was not impressed with the information architecture of the new design.

Currently the most elegant way to navigate through a banking website I’ve seen is utilising the search function like the ASB Bank website. But for HSBC, this is still not intuitive enough for users to navigate through products and increase revenue for the bank.

My solutions

The future of banking websites will likely to transform from a supporting tool to a fully capable self-serviced digital branch. I share my new design concept for a banking website to encourage innovation.

For my redesign I want to bring back the familiarity of the HSBC menu layout and present them differently. I’ll be focus on the swipe-based navigation to bring consistent UI across the site. This also makes navigation fast and intuitive.

Make navigation easier

Information architecture is an art and science of organising and labeling websites. That’s the reason I kept the side navigation menu and the marketing slider because they are familiar and it conveys message quite effective.

Each product or services is displayed into categories with horizontal scrolling. This offers a high level overview of what HSBC does.

Show clear call-to-action

As mentioned earlier, people often come with something specific in mind, so we need to make it easy for people to see the solutions and apply online. Product cards design is commonly used today, and it’s familiar to most people. They can scroll through products or tools available to them, see more information or share to friends and family at ease.

Social proof can help conversion

Anything that shows the popularity of the product offered can generally trigger a response. Showing how many people viewed, shared or applied online is a great social proof. Which brings trust to the shopping experience.

Personalise the website

I know, banking industry is quite heavily regulated. It’s tricky to display offers based on individual profiles or where people recently visited. How about telling people that there are new offers since their last visit? So they won’t miss out any deals that might be interested to them.

The new HSBC home page

Now the new HSBC home page is visually clear, technically scalable (both vertically and horizontally) and consistent to the overall layout. Each department now have equal opportunity to get on the front page real estate to promote their products.

Make it easy on mobile

Of course, the website need to be mobile friendly. I also want to give it a native look and feel. It’s all made possible with a mobile responsive design available today. We also add a fixed menu bar, to give users options to contact the customer service or visit a local HSBC branch in just a click of a button.

Make innovation part of the DNA

A good banking website will require constant improvement. The future of internet banking could evolve into a digital branch with capability to handle all non-cash related tasks. It’s important to stay ahead of the competition and bring in features to improve customers experience.

Let’s see how it evolve overtime.