TNM Smart App

  • ui/ux design
  • visual design
  • prototyping
  • graphic design

‍

( Overview )

Telekom Networks Malawi (TNM) has been one of the leading telecommunication service providers in Malawi since 1995. To help customers access services easily, TNM introduced the TNM Smart app — an app that allows their customers to manage their SIM card (GSM Operations) and use a mobile money wallet called Mpamba.

App Store
Google Play
Live website
Challenge

With time, the app needed to be refreshed in-order to simplify the user-journey, improve the app’s look and feel, and provide a structure to facilitate future updates.

Solution

Working closely with the software development and marketing teams, I focused on “Building for the user”, relying heavily on data from the marketing team (customer activity within the app) and personas to understand which products and services the customers used the most and how easy it was for them to achieve their goals.

My Role

Following my successful pitch, TNM brought me in to revamp their Smart App. As the only UI/UX designer for the project, I joined a team of four talented developers. We collaborated daily and worked along side other important teams within TNM. I provided relevant support until the completion and launch of the app.

My responsibilities included:

  • Collaborating with the marketing team to identify user patterns on the app
  • Facilitating workshops to assess user interaction and usability of the app
  • Creating Wireframes
  • Working on visual and interaction design
  • Creating clickable prototypes in Figma to easily test ideas
  • Creating supporting resources such as illustrations to be used on empty states and error screens

( creative process )

After reviewing customer activity data from the marketing team and drawing up personas, it was clear that the app has two groups of users: tech-ready users, who are in the age group of 18-35 and non-tech-ready people, aged 40-65.

While both groups are heavy users of internet bundles, the people who bring in more revenue are those who are not tech-ready. These are mainly people in the corporate space, purchasing internet bundles with large volumes and voice bundles for phone calls.

‍

‍

I had to create an interface that served both groups of users. My direction was to create an interface that struck a balance between exciting and corporate; using bright colors, correct language, modern UI design elements, imagery, and iconology.

Keeping in mind that the app will be used on both iOS and Android devices, the interface relies on a well defined design system and component library, ensuring that the app looks and feels the same on these two difference platforms while respecting iOS and Android best practices of design and development.

‍

‍

Simplified User-journey

One app, two uses

Since the app is used for both SIM management (GSM operations) and the Mpamba mobile money wallet, it was difficult for users to navigate through the app, considering the fact that the two modules are connected depending on the use case. I, therefore, needed a bulletproof solution that would work for all use cases.

As a way of easy the complexity of navigation, I split the two modules within the app: the SIM management page was made to be the main home screen for all logged-in users, while all mobile money features were moved away from the main home screen a separate one, specially dedicated to the Mpamba mobile money wallet.

Easy access

Borrowing from the arrangement items/products in isles of retail shops, I introduced quick links on the home screen and restructured the layout of products and services within the app to ensure that frequently used services/products were visible and accessible to the customer.

Use of the right language

The language used to describe an action, a flow, and feedback was refined to be clear and less technical to help users make fast and accurate decisions when using the app.

Improving the app’s look and feel

Standing on a well defined design system

Elements of the app come from a well defined design system, which include: colors, font, typography, guidelines on the usage of inputs, buttons, badges and other UI elements.

Custom illustrations were also created to be used to show empty and error states.

Theming

A good theme must match the user’s taste. I created a theme that strikes a balance between exciting and corporate, to match the two defined user groups of the app.

The theme is made up of bright colors, good typography, and spacing to provide a seamless feel.

Harnessing the power of the widget

The app makes use of widgets to reduce clutter and provide a consistent aesthetic within the app.

A widget can also contain a lot of data: headline, status tag, price and other UI elements that help to extend functionality.

Use of modern UI elements

I made use of modern UI styling with buttons, modals, badges and other UI elements to make the app’s look contemporary while respecting both iOS and android best practices for design and development.

‍

Impact

Following a well coordinated launch campaign, the app continues to receive positive reception from TNM customers. The number of new users continue to grow as people who use other networks are discovering the TNM Smart app.

742,976

New Smart app users

New users of the app after launch

481,248

App downloads

An increase in app downloads in both Google Play and App Store after launch

Working with Roosevelt on the TNM Smart App v6 was a game changer in shaping the user experience of our smart app. From simplifying navigation flows to creating a clean and engaging interface, his contributions significantly improved the overall user experience. We are grateful for his dedication, professionalism, and impact on this critical product.

Edmond Kachale
Senior Software development manager