Case Study: mTransfers Website Redesign

Goal: To clearly communicate the value proposition of mTransfers

Before I delve into the thought process behind this design, I created an overview on Behance and some screens on Dribbble.


Overview

mTransfers is a social banking application that leverages your phone keyboard to provide financial services within the context of social media conversations. In other words, mTransfers enables bank and telco customers access services on all social media platforms without having to leave their current conversation on any of those platforms.


A few months ago, we put up a company corporate website showing our current products, one of which is mTransfers. In line with our mission to increase financial inclusion (directly or indirectly) by 2023, we have been working on our most recent solution called mTransfers. As a result of this, we decided to redesign the website to communicate our value proposition more effectively to our customers and partners.

This is the second major iteration for mTransfers.com since the launch of the product.

Why are we redesigning?

Solely, to communicate our value proposition to our potential clients, their customers and our partners.

By giving more information about:

  • How to use the solution;
  • Who can use the solution;
  • Where one can use the solution (ie. available platforms to use mTransfers)

The core goal of mTransfers is to provide them (ie. big consumer-facing companies who have digital services like banks, telcos etc.) a channel that is more intuitive to their customers that helps them improve their service experience and engage them more effectively.

The thought process behind the redesign

The world is fast evolving and the solution we had in mind when we launched the first major website has evolved as our expertise deepened. As a result of this, there is a need to communicate clearly to targeted viewers about the solution. We have explored different paths to get something that aligns with the goals of the redesign.

What’s new?

Besides communicating clearly to specific target viewers, there were a few major changes:

The home page

Unlike the old website, I decided to create diverse webpages for specific audience — thereby projecting different emotions behind the tone used.

In the new design, there are two Call To Action (CTA) where the primary CTA “Talk to us” is noticeable than the secondary CTA “Watch Demo”.


The first section of the homepage shows content that gives an overview of the solution directly targeted to potential partners and a CTA that signifies a form of partnership from us. It also shows the solution mockup design for the final user which gives our potential partners an idea of the mockup of the solution.

The next section gives more information about the solution and a testimony from one of our partners (demo testimony — in this design). Also the platforms on which the solution is available and the available features.

The footer section shows brief product ads created by Live partners (FYI, we are currently live as Fidelity flash-key and Zenith Qwerty banking), other copyright information and basic navigation links.

The bank page

Unlike our previous website, I decided to create a page that directly speaks to our partners about the solution. Showing credibility and trust with some of our current partners.


The demo page

This page, although similar to the old website, includes a gif where we see a typical user carrying out a live transaction.

Old site — How it works
New site — How mTransfers works page (with GIF)

This way, our viewers learn how to use mTransfers to carry out basic transactions on any social media platform, which in this case is WhatsApp.

Some designs I dumped…

Visual Styling


Tools used

Sketch tools: Red pen, Pencil, Eraser and Paper

Design tool: Sketch App

Prototyping tools: Sketch app and Principle for Mac

Handoff tool: Marvel App


Thanks for reading

You can send me a DM on Twitter to chat about design and tech.

Happy Holidays!