Case study 1

Website redesign

TPG Telecom

A post-merger website assembled under pressure, inconsistent, unbranded and with no design foundation to build from.

Role
Sole UX/UI Designer
Team
Digital Lead, Developers, Marketing, Product Managers
Timeline
Feb 2024 – Mar 2025
Platform
Drupal CMS

When TPG Telecom and Vodafone merged in 2020, the corporate website was assembled quickly. Two years later it showed. Branding was borrowed from Vodafone. Icons were inconsistent. The information architecture was unclear. Lead generation forms appeared differently across pages. There was no design system and no source of truth for the development team.


A full rebrand was already in discussion externally. The digital team had a new website to build. There was one designer.

Building the foundation first

The design system nobody asked for.
And everyone needed.

My first move was to make the case for a design system before any redesign work began. This was not part of the brief.


The Digital Lead approved it. I presented the case to the wider marketing and digital team, covering Atomic Design principles, UI foundation approach and WCAG accessibility considerations. The reasoning was straightforward: without a tokenised foundation, every design decision would be made in isolation and the rebrand already in progress externally would require reworking everything from scratch.


I built the system in sequence. UI foundations first with a WCAG-accessible colour palette, typography, spacing and grid. Then tokenisation. Then the icon strategy: Phosphor Icons as the base for system and utility icons, with bespoke TPG-specific product and value proposition icons designed from scratch.


Every component was built to Atomic Design principles within the hard constraints of Drupal CMS. When the marketing team pushed back on gradient card states during the design library presentation, I did not compromise to a lesser treatment. I removed the state styling entirely. A clean result was better than an inconsistent one.

UI foundation: WCAG-accessible colour palette and typography

Bespoke TPG product icons

Atomic Design structure

Redesigning the website

50+ pages, seven phased rollouts,
one designer.

With the system in place, the redesign covered the full site across seven phased rollouts across homepage, landing pages, solution and product pages, navigation and footer.


The mobile plans pages previously existed as three separate pages: enterprise, government and small business. My approach was to keep the header, bottom content and lead generation form consistent across all segments and use a tab system to separate the product offerings. It had not been done on the platform before. It went live.

Mobile plans: consolidated tab page

On the NBN product page, the General Manager pushed to include the service qualification field immediately. The business case was clear. Customers needed to confirm service availability before committing to an enquiry. I understood that and agreed. I implemented the field within the existing constraint and polished the visual treatment to sit consistently within the redesigned website. About a year later I designed the fuller solution. A dynamic result page that returned all qualifying services in a single view, grouped by product category.

Initial implementation
Final solution

Mobile plans: consolidated tab page

I added a recommended products section at the bottom of each product page. Previously a user who reached the end of a page had no pathway forward. The product cards gave prospective customers a reason to continue exploring rather than drop off.

Research nobody asked for. Insights that surprised
the room.

The wholesale section was a separate self-initiated project. After the AAPT acquisition, the merged TPG website had no wholesale presence. I spoke with four to five account managers, gathered what their customers actually needed and presented findings to the wider team. Some of the insights surprised the room. A business restructure reduced the output to a single landing page but the research and the initiative were entirely self-directed.

Wholesale landing page

Before
After

Homepage: before and after

Lead generation optimisation

Inconsistent forms. One seamless
lead experience.

The lead generation experience had been one of the most fragmented parts of the original site. I approached the optimisation in two rounds.


The first round made the form sticky at the bottom of product pages. A two-column layout with a call CTA on the left and the lead gen form on the right kept the lead pathway visible regardless of where the user was on the page.


The second round was structural. I removed fields confirmed by the customer management lead as unnecessary and reorganised the remaining fields logically. My preferred approach for the post-submission experience was a dynamic in-form confirmation. Salesforce could not pass the required data back. I kept the separate confirmation page, redesigned it substantially and rewrote the copy to clearly state that a sales team member would be in contact by replacing a blunt thank you with no follow-up context.


Neither the sticky form nor the call CTA was driven by prior analytics data. They were design decisions based on what was clearly absent. The connection to the conversion improvements was made retrospectively through GA4 after launch.

Before
After

Lead gen form: before and after

Outcome

Conversions grew. Even as traffic declined.

The metrics below reflect post-launch performance. Site traffic declined approximately 13% over the same period, a known factor in the broader business context. Conversions grew despite this.

+65%

Increase in average monthly leads

From 461 to 761

~50%

Growth in form submissions

From 187 to 280 per month

+95%

Improvement in visitor conversion rate

From 0.52% to 1.01%

+97%

Rise in engaged visitor conversion

From 2.60% to 5.12%

80%+

Reduction in campaign page design time

From three to four weeks to two days

Get in touch

Open to senior designer and product roles in Sydney.

Other work

Arup

Scenario planning tool

A specialist planning process running across disconnected tools, documents and regional teams.

Arup

Product validation

A product with significant investment behind it and no clear case to continue.