Case Study: ooba Brand Website

Overview

ooba is South Africa’s leading home loan originator and offers a range of tools and financing solutions for purchasing property.

Prospective homebuyers use ooba’s calculators to determine the costs involved, and can then apply for their bonds online. Estate agents, who make a commission from referring bond applicants to ooba, white label the company’s calculators to keep home buyers on their own websites.

While the website was delivering leads, ooba was aware that the site - which was last updated in 2008 – had some technical frailties and hadn’t kept pace with broader web development practices. Knowing that a thorough web enhancement project would improve user experience and boost revenue generation, the company appointed 2Stroke to rebuild the site in early 2013.

Concept

ooba's brief to 2stroke contained a number of elements:

  • enhance usability to deliver an increase in general home loan enquiries and bond applications
  • provide a new look and feel that would support ooba’s positioning as the ‘Experts in Home Finance’
  • replace the site’s legacy Oracle-driven front end while still maintaining direct integration with back end through Oracle ‘portlets’ to allow for data processing (existing tools and calculators running on the Oracle back end were to be retained)
  • build on an open source CMS that would allow the ooba team to make content updates
  • upgrade the information architecture to enhance search engine friendliness while mitigating the risk of traffic being lost when URL updates change pages listed in Google’s index
  • remove product lines that were no longer core business functions

As ooba provides a no-fuss way to secure property finance, we wanted to reflect this convenience and simplicity throughout the content and design of the site. In order to inform decision making, we conducted a usability study of the old site with the Crazy Egg tracking tool. This helped us to determine how content should be presented and how it could be made more interactive.

By incorporating stronger visual cues and less copy on pages while improving the information architecture and streamlining page hierarchies we hoped to make it easier for humans and search engines to find data. We anticipated that altering webforms by splitting them into more ‘usable’ chunks would make them appear less daunting, resulting in more submissions, while also allowing us to measure where fall off takes place.

The execution

Design / look and feel

The site was given a design overhaul with greater use of screen width to give it a contemporary feel, whilst maintaining ooba’s corporate colours and brand essence. Look and feel was enhanced by making the site fully responsive, providing a seamless user experience regardless of the device from which the visitor was accessing the site.

Icon-based shortcuts were placed above the fold to break the previously content-heavy pages and make content more accessible. As an example, home page icons direct visitors to key resources including application forms, calculators and insurance products.

Top level navigation was designed to focus on what the web visitor wants (data from Crazy Egg and Google Analytics confirmed visitors were more interested in application forms, tools and advice than they were in company information or career opportunities). Accordingly, the top menu was restructured to focus on four simple tabs: apply for a home loan; calculate home loan costs; home loan advice; and contact (access to broader corporate information was provided from the footer).

These new elements and various calls to action allow users to access tools and calculators with a single click (the previous version of the site necessitated at least three clicks to access this information).

Content and user experience

Content was organised so as to be as accessible as possible, making it easy for users to find what they needed and nudge them towards goal completion. The information architecture was streamlined to simply focus on four tabs: Apply for a Home Loan; Calculate Home Loan Costs; Home Loan Advice; and Contact.

Thus, we used stronger visual cues, created icon-based shortcuts and reduced copy. The copy itself emphasises ease of use, expertise, peace of mind and efficiency - optimised in a natural manner. We removed non-core product lines that distracted users from key landing pages.

The calculators were grouped in one section, and the application forms in another one, to aid user flow. Each application form and calculator features related content, which aids user journeys and allows visitors to locate relevant information. A progress indicator lets users know how far along they are in the application process, so they don’t feel intimidated at the prospect of a never-ending form. Users also have the ability to move forwards and backwards within the form.

To make things even simpler, when a visitor enters data, values are captured for that browsing session. Data can then be pre-populated in other application or contact forms. On submission a results page is loaded that provides further information and calls to action.

Responsive design ensures the site renders equally effectively on PC, tablet and mobile devices, and social sharing was implemented. A quick enquiry webform was placed adjacent to the home page rotational to increase leads, while a live chat facility was implemented to allow visitors to engage with a site operator or sales assistant in real time.

Technology and Innovation

At a technical level, Drupal was chosen as the technology as the open source platform offered all of the necessary functional components. In essence the Drupal site became a display layer on top of the legacy Oracle/Java infrastructure. This gives ooba the benefits of an easy-to-use CMS like Drupal, while retaining the Oracle structure and enterprise architecture.

The content management framework allows ooba’s internal marketing team to modify basic content themselves. Editors also have the ability to relate the content manually. This means that on a specific page they can steer the user to follow the desired path through the website. Enhanced editor features allow them to generate, place and update sidebar elements such as the images and 'call to action' buttons.

To cater for estate agents who want to make use of ooba’s calculators, but want to retain traffic on their own sites, two sets of iFrames were developed and made available for embedding on external partner websites. To handle integration between the Drupal front-end and ooba’s Oracle back-end, we built a php interface, making use of a web service to handle communication. This had an impact on the way data was exchanged for application forms and calculators, and allowed ooba to track where their referral leads came from.

When a visitor enters data into a front-end form, the interface performs a series of inline validation checks before translating the data into a format compatible with the portlet components used by Oracle. Oracle returns a JSON encoded array which is decrypted and presented on the website front-end.

A further layer of integration is provided for the site calculators. A front-end webform captures and encodes the data and then sends a request to the Java portlet asynchronously. This interprets the results in real time, delivering immediate feedback to the visitor. To provide redundancy, all submissions are placed in a message queue that ensures no submissions are lost if there is a communication breakdown.

A general increase in webspam has encouraged more web owners to implement captchas on web forms. Not only do these break the look and feel of sites, but they also impact human usability as captchas are not always easy to interpret.

To combat the spam threat without the need for a captcha, webforms throughout make use of a unique hidden field that tricks spambots into entering data into what appears to them to be a mandatory field. Any submissions containing data in this field are automatically disregarded and not passed on to the call centre for processing.

Results


The primary benchmark for success was the overall number of leads that came through the website.

This chart shows the increase in leads since the end of last year. Bear in mind that bond origination requests peak during house buying season which is typically in the summer months, so while strong growth would have been expected in the Feb to April period, a normal situation would have seen a decline in leads in the May to July period.

In fact, over these three months – which were immediately after the new site launched - leads grew by 22% when compared to with the previous quarter. More impressive still was that the number of approvals applications leapt by 44% - that means that the quality of lead was significantly greater than had been witnessed in previous months.

The site’s bounce rate has fallen significantly. Bounce rate has fallen from an average of 32% to less than 10%. This attests to the site’s enhanced usability and the manner in which relevant content can be surfaced more readily than was the case in the past.

It is common for visitor numbers to fall when a site undergoes a significant migration as Google takes time to update its index of site pages. A view on overall site traffic over the August/September periods comparing 2012 to 2013 shows new visits increased by 51% which is testament to the SEO planning that went into the development project.

Similar increases were seen in unique visitor count.

One of the key reasons for the sharp rise in visitor numbers was the manner in which the new site was optimised. The number of keywords driving organic traffic almost doubled between August 2012 and August 2013.