How we modernised a website with rivalling requirements

It wasn’t hard to persuade our Web Developer Adam to come up for air and talk us through (get grilled about) his recent website build for the Hanley Economic Building Society.

Read how he transformed their user experience (UX) and user interface (UI), despite competing requirements from different user groups and industry regulations.

Q. What were the motivations behind a website redesign for The Hanley Economic?

So The Hanley Economic are in a transition phase to modernise all of their systems and processes across the building society. As part of this, they wanted to innovate and transform the navigation across their website. They knew that 60% of their existing site visitors were aged between 18-44 years old and wanted to cater to this younger demographic in terms of design and functionality, to better meet their needs - and ultimately attract more customers.

Q. How did you approach the research phase?

As we embarked on a UX and UI journey we explored their main audience types and their needs, behaviours and expectations. 50% of their total website traffic were members (the general public), with the other 50% made up of mortgage brokers.

UX for the members (or general customers) was softer and needed to educate, inform and sell. These users are subject to marketing from other providers and need to be guided from the consideration phase of the marketing funnel to conversion.

UX for intermediaries (brokers) was harder and transactional. Clarity of information was vital to maintain good relationships and make these ‘heavy users’ of the site able to do their jobs without interference.

We worked closely with the Hanley team to do competitor analysis and identify what innovation and best practice looked like to them and their users. It turned out that it meant speed and ease of use.

Their existing website was built in WordPress and the user journey was difficult due to the legacy of website additions solving individual tasks, rather than attending to customer needs. So, we discussed historical customer queries and looked for common threads that the new website must be able to answer.

Then by looking at their customer personas and Google data we knew that they needed a website that was bold in its simplicity - to allow users to find the most important information quickly and then find further support and information where applicable.

Q. Were there any specific challenges or pain points in the existing website's UX?

Yes, I’d say the biggest challenge had been balancing the requirements of the marketing team with that of the internal compliance team. We had many discussions about how and where to display regulatory information in a way that didn’t interfere with a user researching their options and looking for the best deal.

The WordPress site had a lot of essential regulatory information, but much of it was hidden behind body copy links, which made it very difficult for the user to find. So, we advised the Hanley team to rationalise the customer journey and to present more of the essential regulatory content on the most relevant pages. To minimise lengthy scrolling, we introduced swipers, accordions and tables to allow the user to interact with the page to filter the information to what exactly they want to know at that moment.

Q. What were the key principles and considerations guiding the new UI design?

The UI had to feel modern and simple, meaning we could focus on building a website that was super fast to load. Users come to The Hanley Economic with a specific need, for example, ‘I need to remortgage’ or ‘I need to save for a rainy day’, and so displaying the values of the Society and the transparency of their offering had to be clear across the site.

We then wanted to guide users down a clear path of enquiry. This meant having product types on the homepage, such as mortgages and savings (these had carefully considered icons to support understanding), then having product categories underneath (which also had clear icons), such as first-time buyers and retirement-only mortgages. The final layer was the actual product layer, and this contained a clear index of all relevant products, (at this level we knew icons would only clutter the page and distract the user from reading and understanding, so the icons gave way to clear information structures), their repayment terms, fees, APR etc. From here users who were unsure could browse different products, find relevant links to FAQs, Useful information or use the Chatbot.

Building the new site using the latest technology was a given, as was making the experience as good on mobile as it is on desktop.

Q. Were there any design iterations or testing?

At the design stage we produced two distinct styles for the new website. The key stakeholders at The Hanley Economic reviewed these and decided on their preferred direction, which we were able to refine further based on their feedback.

We built the demo site and then conducted business wide testing with each department within the business. We reviewed the feedback against the initial brief and put this into a backlog for exploration in phase 2. After six months we’ll conduct usability testing to check that users are able to achieve their goals and identify any optimisations.

Q. How do you collaborate on this kind of UX/UI project to make it a success?

The UI collaboration started with the content creation. The Hanley team know the products inside and out so wanted to write the content themselves. They worked closely with us for advice on content hierarchies, and through consultation, we developed templates that helped the Hanley Team focus their content creation on meeting the brief.

Once we’d established a hierarchy that blended the needs of users, compliance, and the Marketing department, we were able to define the UI for product categories, product pages, and supporting material seamlessly.

The collaboration helped us achieve a cohesive and user-friendly interface that not only met regulatory requirements but also enhanced the overall user experience. The refined UI design really showcased the products effectively, but also provided a structured and intuitive navigation system for users. As a result, the Hanley Team can present their offerings in a more organized and visually appealing manner, contributing to increased user engagement and satisfaction.

Q. What plans do you have for ongoing UX/UI improvements or future enhancements?

Once we have six months of customer data we’ll identify any areas that we can further improve performance. We keep a regular dialogue with the Marketing and Compliance teams at The Hanley Economic to prepare for any regulatory changes ahead of time.

The best websites are always built (and maintained) through a strong partnership, so we like to keep our communication channels open.

We hope you enjoyed grabbing five with Adam as much as we do.

If you’re thinking about developing a new website for your business and would like to talk, get in touch on 01782 618324 or info@starbots-creative.co.uk.