Case Study: Digital Brand UX Guide

Alexforbes UX Design

The Challenge

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 developed the Alexforbes Digital Brand UI Kit, establishing a robust foundation for the brand’s digital identity. This foundation was then rolled out across nearly 200 online properties, ensuring a consistent and cohesive brand presence. In collaboration with IBM, we also created the design framework for the Alexforbes Group website, which IBM executed. Additionally, we crafted the user experience for both the Alexforbes website and mobile app, further enhancing the brand’s digital engagement.

Our Solution

Digital Brand UI Kit

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.

UX Design Application

Throughout the rebrand our team worked at various different levels to design and implement the UI kit across a multitude of applications. Here are a few examples of some of the website and mobile applications.