Credit Union SA

With the member experience at the forefront, the redeveloped Credit Union SA website is built for speed, stability and security.

Project summary

Key services:

The requirements:

  • Ultra-fast page speed & performance
  • API integration for loan rates and fees
  • An alert system for site-wide visibility of key customer-facing information
  • A modern light-weight CMS that is designed for flexibility 
  • A vibrant design which aligns with and enhances Credit Union SA’s position as an inclusive, energetic and trusted financial partner.

The outcome

Clean lines, white space and angular detailing; the redesigned Credit Union SA website is a refreshing take on traditional financial service offerings. Craft CMS offers scalability and flexibility, enabling the Credit Union SA team to create both templated and unique web pages with ease. The decoupling of the CMS from the front-end offers a highly secure, ultra-fast experience for users and website administrators alike.

The impact

  • 19% decrease in bounce rate and 25% increase in session duration.
  • Auto-updated interest rates and fees tables, providing up-to-the-minute data.
  • Custom alert functionality for critical member-facing information.
  • Lighthouse Tools Performance Score of up to 97/100.

Visit the new website

The redeveloped Credit Union SA website supports the customer’s experience end-to-end, all the way from search engine results through to selecting a product, reviewing services and browsing through the organisation’s many community engagement strategies. 

Atomix continues to support Credit Union SA’s digital strategy through hosting, security and an ongoing support plan.

Our approach

Before diving into the design and development, we like to explore what success looks like.

Forming the basis of the project brief, the Credit Union SA team had an expertly curated Business Case document which outlined both business challenges and project success criteria. These were fantastic kick-off points for our team to begin the discovery and exploration phase.

Working closely with the team at Credit Union SA, we performed a detailed audit of the website, reviewing features and functionality, tech-stack and individual components or templates, as well as integrations, analytics tracking and content.

With the audit complete and reviewed by the team, we were able to set our minds to the future. In a workshop setting, our strategists collaborated with the digital content and member experience teams at Credit Union SA to further outline requirements and identify key performance indicators for the new website.

Based on the success criteria, our development team were free to explore the possibilities for Credit Union SA’s brand new tech-stack. The team settled on Craft CMS and a decoupled React.js build, chosen for speed and security, as well as flexibility and scalability when it comes to content creation.

User research is at the heart of what we do, and with Credit Union SA we had the exciting opportunity to extend our research capabilities with customer co-design sessions.

The aim was to understand the customer’s needs, expectations and behaviours with the end-to-end home-buying and home loans process. Together with Credit Union SA members, we explored solutions that could help to solve challenges and help customers reach their goals.

A blend of both members and non-members from the Adelaide metropolitan area took part. Between them, they spanned across the 3 key stages of the home loans and home buying process:

  • currently researching and planning for mortgage;
  • in the middle of applying for and locking in a home loan; or
  • recently settled with new mortgage.

In addition to two design workshops, conducted using remote collaboration tools Zoom and Miro, a one-week diary study was used to collect thoughts, feelings and insights from customers who were in the thick of the home loans process. We also used the diary study to encourage further exploration of questions we posed during the discovery workshop, in order to prepare our participants for a co-design session.

From content-based guides and articles to customer service suggestions, the research provided a wealth of ideas and opportunities for the Credit Union SA digital content and product teams to further ideate upon in the co-design workshop. Key outcomes of this session included content requirements, page structures and functionality that could help these customers better navigate the home purchasing process.

When it comes to bringing the Credit Union SA digital strategy to life, content is key.

As part of the discovery and exploration phase, the Atomix and Credit Union SA teams created a living, breathing content library to act as the source of truth for all content across the site.

Using this content database as the starting point, we worked methodically with the Credit Union SA content team to build out useful, information-rich pages, guides and articles. Our focus was on repurposing and reframing the existing content, including help articles, blogs, product information and frequently asked questions.

When the CMS was ready, our teams collaborated on implementing the content in line with the strategy formulated from user research and insights. Constrained content width, bullet points, subheadings and tables contribute to a more comfortable, scannable reading experience. Using information design principles, the redesigned content pages enable users to assess which part is helpful or relevant for them, without contributing to information overload.

Using insights from customer profiles and inspiration from the brand guidelines, the user interface design process commenced.

Firstly, with the Credit Union SA brand manifesto as a launchpad, our digital designer explored how the brand could be reinterpreted and reimagined for a fresh take on a financial services website. We held a workshop with the Credit Union SA team to gather inspiration and ideas, looking at best-in-class examples from the financial services industry and beyond to reinterpret and translate the brand guidelines into highly intuitive, effective art direction.

Alongside the art direction, we began the wireframe process. In line with the functionality audit and the technical requirements, our UX strategists designed components to display insightful and relevant information in compelling, user-friendly ways.

Once all the components were mapped out in wireframes, our UI designer got to work applying the art direction. Angular graphic elements, clean lines minimal sans-serif typography and subtle animations brought the components to life.

Using the existing website as a baseline, and collaborating with the Credit Union SA digital content team, our UX strategist began compiling page templates using these components. By thoughtfully noting the intended message of the page and understanding the customer’s needs and context, each component was deliberately and carefully placed to create templates for easy replication and consistency across the site.

This in turn assisted the Credit Union SA digital content team in planning the content migration. Critical to this process was identifying how to support the customer with useful, scannable information about a product or service, supported with instructional guides, how-to articles and help topics.

One of the objectives of the website redevelopment project was in-built flexibility and scalability.

Equally, Credit Union SA was looking for a solution that offered a high level of security as well as fast content delivery.

To offer lightning-fast content delivery and superior security, we commenced a decoupled build: the CMS and the front-end are completely separate instances, with a content delivery API the only connection. Decoupling the CMS keeps the administration side completely separate from the presentation side, which means the website’s security is second-to-none.

As an open-source javascript UI library, React.js allowed our web development team to dive straight in to developing complex components and interfaces quickly and efficiently.

Components are reusable and can be easily repurposed, ensuring a high level of consistency and quality across the huge variety of templates and features.

The biggest benefit of using React.js is speed. React.js enables developers to build web applications that can change data without reloading the entire page; only the changed elements are refreshed, saving precious time for the user.

Our post-launch Lighthouse Tools audit showed a maximum Performance Score of 97/100, before Google Tag Manager and additional tracking scripts were installed. Additionally, the site reached 93 for Best Practices, which includes security, stability and modern standards of web development.

Noteworthy features include:

  • horizontal tabbed content
  • grid-style features list
  • product comparison cards
  • content carousel
  • one and two-column accordions
  • site-wide alert banners
  • site-wide search
  • mega menu
  • full-screen promotion banners
  • customisable rates and fees tables, integrated via API

Whether it's a redesign or a total reimagining: let's talk strategy.

Reach out to our team of strategists and explore what’s possible.