Optimising phone upgrades for Mobile Phones Direct

Optimising phone upgrades for Mobile Phones Direct

Designed a dedicated landing page to highlight the latest upgrade deals and benefits. Created an eligibility checker form for users to quickly verify upgrade options. Aimed to boost upgrade deal sales by improving visibility and user engagement.

Company

AO / Mobile Phones Direct

Role

UX Designer

Timeline

July 2024

Status

Live

Team

UX Designer, Dev, PM

Tools

Figma, UserZoom

Methods

Comp analysis, ideation, usability testing, UI design

Company

AO / Mobile Phones Direct

Role

UX Designer

Timeline

July 2024

Status

Live

Team

UX Designer, Dev, PM

Tools

Figma, UserZoom

Methods

Comp analysis, ideation, usability testing, UI design

The Mobile Phones Direct upgrade eligibility flow across five mobile screens on a pale grey background — an eligibility-check intro card, network and phone-number entry, an SMS verification step, and personal- and contact-detail forms.
The Mobile Phones Direct upgrade eligibility flow across five mobile screens on a pale grey background — an eligibility-check intro card, network and phone-number entry, an SMS verification step, and personal- and contact-detail forms.

01

01

The challenge

Upgrade sales for phones and SIMs were falling behind new contracts and SIM only deals. The upgrade category pages lacked engagement, and users often didn’t know if they were eligible. Stakeholders wanted to make upgrades a key focus, but the experience wasn’t driving conversions.

02

02

Research

Looking at four key competitors, a few insights stood out:

  • Each had a dedicated landing page for upgrade deals, making them easy to find.

  • Call to action buttons for upgrade eligibility were prominent and encouraged user interaction.

  • Most featured a simple eligibility checker form, though visually unpolished. This was an opportunity for us to improve both functionality and aesthetics.

1

1

Analyse competitors

2

2

Ideate different sized solutions

3

3

Validate ideas on UserZoom

4

4

Update designs based on feedback

5

5

Showcase to stakeholders

Competitor audit board comparing four rivals — Mobiles.co.uk, Affordable Mobiles, Carphone Warehouse and Fonehouse — with their product-listing, product-detail, eligibility-checker and checkout screens laid out side by side with annotations.

03

Testing

Before and after of the Mobile Phones Direct product page — the primary call-to-action changes from 'Buy Now' and 'Add to Basket' on the left to 'Upgrade Now' on the right.

I changed ‘Buy Now’ and ‘Add to Basket’ to ‘Upgrade Now’ for clearer intent.

90%+

preferred ‘Upgrade’ in the button (100 participants, UserZoom)

80%+

said they were more likely to complete their purchase with the updated wording

It feels clearer… it makes the process more straightforward.

The obvious solution was to add a link in the mega menu, but stakeholders felt it was already too crowded. Instead, I placed a prominent call to action on the upgrade deals category pages, ensuring users could easily find it at a crucial stage in their journey. I also adjusted the layout by moving reset filters to the left on desktop and adding a new element on mobile.

It helps me find out right away if I can upgrade or not.

The O2 upgrade deals listing page on desktop and mobile, with a new 'Time for an upgrade? Check Eligibility' entry point added to the dark filter bar above the deal grid.

04

The solution

To improve upgrade sales, I designed a dedicated landing page showcasing the latest upgrade deals and their benefits. I also created an eligibility checker form, allowing users to quickly verify their options. To drive engagement, I refined key call-to-action buttons, making it easier for users to navigate to upgrade deals and complete their purchase. This helped boost visibility, improve user experience, and increase upgrade conversions.

05

Failed designs

  • Peers found the use of network brand colours on the landing page distracting.

  • Testers felt misled by the form being on the landing page, as clicking the button revealed unexpected extra steps.

  • On mobile, the ‘Check Eligibility’ button placement was unclear and clashed with the filters.

  • Tried grouping four form steps into two to make the process feel quicker, but stakeholders found this misleading and preferred clearer progress indicators.

Three rejected directions for the upgrade landing page — the full desktop landing page using network brand colours, the mobile view with the Check Eligibility button clashing with the filters, and an FAQ section.

06

Final designs

  • Refined the network boxes for better consistency and page flow.

  • Changed the form button on the landing page to a link with helpful information, leading to a separate form page.

  • Improved the eligibility checker button on mobile and designed a new element specifically for mobile.

  • Enhanced the form’s progress indicators for better clarity and a smoother user experience.

Upgrade landing page — desktop and mobile

The finished Mobile Phones Direct upgrade landing page on desktop and mobile — a green hero, network-specific upgrade cards, a 'Why upgrade with us?' row, a phone deals carousel, an eligibility check-in section and an FAQ accordion.

Upgrade eligibility checker — desktop

The redesigned upgrade eligibility checker on desktop — a four-step form (Your number, Verify via SMS, Personal Details, Contact Details) shown in empty and completed states with a progress stepper, ending on a 'Congratulations!' eligible-for-upgrade screen.

Upgrade eligibility checker — mobile

The redesigned upgrade eligibility checker on mobile — the same four-step form in empty and completed states with step progress bars, ending on the 'Congratulations!' screen.

MESSAGE ME

© 2026 Adam Maulvi

MESSAGE ME

© 2026 Adam Maulvi

MESSAGE ME

© 2026 Adam Maulvi