Digitizing Kenya's largest IoT gas distribution service

Welcome to the future of clean cooking! M-Gas, Kenya’s largest IoT gas distribution service, is revolutionizing how over 300,000 households in Nairobi and beyond access clean cooking gas. Offering a pay-as-you-go model, M-Gas provides a safe alternative to traditional fuels, empowering low-earning families with accessible and affordable energy.

In just six months, the Danish app agency Shortcut.io, with me as the lead designer, transformed the M-Gas experience on iOS and Android. Let’s dive into it!

The Process 🛠️

Every journey begins with laying out a solid plan; ours was no different! M-Gas had an app, but it was like an old, rusty stove—functional but not fabulous. So, we rolled up our sleeves and got to work.

First, we ensured the project had strong support from the C-suite. This involved deep product exploration, understanding customer needs, and aligning business goals with user pains. We crafted a project scope with clear objectives that promised maximum impact.

⬆️ Mapping out the journey: sitemap and feature prioritization based on business value and customer relief.

From wireframes to proof-of-concept, and finally, a polished product ⬇️

⬇️ Behold, the humble beginnings: early wireframes in all their glory.

The final product 📱

A foundation for future expansion 📈

Ta-da! The final product is not just an upgrade; it’s a game-changer. The new M-Gas app is sleek, user-friendly, and ready to scale new heights. With this solid foundation, M-Gas can now explore new markets and territories. And at Shortcut.io, we’re thrilled to be a continual part of this exciting journey.

🎉 Onboarding new users ⬆️

Dive in with custom 3D assets, a dynamic language selector, and seamless notification opt-in.

⬇️ Sign in with OTP verification 🔓

Easy, safe, and secure — just like it should be.

Unique branding opportunity with custom 3D assets

In Kenya’s competitive gas distribution market, standing out is key. To give M-Gas that extra edge, I created some crisp custom 3D assets. These not only expands their existing CVI possibilities but also give the product and its marketing efforts a vibrant visual boost.

The nerdy design details 🎨

Consistency is king! We developed an expansive design system to ensure the M-Gas app looked and felt great across all platforms. This system is also scalable, paving the way for future updates and feature additions. Check out a snippet of the design system we crafted for M-Gas ⬇️

Me, Myself, and I

If you got this far thank you and great job 👏🎉My name is Johan and I’m a Senior UX/UI designer at Shortcut.io. I had the pleasure of leading the design process for the new M-Gas app and crafting every bit of the UX & UI along the way. This project was not only a fantastic experience along side some great people, but also a chance for me to hone my 3D design skills. (If you’ve struggled with Blender, give Spline a try—it’s a game-changer! 🥰)

And remember, if you ever need top-tier designers or native app developers, hit up your friendly neighborhood app agency—Shortcut.io. Let’s create something amazing together!