skip to Main Content

Mukuru

Client

Mukuru

Services

Web Design
Wordpress Development
Plugin Development
SVG Animation

Date

October 2019 – Current

01

Background

Digital Brand Redesign & Development

Mukuru approached Webworx for support and maintenance of existing websites and platforms initially. The engagement started with an audit of the existing websites and then the commencement of the UI / UX redesign process, which was undertaken by our design partner Humanise Studios. Webworx did the custom WordPress development and SVG animations, as well as built several other websites and platforms in the Mukuru portfolios of sites.

02

Insights & Challenges

Brand Consistency Through a Design System

Mukuru has many websites and platforms and brand and UI consistency across all of them has been a constant challenge. They were in need of a design system! Humanise undertook to develop a design system of digital assets that could be used throughout the various user interfaces and platforms. Webworx was then charged with developing these assets and rolling them out across the Mukuru.com website, the agent portal and the internal coms platform Mukuru Zoo.

Data-driven User Journeys

Understanding the Mukuru core product offering and users was at the heart of the project. User personas and  journeys helped to understand the needs of users, and cater for their needs and reduce pain points. The UI needed to make it easy and happy experience interacting with the Mukuru brand.

These resulted in the development of clean, focused user interfaces for the main mukuru.com website. Mobile was also very important, as well as self help and  customer service. Each country website content was also tailored to the needs of that particular user. UK users sending money back home was very different to someone in South Africa. The channels they use, the currencies and access to technology.

03

Implementation

Web Development

The UI/UX Design was signed off and ready to go into development. We started by developing a custom WordPress theme for the new Mukuru.com site. This needed to be clean and light-weight so we developed a theme from scratch. We then mapped out all the new UI components and used React JS to develop custom, reusable Gutenberg blocks that we packaged in a plugin we developed for Mukuru. We then built out all the pages using the developed blocks and used WPML and a custom IP switcher to serve up localized content to the difficult regions.

We also used SnapSVG to develop some custom on load and on scroll animations which was very time consuming but also a whole lot of fun.

Look & feel

A new clean digital look and feel for Mukuru

TYPOGRAPHY

Montserrat
Aa123

Montserrat
Aa123

COLOURS

#000
#E47E25
#5F5F5F
#D8D8D8
DIGITAL

Synerg

BRAND

Loyalty

PERFORMANCE

Improved

During this ongoing engagement with Mukuru, we have help achieve better consistency and synergy of the digital brand across all of the platforms. This has been achieved through the development of a digital brand language and design system that has been rolled out on all developed platforms.