With the member experience at the forefront, the redeveloped Credit Union SA website is built for speed, stability and security.
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.
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.
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:
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.
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.
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.
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.
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:
Reach out to our team of strategists and explore what’s possible.
© 2022 Atomix web & creative studio