AHMAD BILAL
← AHMAD BILAL / INDEX OTHER WORK · MOBIMATTER
CROE-COMMERCEMOBILE-FIRST

eSIM checkout conversion at MobiMatter

Improving the MobiMatter user journey across two pages, the landing page and the package detail page, for understanding, trust, and conversion.

Ahmad Bilal, Product Design Engineer & ResearcherProduct Designer · MobiMatter
ROLE
Product Designer
COMPANY
MobiMatter
TYPE
E-commerce · CRO
SCOPE
2 touchpoints
+10%more visitors finished checkout
2screens redesigned
MOBILEfirst redesign

What those numbers mean People were dropping out of the checkout before paying. I redesigned two screens, and 10% more of them finished. Measured in testing, not modelled.

FIG.01ENLARGE ↗ The redesigned MobiMatter: a clean, mobile-first landing page and a skimmable package card, built to lift conversion
FIG.01. The redesigned MobiMatter: a clean, mobile-first landing page and a skimmable package card, built to lift conversion. // click to enlarge

Summary

At MobiMatter, we wanted to improve the user journey for our customers. We found two main touchpoints that needed work: the landing page and the package detail page.

The landing page had a large drop-off. Users didn't understand the service, and the design didn't excite them. We fixed this by adding sections like "how it works," "why us," "testimonials," and "partner badges," and by revamping the visuals. We also improved search and the navigation structure to make the experience simpler.

On the second touchpoint, the package detail page didn't have the right content structure, which hurt retention and conversion. Once a user decided not to take an offer, they didn't know where to go next. We fixed this by improving the content and CTA structure and adding a "related offers" section to explore.

During testing and validation, we recorded a 10% conversion-rate improvement through the purchase journey. That was a real lift, and it showed the value of the work.

Overview

MobiMatter is an online re-seller and distributor of mobile telecom services, providing packages that are best-priced and tailored for user needs. The goal of this exercise was to improve two main touchpoints in the user journey: the landing page (entered from social media) and the package detail page before purchase.

FIG.02ENLARGE ↗ Whiteboarding the goals: improve CR, reduce bounce, build trust: and the content structure for both pages, against a competitor audit
FIG.02. Whiteboarding the goals: improve CR, reduce bounce, build trust: and the content structure for both pages, against a competitor audit. // click to enlarge

Understanding the existing system

Competitor research

I ran a quick competitor analysis (Airalo, Dent, e-sim.net) to understand the market and similar solutions: their offering, content structure, design language, UX alignment, and depth of features.

// COMPETITOR RESEARCH: Airalo, Dent, e-sim.net06 ↗

Evaluating the existing landing page

We need this page to provide information about our services, features, and mobile apps; users land here from social media to learn the value proposition. The goal is to get people interested, get them to trust the brand, and get them to a package they want to buy.

  • Unclear tabs functionality in the hero search area.
  • Multiple conversion goals on one page impacting conversion for all of them.
  • UX copy should be more user-friendly to help users learn and use the interface.
  • Design components inconsistent with the design-system conventions.
  • Header navigation should be simplified to improve site structure.
  • Introduce sections like "how it works," partners, and "why us" to convey value and credibility.
FIG.03ENLARGE ↗ The existing experience: a photo-heavy hero with several competing conversion goals on one page
FIG.03. The existing experience: a photo-heavy hero with several competing conversion goals on one page. // click to enlarge
FIG.04ENLARGE ↗ Heuristic evaluation: documenting issues with the existing pages and sketching first structural ideas
FIG.04. Heuristic evaluation: documenting issues with the existing pages and sketching first structural ideas. // click to enlarge

Evaluating the eSIM detail page

The user's mental model here is standard e-commerce. The user wants to know more about the product once interested, so we provide easily findable, relevant information to help them decide and purchase; the goal is to help users commit to an offer and start checkout.

  • Package title design needs to improve to attract users.
  • Card content and important package information should be skimmable, not heavily reliant on reading.
  • Introduce sections like "similar offers" or "popular offers" to help users explore.
  • Contextual search in the "works in" section to help users quickly find their desired location.
  • Secure-transaction and payment badges to increase trust and help users feel secure.
  • FAQs should be up-front, not hidden in an expandable component.
FIG.05ENLARGE ↗ Persona: Jon Muller, a traveler whose top priority is staying connected overseas but who can’t find clear eSIM info
FIG.05. Persona: Jon Muller, a traveler whose top priority is staying connected overseas but who can’t find clear eSIM info. // click to enlarge
FIG.06ENLARGE ↗ Customer journey: from spotting a MobiMatter post on social media through to activating the eSIM
FIG.06. Customer journey: from spotting a MobiMatter post on social media through to activating the eSIM. // click to enlarge
// EXISTING SYSTEM: eSIM detail & journey03 ↗

Designing the new system

Wireframes

With insight from competitor analysis and the evaluation of the existing interface, I ideated various ideas to find the best ones, then refined the wireframes and increased their fidelity.

FIG.07ENLARGE ↗ Low-fi wireframe sketches mapping the new landing & package pages: sections, hierarchy and CTAs
FIG.07. Low-fi wireframe sketches mapping the new landing & package pages: sections, hierarchy and CTAs. // click to enlarge

Interface design

I rebuilt the pages mobile-first and stripped the visual noise. I flattened the branding, tightened design consistency, and mixed real photography with vector illustration where each carried the message better.

FIG.08 Redesigned landing page
FIG.08. Landing: bold value prop, one clear search
FIG.09 Redesigned package detail page
FIG.09. Package: skimmable specs, trust badges, one Buy
FIG.10 Redesigned interface screen
FIG.10. New interface screen
FIG.11 Redesigned interface screen
FIG.11. New interface screen

The order here was research first, then interface. I mapped how buyers actually compared plans before touching a screen, which is the sequence I wrote about in Research → Product → Code. For the rest of how I work, see my research.