Mukuru
Client
Mukuru
Services
Web Design
Wordpress Development
Plugin Development
SVG Animation
Date
October 2019 – Current
Explore
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
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.
