Design Concept: MTN Service Platform
Designing an online service platform for MTN Ghana Smartphone users
Objective Of This Concept: Enhancing the MTN service experience for smartphone users
MTN Ghana currently provides different internet services for its customers. They currently provide Internet Broadband, Fibre Brandband, Mobile Data and now they have a mobile 4G router where they provide 4G+ services called “TurboNet”.
Currently, for consumers to check their account balance and make payments for these services, they have to use a USSD service and this is done by dialing a shortcode (Usually, this is done by dialing “*” followed by some numbers and ended with the “#” on the numeric pad).
For users with Feature Phones, the use of USSD is convenient but some smartphone users, USSD doesn’t give an experience one would expect on a smartphone device.
Money Mobile is currently the only payment method for paying for MTN’s services when using USSD, which is limiting when other payment methods including Card and Bank Transfers are available.
For this concept, I designed a mobile app “Service Portal” where users could easily login, link their MTN services and perform services such as checking their account balance and make payments using card payments.
Initial Wireframe Design
In the beginning, I hardly used wireframes when working on concept designs. I found it more effective going straight Hi-Fi fidelity instead. But for most of my recent designs, I start out with an initial wireframe and then work my way to a Hi-Fi design.
(Not going to lie, I started wireframing initially but quickly moved on to Hi-Fi. But I do full wireframing for my case studies and actual projects 😎)
Hi-Fidelity Design
With the sign in feature, I utilized a “Fingerprint Sign In” feature alongside a regular sign in using the user’s MTN number and PIN number.
On the Sign In page, a user can sign in (if already registered at an MTN store) or register from that screen.
I also incorporated an onboarding experience where the user could link all their existing accounts or skip and add their accounts later. Accounts that a user could set up include TurboNet, Fibre Internet and MTN Mobile Data.
For this concept, I focused on the TurboNet account. When selected, the TurboNet account details including the Account number, Data Remaining and Renewal Date are shown. A user will have options for this account including:
- Renew Account
- Add New Account (If they have multiple TurboNet devices)
- Renewal Settings
- Load Voucher
- Freeze Account
If a user chooses to renew his or her account, the current subscription plan will be renewed. They can choose to pay with two methods: Mobile Money and Credit Card.
With the mobile money option, a user enters their PIN number for their mobile money account. In choosing the Card Payment, users can add their bank cards and save it on file for future use.
Prototype
This is currently a work in progress but you can test out the prototype here. I’m using Figma for the design and the prototype. Currently testing out Figma’s “Smart Animate” feature (which is pretty good). Here’s the link for the prototype which can be used on the web (can also be used on iPhone 8 Plus devices):
Prototype Link:
If you want to access the Figma file itself, I’m happy to share 🙂 (Oh, and there is a web component I was working on in that file as well. Might work on that later)
Figma File: https://www.figma.com/file/qqrnwGk2X1p1wmMN5ppM4p/MTN-Portal?node-id=58%3A1
