Case
Design that drives conversion and builds Landshypotek Bank’s brand
We have collaborated with Landshypotek Bank for many years and, among other things, developed fully digitized loan applications for both individuals and businesses. As part of the bank's digital transformation journey, it was now time for the external website landshypotek.se to receive a new, improved look and functionality.
The assignment
The assignment consisted of reviewing UX, design and technology for a new user‑friendly website. An overarching goal was to make it easier for users to like, find and convert. The new website would, among other things, package Landshypotek Bank's services and offerings in a clearer way. The focus was primarily on the bank's products — mortgages and loans for the green industries in agriculture and forestry — as well as providing the bank's customers and members with a better digital experience.
The new website will:
- help the bank increase the number of loan applications in its digital channels.
- help customers get answers to their questions in a simple way.
- support customers in their everyday lives and function equally well on mobile as on desktop.
- convey the bank's brand and history more clearly.
- be perceived as modern, safe and secure.
- be fast and responsive.
- have the best possible conditions for successful search engine optimization (SEO).
The assignment included:
- Workshops, interviews and data analysis
- Concepts, UX and design
- Content concept
- Training for editors in Optimizely (Episerver) and digital communication
- System development and integrations
- Technical SEO
How we approached the project
The project has been run using agile methods and the initial launch is a first step on a long-term development journey. We began with kickoff workshops where we defined goals, needs and expectations. A review of the current website gave us insights into barriers and areas for improvement. We analyzed the traffic partly to see which pages engaged the most, and partly to see where users ran into problems and got lost. To avoid missing valuable input from customers, we also interviewed customer service staff. It’s an effective way to find out what works well or poorly on the website, since they speak with customers every day.
Identified barriers and areas for improvement
The existing website was several years old and had, over time, become unnecessarily complicated and overgrown. Users, among other things, had difficulty orienting themselves in the deep navigation, which led them into the wrong application flow. Many also contacted customer service by phone to get answers to simple questions that can be answered just as well on the web. Who really wants to call when it’s not necessary?
Editors were also limited by the structure and layout of the existing page templates. They had difficulty packaging and presenting their content accurately. There was a need for new blocks and components in the CMS tool Optimizely to better package the bank’s offerings and convey the brand.
The design also needed digital accessibility adjustments according to WCAG standards to improve readability. To perform better in search engines, we also placed great emphasis on ensuring good performance and fast page load times.
The solution
UX and Design
Landshypotek Bank has a well-developed visual identity, with a color palette and imagery that convey the brand in a refined way. Landshypotek Bank is keen to retain its identity rooted in the Swedish soil and to be close to its customers. However, this must not come at the expense of good usability, and our task was to tweak and adjust the existing style to work better digitally.
- We started from the graphic profile
- Colors and typography have been adjusted for accessibility to improve readability
- Clear call-to-actions make it easy to find the right option
- A pleasant and varied layout helps users absorb the content in an intuitive way.
- The page templates provide a pleasant mix of brand experience and factual information, which in turn should lead to conversion.
- We ensured that the design we developed could be implemented within the time and budget constraints
- The design was visualized in wireframes, which were then concretized with the help of visual design.
Structure
With a newly improved page structure, navigation and a new logical flow, we've made it easy for users to find what they're looking for. The navigation now has clear entry points for the bank's two core products: lending and saving. The interest-rate pages, which are among the most visited, have also been given clear and logically placed entry points in the right context.
Page templates
The page templates have received a new design that packages both the services and the brand more clearly. We've designed with needs in mind and given the homepage, category pages and product pages clearer entry points and a more varied layout to increase readability.
Because the bank offers both simple and more complex products, two different product pages were developed. In one variant there are needs-based call-to-actions and tabs to break the content into smaller sections. The other variant is more pared-down.
To relieve customer service and avoid users contacting them for simpler questions, we've made it easier for customers to find answers to their questions directly on the website. Frequently asked questions and answers, for example, have been included in context on the product pages and have also been given a more prominent position on the customer service page.
Design
For the new updated design, we started from the bank's existing graphic profile, but adjusted it to work better in digital channels. The design has been developed with a color palette that has approved contrasts (AA) according to recognized accessibility principles (WCAG). Links have been clarified and clickable areas have been outlined.
To create dynamism and a warmer personal touch, light color blocks have been used. The blocks frame, group and break up content in a neat and clean way. Primary call-to-actions have been given clear contrasting colors through a warm orange or a natural green color.
To differentiate the bank's unique offering and brand, we moved away from the traditional bank-blue and instead used a softer green in combination with brown.
Development and technology
The website is built on Optimizely (Episerver) with integrations to surrounding systems. The interface is developed in Vue.
To convey Landshypotek’s brand and create the right feel on the website we use many large images. To still guarantee good performance and meet the bank’s requirements for fast page loads we chose to use a Content Delivery Network (CDN) to serve all images on the site. Thanks to the CDN the editors’ image work has also been simplified, since the CDN automatically crops and rescales images based on where on the page they are used and what type of device the visitor uses (mobile, tablet or desktop). As an editor it is now enough to upload an image with good resolution, and the system handles the rest; additionally with significantly faster load times. The CDN chosen was CloudImage by Scaleflex, not least because it is a European company and GDPR-compliant, unlike many other American alternatives.
To meet the EU directives regarding cookie handling we use CookieBot, a third‑party tool that automatically categorises the cookies the website uses and lets the visitor choose whether they want to accept all, or only certain types of cookies.
Development work was carried out using agile methods and planned in sprints together with the project team from Landshypotek Bank.
Support and training for the bank's editors
To help Landshypotek manage the new design we have trained the editors in content work. For example, we have delivered a digital training to increase understanding of how users behave digitally, but also how editors should think when producing content, both from the users’ needs and behaviour and from internal needs and objectives.
To be able to handle the editorial interface and the new components included in the design in a good way, we have also trained the editors in how to work with Optimizely (Episerver) and the new page templates and blocks in practical terms.
Results
After the launch the bank has received positive feedback both internally and from its customers. Customer service receives fewer calls thanks to customers now being able to more easily find answers to their questions themselves. The bank can now also work more actively with search engine optimisation, which has had positive effects through increased traffic. The new design has also resulted in a higher conversion rate and more new satisfied customers.
About Landshypotek Bank
Landshypotek Bank aims to contribute to a richer life across the country. Since 1836 they have financed the housing and businesses of farmers and foresters. For a few years now anyone with a heart for the countryside can also save with Landshypotek Bank, and they now also offer mortgages for houses. Landshypotek Bank became a bank in April 2013 and is one of Sweden’s ten largest banks. The bank is owned by approximately 38,000 loan customers within agriculture and forestry, organised as members of Landshypotek Economic Association.
Visit Landshypotek's website
Would you like to know more about how we can help you?
Get in touch with us and we'll tell you more.
