Alexforbes
UX Design
Case Study
The Challenage
South Africa’s largest pension fund administrator underwent a transformation – in both name and presentation. Alexander Forbes is now Alexforbes, gaining a new logo and design language. Dynamic shades of teal replace, orange and black, and circular motifs visually communicate connection. Along with several other changes, this rebrand put a focus on the relationship Alexforbes aims to foster. “This shift aligns with our vision of becoming the most impactful provider of financial advice serving both individual customers and institutional clients,” said CEO Dawie de Villiers.
Our Roles
Digitlab worked closely with IBM to find direction for the Alexforbes Group website overhaul, as well as preparing design resources for the brand’s internal communication platforms.
Digitlab introduced Alexforbes to Instagram and established a powerful modular design system to make social media communications a breeze. We then applied these design principles to all Digital Media Advertising content, as our team managed the delivery and execution of digital media assets with the company’s media partners.
In short, Digitlab was brought in to handle the following aspects of the rebranding initiative:
- Consult on various internal panels as the digital lead for rebrand rollout. Advising on brand channel rollout, social channel management, technical implementation, MarTech solutions, and content design.
- Develop the Alexforbes Digital Brand UI Kit to be implemented across 200+ online digital properties.
- Design the Brand and User Experience for the Group Website, www.alexforbes.com.
- Design the Brand and User Experience for the Alexforbes App.
Our Solution
A UX and UI Kit is a digital extension of the Brand Guide and the most effective way to manage the rollout of a brand across multiple channels, teams, and partners. It is the UX designer’s guide to designing interfaces for software, the social media designer’s base for creating content, the website guides, and the innovator’s framework for ensuring the brand is consistent throughout the innovation cycle.
A Digital UI Kit is a collection of design elements and guidelines that help to create a consistent and cohesive user interface across digital platforms such as websites and software applications. It typically includes typography, colour schemes, layout templates, and other design elements specific to a particular brand or organisation.
The Digital UX Guide, which is part of the Digital UI Kit, outlines the structural and design elements of web components, CSS guidelines, font weighting, colour matching, and template structures. It serves as guidelines for designers and developers to follow when creating digital interfaces. This guide extended the usual brand guide into the digital ecosystem more robustly, ensuring that the brand identity is consistent and recognisable across all digital touchpoints.
The Alexforbes Digital UI Kit became the internal brand guide to develop all digital content for web and application platforms. The kit became the foundational design infrastructure to the Adobe UX that IBM implemented on the Adobe Experience Platform, the internal SharePoint system platforms, the mobile application, and the customer-facing systems built on various code frameworks, including WordPress, .Net, AngularJS, and Laravel.
Digitlab created a three-page user journey document while pitching to redesign the Alexforbes website. IBM was placed in charge of the site development. However, DigitLab’s user journey shaped the look and functionality of the new website. We packaged assets into an Adobe XD file to make collaboration with IBM easier, providing icons and design guidelines to facilitate the reskinning.
As a mark of our authority on the new Alexforbes brand, we were requested to audit the Alexforbes websites to ensure their adherence to the UX and journeys we designed.
MarTech allows marketers to leverage technology to guide their efforts. Alexander Forbes was looking to use this rebrand to further engage with existing and potential clients through developing a MarTech stack.
This process involves engaging with the marketing and IT teams to forge a way forward that is both meaningful from a marketing perspective and structurally and functionally possible from an infrastructure perspective.
As experts in navigating this critical meeting point between two historically siloed teams, Digitlab was able to offer support in the rapid development of a MarTech Stack, which will be invaluable moving forward.
Digitlab helped the internal IT teams deliver on the vast development workload that a digital rebrand brings to online platforms. Our project management team, UX experts and developers worked alongside the Alexforbes Development team to guide and support various aspects of the launch.
UX Design Guidance
As the creators of the Digital UI Kit, Digitlab went on to design the Website UX for www.alexforbes.com and worked with IBM as they rolled the UX into Adobe Experience Manager for Alexforbes. Our team also provided web designs for multiple internal platforms and customer-facing applications, including the Alexforbes mobile application.
With the external website taken care of, our development team also applied the UI/UX kit to Alexforbes’s internal website. With development resources already maxed out internally, DigitLab sourced and assembled multiple teams of developers to run development projects critical to the rebrand’s successful rollout.
