Absa Website Redesign
Before the redesign, Absa's website struggled to capitalize on organic traffic and relied heavily on paid traffic. Conversion rates were low, and bounce rates were high.
​
Following the redesign, we saw a significant improvement in these metrics, with many areas doubling in performance.
Role
Design project lead
Year
2022 - present
Team
Ux designers
Ui designers
Developers
Content writers
Product managers
Achievements
Improved site visits by 120%
By improving our SEO ranking and overhauling our design and content to align to SEO, we able to achieve these result over 2 years
Reduced bounce rate by 20% overall
We worked closely with various business units to reduce unnecessary content and created templated designs aimed at improving engagement
Organic traffic improved from 32% to 69%
We cleaned up and standardised our typography guidelines to ensure better alignment with SEO best practices and keyword search. Additionally, we improved the tagging and labeling of images to better match user intent and enhance discoverability.
Mobilized a new team within just 3 months.
I took on the challenge of upskilling the team on how to build and maintain a design system from the ground up. Together, we collaborated to establish new processes and systems that would support and sustain the ongoing redesign efforts.
The Challenge
After Barclays parted ways with the business, Absa underwent an overnight rebranding. While the new logo was introduced, the website remained outdated, relying on basic templated pages without a cohesive design system.
It became clear that implementing a scalable and sustainable system was essential for managing and maintaining the redesigned website moving forward.
From a management perspective, it was crucial to align stakeholders across various business units, ensuring the needs of a diverse audience—representing all walks of life—were met. Understanding our core audience was key to building a user-centric platform that would serve their needs effectively.
In summary:
-
Not SEO (Search Engine Optimised) aligned and poorly ranked
-
​No design system
-
Lack of systems and processes to handle redesign
-
Varied stakeholders to address in order to get buy-in
-
Diversified user segments to cater to
Our approach
We worked closely with the SEO team to develop a new information architecture (IA) menu that was closely aligned with user needs. Our approach was to prioritize key journeys that had the greatest impact on our bottom line, and then create reusable templates supported by a robust design system.
We also used variants in Figma to streamline the design process. Variants significantly reduced the time designers spent creating different states or making changes to a single page.
​
The biggest challenge we faced was getting buy-in from the various business units. To address this, we adopted a phased approach, which solved two key problems:
-
Gradually introducing new components helped minimize the impact on existing users and business stakeholders.
-
It allowed us to A/B test new designs and components on the live website, enabling rapid feedback and adjustments as needed.
Design research and testing
We mapped out the entire website and conducted a thorough information architecture (IA) analysis. Our testing approach combined both qualitative and quantitative research, including A/B testing on the live website and one-on-one user testing with actual users.
​
This mixed-method approach allowed us to gather deeper insights behind the quantitative data, helping us better understand user behavior. Stakeholder interviews and workshop sessions provided valuable perspectives across the organization. Through affinity mapping of stakeholder concerns, we gained a clearer understanding of the broader challenges facing the various business units.
Implementing sustainable practices and systems
Simply redesigning the website wasn’t enough. To maintain the quality of the design system, I implemented controls such as a review process and insisted that designers work off Figma branches. I also established a weekly review forum to handle new design requests and ensure quality checks.
​
We conduct yearly audits of the design system to identify and address any issues. Thanks to the use of variants, which are more user-friendly, we’ve been able to reduce breakages. The phased approach continued to gain momentum, with some business units even providing additional funding to accelerate the redesign process.
​
We treat the design system and templates as living documents, continuously evolving based on data and testing feedback. A/B testing and user testing remain crucial to our ongoing improvements.
Outcomes
The final product with before and after pictures. A snapshot of our design system and components
Design system
Variants have increased productivity and ease of use for our designers. As part of our control measures, we track ongoing changes and document the reasons behind each modification.
Moving forward and marching on...
We've made significant progress and hit major milestones, and it's clear that the team has matured along the way. Starting from scratch allowed us to innovate freely and work toward meaningful change. However, as we look to the future of the platform, it’s time to consider what the next point of innovation will be.
​
I strongly believe the web is becoming more interactive and personalized than ever. If we look at Progressive Web Apps (PWAs) like Figma, Spotify, and WhatsApp, they’re reshaping our understanding of what websites can do. These types of innovations are the direction we can move toward.
​
As the team evolves and transitions to new projects, it’s crucial that we document our work to prevent over-reliance on any one individual. This is a natural part of the maturing process, and building a succession plan is key to sustaining long-term success.
