Experian Insights

Projects Experian: Insights

Insights

Experian is a global leader in credit reporting and marketing services. I spent nearly two years designing software to help protect consumers and businesses from fraud and identity theft, working across two key products – PowerCurve Insights and Experian One.

The main project was taking BI Reporting – an outdated internal analytics tool that nobody particularly enjoyed using – and turning it into something modern and intuitive.

Eventually it got rebranded as Insights. The tool was buried in clunky navigation, full of static reports you couldn’t interact with, and used daily by strategy designers, analysts and data scientists who needed to get to information fast.

My role

I was on this project for the full two years I was at Experian. I ran user research, built prototypes, mapped journeys and worked closely with product and engineering throughout.

It wasn’t a quick fix – the scope covered navigation, report library, dashboard customisation, landing page, open report experience and contributions to the design system. The UX patterns I landed on for the report navigation ended up informing how the wider platform worked too.

User research Tree jack Affinity mapping Competitor analysis User flows Wireframes Interactive prototyping User testing Navigation design Dashboard design Data visualisation design B2B enterprise design Design system contribution

Research:

User testing and Tree jack task

As the design evolved and a navigation menu became necessary, I ran a tree jack exercise – asking users to organise and group links based on what they actually needed day to day.

It quickly became clear that nesting everything in the navigation wasn’t going to work.

Some users had over 50 folders with more than 100 reports each. Putting all of that in a nav would have broken it entirely.

Better to get users to a dedicated search area instead.

Research:

User testing

I built prototypes and put them in front of users – asking targeted questions and listening to what frustrated users about the existing tool. The findings weren’t subtle:

Critical

Empty folders with no visual indication

Folders looked full whether they had anything in them or not. Users would click in, wait for the page to load and get a “This folder is empty” message. Then navigate back and try again. Over and over.

"I find myself going around in an endless loop of empty folders that just greet me with a message saying that the folder is empty. If I knew which folders were empty then I would save so much time."
"One of the main issues with the current flow is that it isn't obvious which folders have reports in, so a user might click on a folder, the page loads, and you are greeted with a "This folder is empty" message, which means you need to navigate your way back to basically start over again."
Serious

No way to search

Users had to remember where a report lived and navigate to it manually every time. No search. No shortcuts. Just memory and a folder structure that gave nothing away.

Most people asked for a favourites feature so they could at least pin the reports they used constantly.

General

Reports you couldn’t do anything with

Everything was a static PDF. You couldn’t hover over a data point, filter by a date range or drill into a specific figure. For a tool built around data insight, that was a significant problem.

Research:

Journey flows

To frame the scale of the problem I mapped out the current navigation journey against a proposed new one.

Current flow

Click count:
Between 6-8+ clicks

Log into Experian One, land on the dashboard, open Insights, get presented with a folder structure that tells you nothing about what’s inside.

Click a folder. Wait. Empty. Go back. Try another one. Eventually find a report, open it, close it, repeat the whole thing to find the next one.

Proposed flow

Click count:
4 clicks

Log in, open Insights, land on a page that shows report groupings with reports visible underneath. No folders to click into. No dead ends. The folder concept was removed entirely.

Four clicks instead of eight doesn’t sound like much – but the real improvement was cutting out the loop of empty folders completely. Users could see where everything lived the moment they landed.

Key challenges:

Getting to a report took too long and too many wrong turns

Challenge

The folder structure was slow, confusing and gave users no way to tell what was worth clicking into.

Switching between reports meant going back to the library every time.

Solution

I removed the folder concept entirely and surfaced reports directly within their groupings.

Users could switch between reports in the same section in a click or two, and jump to other sections without losing their place.

Thumbnails gave a visual preview of each report so users could identify what they needed at a glance.

Key challenges:

No customisation or personalisation

Challenge

Reports were static and fixed.

Users couldn’t build dashboards, save the reports they used regularly or filter data to what actually mattered to them.

Solution

I designed a customisable dashboard where users could build and organise their own reports. Favouriting and saving gave quick access to the regulars.

Experian adopted Tableau separately – that was a tech decision, not mine – but it transformed reports from static PDFs into something users could actually interact with.

Key challenges:

Insights felt disconnected from Experian One

Challenge

The original tool felt bolted on rather than part of the platform. And with up to 100 categories possible per user, there was a real risk of the Experian One dashboard becoming unusable.

Solution

I looked at two options for integrating Insights into the dashboard.

One created a dedicated section to centralise everything. The other used additional paging after the app was selected. Once I found out users could have up to 100 categories, Option 2 was off the table. Option 1 kept things clean.

Option 1
Option 2

Phase 1 – Wireframes:

Report library

Rather than trying to fix the tree navigation, I replaced it.

An accordion-style component showed all reports openly within their groupings – no clicking required to see what was there. A tab at the top let users filter down to specific sections quickly.

Phase 1 – Wireframes:

Open report

Selecting a report opened it directly. Related reports in the same grouping sat in a scrollable panel on the left – one or two clicks to switch between them without reloading the entire library.

The accordion opened to show what was available in each section.

Final design:

Navigation

The tree jack results pointed clearly to two sections:

One for viewing and exploring, one for creating and scheduling. I called them Discover and Workspace.

I put Workspace at the top initially – seemed logical – but testing showed users spent most of their time viewing rather than creating, so Discover moved to the top.

Final design:

Landing page

As the product started gaining traction internally, BI Reporting got renamed to Insights. More memorable, more descriptive of what it actually did. A dedicated landing page gave it a proper home within Experian One rather than feeling like an afterthought.

Early reactions were good – users found it easy to set up, much easier to navigate than what came before, and they liked being able to save and favourite reports.

Phase 1 – Final design:

Report library

With Tableau in place, the library could finally take advantage of interactive reports rather than static images.

Thumbnails, tabs, filtering and favouriting gave users proper control over how they found and organised content.

Phase 1 results:

User testing

The users

I ran another round of testing once the Phase 1 designs were done. The feedback was pretty clear:

I like the layout of the reports and you can use the tabs, the graphical thumbnail. The engagement and UX has clearly been considered
Easy to use and understand. Layout is nicely designed, not complicated and easy to follow without by being trained
It’s a lot easier to navigate and I like the thumbnails - they make the reports very easy to identify
Much easier to use, well designed and intuitive - would give some of the other BI tools a run for their money!
Very easy to navigate and follow - anybody can use this

Users also flagged things for the next phase – filtering and sorting by date and customer type, the ability to manage their own reports rather than going through admin, more personalisation in the library.

All of that fed into the Phase 2 roadmap.

Phase 1 – Final design:

Open report

The scrollable panel on the left meant users could move between reports without constantly going back to the library.

Select a report, it loads in the main area. Switch to another in the same section – one click. The accordion kept it organised without hiding anything.

Phase 2:

Coming soon

Phase 2 built on everything Phase 1 established – adding permission-based profiles (Superuser, Edit and View-only), a community area for commenting and sharing, and scheduling within the report view.

Intuitive and easy to set up and create new reports
Users love the ability to 'Save' and 'Favourite' reports
Much easier to navigate than the old platform

Insights

Experian is a global leader in credit reporting and marketing services. I spent nearly two years designing software to help protect consumers and businesses from fraud and identity theft, working across two key products – PowerCurve Insights and Experian One.

The primary project was transforming BI Reporting, an outdated internal analytics tool, into a modern, intuitive platform – eventually rebranded as Insights.

The challenge was significant: a tool buried in clunky navigation, static reports and no customisation, used daily by strategy designers, analysts and data scientists who needed fast access to complex data.

My role

I was the UX/UI designer on the project for the full duration of my time at Experian – nearly two years. I conducted user research and studies to understand what users needed, turning findings into personas, user journeys and design solutions.

I worked closely with Product Management and Engineering teams throughout, sharing research findings and iterating on designs to ensure the solutions were both technically viable and genuinely useful.

The scope covered navigation redesign, report library, dashboard customisation, landing page, open report experience and design system contribution.

User research Tree jack Affinity mapping Competitor analysis User flows Wireframes Interactive prototyping User testing Navigation design Dashboard design Data visualisation design B2B enterprise design Design system contribution

Research:

User testing and Tree jack task

As the initial design evolved and a navigation menu became necessary, I ran a tree jack exercise with users – asking them to organise and group navigation links based on what they found most useful for their daily workflows. This helped identify common patterns and priorities, and directly informed the navigation structure.

A critical finding emerged early: given that some users had over 50 folders with more than 100 reports each, nesting everything within the navigation would overwhelm it entirely. The better solution was to guide users to a dedicated area where they could search for what they needed.

Research:

User testing

After designs were approved I built interactive prototypes and put them in front of users – asking targeted questions about specific areas of the interface and gathering feedback on what worked and what they’d change.

Key findings from testing the existing BI Reporting tool included:

Critical

Empty folders with no visual indication

The lack of a dynamic folder structure meant folders appeared full even when empty.

Users would click into a folder, wait for it to load, and be greeted with a “This folder is empty” message – then have to navigate back and start over. With no way of knowing which folders contained reports, users found themselves stuck in a loop.

"I find myself going around in an endless loop of empty folders that just greet me with a message saying that the folder is empty. If I knew which folders were empty then I would save so much time."
"One of the main issues with the current flow is that it isn't obvious which folders have reports in, so a user might click on a folder, the page loads, and you are greeted with a "This folder is empty" message, which means you need to navigate your way back to basically start over again."
Serious

No search functionality

Users had no way to search for reports. They relied entirely on memory to remember where a report was stored and navigate to it manually through the tree structure – slow and frustrating, particularly for those managing large numbers of reports.

Many users requested a favourites feature for quick access to reports they used regularly.

General

Static, non-interactive reports

Reports were static PDF visuals that couldn’t be edited or interacted with.

Users couldn’t hover over data points, filter by specific criteria or view exact figures within graphs – limiting their usefulness significantly.

Research:

Journey flows

To frame the scale of the problem I mapped out the current navigation journey against a proposed new one.

Current flow

Click count: Between 6-8+

Users sign into Experian One, land on the dashboard, select Insights and are presented with a folder structure that gives no indication of which folders contain reports.

They click a folder, wait for it to load, potentially hit an empty folder message, navigate back and start again.

If they find a report, they open it, close it and repeat the whole process to find the next one.

Proposed flow

Click count: 4

Users sign into Experian One, land on the dashboard, select Insights and are immediately presented with a homepage showing report groupings with reports visible underneath – no folders to click into, no empty dead ends.

The concept of hidden folders was removed entirely.

While the reduction from 6-8 clicks to 4 may not sound dramatic, the real gain was eliminating the frustration of cycling through empty folders entirely.

Users now had a clear picture of where everything lived from the moment they landed.

Key challenges:

Clunky, inefficient report navigation

Challenge

Reports were buried within a tree-structured folder list.

The process was slow, cumbersome and made it nearly impossible to switch between reports quickly.

Empty folders added confusion and wasted time.

Solution

I designed a new navigation system that removed the folder concept entirely, surfacing reports directly within their groupings.

Users could seamlessly switch between reports in the same section and easily explore other sections without navigating back to a separate library screen.

Thumbnails were introduced to give users a visual preview of each report for quicker identification.

Key challenges:

No customisation or personalisation

Challenge

Reports were static and fixed.

Users couldn’t build their own dashboards, filter data to their needs or save reports they used regularly.

Solution

I designed a fully customisable dashboard experience allowing users to build and organise their own reports based on how they actually worked.

Favouriting and saving reports gave users quick access to what they needed daily.

Experian’s adoption of Tableau (a separate technology decision) transformed the reports from static PDFs into interactive tools, allowing users to hover over data points and view exact figures.

Key challenges:

Insights needed to feel part of Experian One

Challenge

The original BI Reporting tool felt disconnected from the wider Experian One platform.

With the potential for up to 100 categories, there was also a real risk of overwhelming the Experian One dashboard.

Solution

I explored two options for integrating Insights into the Experian One dashboard.

Option 1 created a dedicated section on the dashboard to centralise all reports and categories.

Option 2 used additional paging after the application was selected. After discovering users could have up to 100 categories (which would have made Option 2 completely unusable) Option 1 was the clear choice, keeping the dashboard clean and manageable.

Option 1

Option 2

Phase 1 – Wireframes:

Report library

Rather than refining the existing tree navigation, I replaced it entirely with an accordion-style component that displayed all reports openly within their groupings.

This made it immediately clear which sections contained reports without requiring any clicking. A tab at the top of the page allowed users to filter down to specific sections quickly.

Phase 1 – Wireframes:

Open report

When a report was selected from the library it opened directly, with related reports in the same grouping displayed in a scrollable panel on the left.

Users could switch between reports in the same section in one or two clicks – no need to navigate back to the library and reload the entire page. The accordion panel opened to reveal available reports within each section.

Final design:

Navigation

After reviewing all tree jack findings, the navigation was divided into two clear sections:

Discover for viewing and exploring content, and Workspace for creating and scheduling.

Initially I placed Workspace at the top, but testing revealed that users’ primary use case was viewing rather than creating, so Discover was moved to the top to better reflect real usage patterns.

Final design:

Landing page

As the product gained traction internally, BI Reporting was renamed Insights – a name that better reflected its purpose of surfacing valuable, actionable data.

A dedicated landing page was designed for users to arrive at after logging in, giving the product its own identity within the Experian One ecosystem.

Early feedback on the new direction was encouraging – users found it intuitive and easy to set up, far easier to navigate than the old platform, and they responded positively to the ability to save and favourite reports.

Phase 1 – Final design:

Report library

With Tableau now powering the reports, the library design took full advantage of the shift from static PDFs to interactive tools.

Thumbnails gave users an instant visual preview of each report. Tabs, filtering and favouriting gave users control over how they navigated and organised their content.

Phase 1 results:

User testing

The users

After completing the Phase 1 designs I ran another round of user testing with interactive prototypes. The feedback was overwhelmingly positive:

I like the layout of the reports and you can use the tabs, the graphical thumbnail. The engagement and UX has clearly been considered
Easy to use and understand. Layout is nicely designed, not complicated and easy to follow without by being trained
It’s a lot easier to navigate and I like the thumbnails - they make the reports very easy to identify
Much easier to use, well designed and intuitive - would give some of the other BI tools a run for their money!
Very easy to navigate and follow - anybody can use this

Users also highlighted areas for future development – filtering and sorting by date, customer type and date ranges; the ability to remove reports from their own dashboards; and more personalisation options for the report library.

These fed directly into the Phase 2 roadmap.

Phase 1 – Final design:

Open report

The open report experience reduced the need to constantly navigate back and forth between the report library.

A scrollable panel housed reports within their sections, with the accordion opening to reveal available reports.

Selecting a report loaded it in the main area immediately – switching to another report in the same section took one or two clicks.

Phase 2:

Coming soon

Phase 2 built on the Phase 1 foundations, introducing further customisation, personalisation and community features including permission-based profiles – Superuser, Edit and View-only – and a community area for commenting, sharing and scheduling within the report view.

Intuitive and easy to set up and create new reports
Users love the ability to 'Save' and 'Favourite' reports
Much easier to navigate than the old platform

Gamma Portal Evolution

Projects Gamma: Portal evolution

Portal Evolution

Gamma is a leading provider of unified communications services in the UK. As the UK’s #1 SIP Trunks provider, their Portal was the central hub through which channel partners and businesses managed their products, services and orders – but it had grown into something unwieldy. 147 navigation links.

Order journeys requiring up to 88 clicks. No price transparency. No self-service. Users calling support to make even the smallest account changes.

I was brought in to redesign the Portal from the ground up – simplifying navigation, streamlining order journeys and giving users the tools to manage their own accounts without picking up the phone.

My role

I led the UX/UI design on Portal Evolution for the duration of my time at Gamma. I conducted user research, ran interviews, mapped journeys, built wireframes and prototypes and worked closely with product and engineering teams throughout.

The work covered navigation redesign, a new landing page, a self-serve My Products area, a full profile and account area, order journey redesign across all product types and content and terminology improvements across the entire platform.

The UX patterns I defined for the SIP Trunk order journey (the largest and most complex) were refined and rolled out across all order types on the platform.

User research User interviews Site mapping Affinity mapping Competitor analysis Journey mapping User flows Wireframing Visual design Prototyping Content design and terminology simplification Navigation design Self-serve UX B2B enterprise design

Research:

Site mapping

The first thing I did was build a full site map of the Portal – going through every single navigation link and making notes on what each page required the user to do. All 147 of them.

The exercise surfaced some immediate and recurring issues

Overview
54 pages involved searching - with inconsistent behaviour, no "no results" message and no guidance on what could be searched for
31 pages involved management tasks
11 pages involved creating orders  
9 pages involved bulk actions   
9 pages involved notifications   

Beyond the sheer volume, the platform had significant inconsistency problems – buttons labelled as Continue, Next and Proceed across different pages; spelling and grammar errors throughout; Download buttons appearing before a search had been performed; and unusual, inconsistent UX behaviour across the board.

It was clear that rather than having a dedicated page for every individual action, the priority was to consolidate – removing duplicates, merging where possible and replacing scattered functionality with global features.

Research:

User interviews: Creating a new order

To understand the ordering experience firsthand I interviewed users as they created new orders on the platform, observing their behaviour and gathering feedback at each step.

The SIP Trunk order journey was the focus – one of the most common and most complex flows on the platform.

Step 1:

Contact details

Every order started by requiring users to enter their full contact details from scratch – account selection, email, name, company name, phone and mobile numbers and business type. Every single time.

Serious
Users often entered incorrect information because they didn't understand what was being asked, particularly where a technical contact from a different company was involved.
Minor
Some users questioned why so much information was being collected, assuming it was a data capture exercise.

Step 2:

Product details

Users had to select a security level for their product from options that were heavily jargon-laden with no clear explanation of what each option included or what the cost difference was.

A mandatory confirmation checkbox was regularly missed because it had been pushed down the page as more content was added over time.

Serious
Multiple users admitted to adding a dummy broadband service specifically to qualify for free SIP Trunk Call Manager - a workaround that had become standard practice.
Minor
Users didn't understand the differences between Build Types and relied entirely on guidance from their account managers.

Step 3:

Build details

A warning message at the top of the page stated “It is vital that CPE information is correct” – but most users didn’t know what a SBC or IP-PBX was.

Critical
When users entered a Channel Count quantity and navigated back to the previous page, the value was automatically reset to 10.
Serious
Users regularly entered dummy IP addresses because they didn't have the real one available at the time of ordering.

Step 4:

Service configuration

Users set up fraud limits and call blocking preferences. Default fraud limits were considered too high by several users, and the format for entering multiple email addresses was unclear despite the field label referencing it.

Minor
Users were unsure about the purpose of Fax (T.38) but some enabled it anyway.

Step 5:

Call manager configuration

An optional upgrade step – but with no indication of what the upgrade would cost.

Critical
Many users chose not to add service add-ons, citing cost concerns - but with no pricing shown, they were making decisions blind.

Step 6:

Number selection

Users selected area codes and quantities for phone numbers, with options for consecutive or random ordering.

Minor
Many users didn't understand the meaning of "Incoming CLI rule." Users felt Consecutive should be selected by default.

Step 7:

Order complete

After completing all steps, the user accepted terms and conditions and submitted the order – which was then emailed to the accounts team to calculate costs and send an invoice back. Days later.

Research:

Journey mapping

After completing the user interviews I mapped the full current SIP Trunk order journey in detail – every click, every interaction, every optional step – and compared it against a proposed redesigned flow.

Current flow

Click count:
Between 52-88 clicks

In its simplest form the current journey required 52 clicks. With optional interactions it could reach 88.

Users entered the same information repeatedly, navigated blind through a folder structure with no price visibility and submitted orders that disappeared into an email queue for days.

Proposed flow

Click count:
Between 15-30 clicks

The redesigned flow brought the minimum down to 15 clicks.

Pre-populated profile data removed the need to re-enter contact details. Price transparency was built into the flow. Orders were processed in real time rather than sent to accounts.

The same refined UX patterns were identified, documented and rolled out across all order types on the platform.

Key challenges:

147 navigation links with no clear structure

Challenge

Users couldn’t find what they needed.

The navigation had grown organically over time into an unmanageable list of links with no logical grouping.

Solution

I restructured the entire navigation into two clear sections: My Products – where users could view, manage and self-serve their active products and services – and Create New – where users could place new orders.

147 links, two sections. Everything had a home.

Key challenges:

Fragmented, repetitive order journeys

Challenge

Users entered the same information from scratch every time they placed an order.

Journeys were long, jargon-heavy and offered no price transparency until days after submission.

Solution

I designed a profile area where users could pre-populate their details once, ready to be pulled into any order journey automatically.

I reduced and simplified the mandatory fields, removed jargon throughout the platform, introduced real-time price transparency via a receipt-style panel and eliminated the accounts email queue by processing orders directly.

Click count for the SIP Trunk journey dropped from 52-88 down to 15-30.

Key challenges:

No self-service capability

Challenge

Any change to a product, service or account – however small – required users to call or email support.

There was no way to manage anything independently.

Solution

I designed a My Products area giving users full visibility and control over their active services.

Users could upgrade, downgrade, toggle bolt-ons on and off, edit site details and manage equipment – all without contacting support.

Pricing was shown in real time for every change.

Ideation:

Landing page

The vision for the new Portal started with a landing page that gave users an immediate overview of their products, services, sites and locations on login.

The navigation was stripped back to just two areas – My Products and Create New – replacing the sprawling 147-link menu with something users could actually orientate themselves within.

One area for creating new orders
One area for managing current products and services

Wireframes and final designs:

My products

My products page

The screen was split into two panels – active services and sites on the left, with the right panel dynamically updating to show relevant details based on what was selected.

If nothing was selected, the right panel provided guidance prompting users to interact with the left.

Edit an active service

Selecting a specific service revealed its current level, location and any available upgrades or bolt-ons – all with pricing shown clearly.

Users could upgrade, downgrade or toggle bolt-ons on and off themselves, with the cost difference visible at a glance. No more waiting days for accounts to recalculate and respond.

Edit a site

Selecting a site allowed users to edit the address and contact numbers, view all active services at that location and toggle services on or off as needed.

Each site’s equipment was also manageable from the same screen.

Final designs:

Profile area

One of the most impactful changes to the order journey was the introduction of a dedicated profile area – a place for users to store their details once, so the platform could pre-populate them automatically whenever a new order was created.

Account overview

A centralised dashboard giving users a summary of their account – active products, recent orders and key account details at a glance.

Personal information

Users could store their name, email, phone and mobile numbers and company details here – the same information previously required from scratch at the start of every order journey.

Payment methods

Users could save and manage their preferred payment methods, removing the need to re-enter card or billing details with each transaction.

Orders overview

A full history of past and in-progress orders, giving users visibility of where each order was in the process without needing to contact support.

Notification settings

Users could control which communications they received and how – managing email and platform notifications based on their preferences.

Login and security

Password management, two-factor authentication settings and account security controls – all manageable without contacting support.

Final designs:

Create your order

Price transparency

One of the most consistent pieces of feedback across user interviews was the complete lack of pricing visibility during the ordering process. Users submitted orders without knowing what they’d cost – then waited days for accounts to come back with a figure.

I introduced a receipt-style panel that appeared as users built their order, showing the running cost in real time. Upsell and add-on opportunities were surfaced within the same panel, with savings shown clearly when users added complementary products.

Reduced jargon

The Portal was full of technical acronyms, inconsistent terminology and confusing labels that users – even experienced ones – struggled with.

I reviewed and rewrote the content across the entire platform getting policy sign-off, replacing jargon with plain language, standardising button labels, clarifying field descriptions and removing ambiguity throughout.

The goal was simple: if a user doesn’t know what something means, they can’t make a good decision.

Simplified order journeys

The profile area fed directly into the order flows – with details pre-populated from the user’s saved profile, the need to re-enter information on every order was eliminated.

Users who hadn’t yet set up a profile were given the option at the end of a form to save their entered details to their profile for next time.

For channel partners managing multiple customers, the same approach scaled naturally – users could simply select the relevant customer account and their details would populate accordingly.

The results

Navigation reduced from 147 links to 2 clear sections
Refined UX patterns rolled out across all order types on the platform
Real-time pricing replaced a days-long accounts email queue
SIP Trunk order journey reduced from 52-88 clicks to 15-30 clicks
Users could self-serve product changes, upgrades and account management without contacting support

Portal Evolution

Gamma is a leading provider of unified communications services in the UK. As the UK’s #1 SIP Trunks provider, their Portal was the central hub through which channel partners and businesses managed their products, services and orders – but it had grown into something unwieldy. 147 navigation links.

Order journeys requiring up to 88 clicks. No price transparency. No self-service. Users calling support to make even the smallest account changes.

I was brought in to redesign the Portal from the ground up – simplifying navigation, streamlining order journeys and giving users the tools to manage their own accounts without picking up the phone.

My role

I led the UX/UI design on Portal Evolution for the duration of my time at Gamma. I conducted user research, ran interviews, mapped journeys, built wireframes and prototypes and worked closely with product and engineering teams throughout.

The work covered navigation redesign, a new landing page, a self-serve My Products area, a full profile and account area, order journey redesign across all product types and content and terminology improvements across the entire platform.

The UX patterns I defined for the SIP Trunk order journey (the largest and most complex) were refined and rolled out across all order types on the platform.

User research User interviews Site mapping Affinity mapping Competitor analysis Journey mapping User flows Wireframing Visual design Prototyping Content design and terminology simplification Navigation design Self-serve UX B2B enterprise design

Research:

Site mapping

The first thing I did was build a full site map of the Portal – going through every single navigation link and making notes on what each page required the user to do. All 147 of them.

The exercise surfaced some immediate and recurring issues:

Overview
54 pages involved searching - with inconsistent behaviour, no "no results" message and no guidance on what could be searched for
31 pages involved management tasks
11 pages involved creating orders  
9 pages involved bulk actions   
9 pages involved notifications   

Beyond the sheer volume, the platform had significant inconsistency problems – buttons labelled as Continue, Next and Proceed across different pages; spelling and grammar errors throughout; Download buttons appearing before a search had been performed; and unusual, inconsistent UX behaviour across the board.

It was clear that rather than having a dedicated page for every individual action, the priority was to consolidate – removing duplicates, merging where possible and replacing scattered functionality with global features.

Research:

User interviews: Creating a new order

To understand the ordering experience firsthand I interviewed users as they created new orders on the platform, observing their behaviour and gathering feedback at each step.

The SIP Trunk order journey was the focus – one of the most common and most complex flows on the platform.

Step 1:

Contact details

Every order started by requiring users to enter their full contact details from scratch – account selection, email, name, company name, phone and mobile numbers and business type. Every single time.

Serious
Users often entered incorrect information because they didn't understand what was being asked, particularly where a technical contact from a different company was involved.
Minor
Some users questioned why so much information was being collected, assuming it was a data capture exercise.

Step 2:

Product details

Users had to select a security level for their product from options that were heavily jargon-laden with no clear explanation of what each option included or what the cost difference was.

A mandatory confirmation checkbox was regularly missed because it had been pushed down the page as more content was added over time.

Serious
Multiple users admitted to adding a dummy broadband service specifically to qualify for free SIP Trunk Call Manager - a workaround that had become standard practice.
Minor
Users didn't understand the differences between Build Types and relied entirely on guidance from their account managers.

Step 3:

Build details

A warning message at the top of the page stated “It is vital that CPE information is correct” – but most users didn’t know what a SBC or IP-PBX was.

Critical
When users entered a Channel Count quantity and navigated back to the previous page, the value was automatically reset to 10.
Serious
Users regularly entered dummy IP addresses because they didn't have the real one available at the time of ordering.

Step 4:

Service configuration

Users set up fraud limits and call blocking preferences. Default fraud limits were considered too high by several users, and the format for entering multiple email addresses was unclear despite the field label referencing it.

Minor
Users were unsure about the purpose of Fax (T.38) but some enabled it anyway.

Step 5:

Call manager configuration

An optional upgrade step – but with no indication of what the upgrade would cost.

Critical
Many users chose not to add service add-ons, citing cost concerns - but with no pricing shown, they were making decisions blind.

Step 6:

Number selection

Users selected area codes and quantities for phone numbers, with options for consecutive or random ordering.

Minor
Many users didn't understand the meaning of "Incoming CLI rule." Users felt Consecutive should be selected by default.

Step 7:

Order complete

After completing all steps, the user accepted terms and conditions and submitted the order – which was then emailed to the accounts team to calculate costs and send an invoice back. Days later.

Research:

Journey mapping

After completing the user interviews I mapped the full current SIP Trunk order journey in detail – every click, every interaction, every optional step – and compared it against a proposed redesigned flow.

Current flow

Click count: Between 52-88

In its simplest form the current journey required 52 clicks. With optional interactions it could reach 88.

Users entered the same information repeatedly, navigated blind through a folder structure with no price visibility and submitted orders that disappeared into an email queue for days.

Proposed flow

Click count: Between 15-30

The redesigned flow brought the minimum down to 15 clicks.

Pre-populated profile data removed the need to re-enter contact details. Price transparency was built into the flow. Orders were processed in real time rather than sent to accounts.

The same refined UX patterns were identified, documented and rolled out across all order types on the platform.

Key challenges:

147 navigation links with no clear structure

Challenge

Users couldn’t find what they needed.

The navigation had grown organically over time into an unmanageable list of links with no logical grouping.

Solution

I restructured the entire navigation into two clear sections: My Products – where users could view, manage and self-serve their active products and services – and Create New – where users could place new orders.

147 links, two sections. Everything had a home.

Key challenges:

Fragmented, repetitive order journeys

Challenge

Users entered the same information from scratch every time they placed an order.

Journeys were long, jargon-heavy and offered no price transparency until days after submission.

Solution

I designed a profile area where users could pre-populate their details once, ready to be pulled into any order journey automatically.

I reduced and simplified the mandatory fields, removed jargon throughout the platform, introduced real-time price transparency via a receipt-style panel and eliminated the accounts email queue by processing orders directly.

Click count for the SIP Trunk journey dropped from 52-88 down to 15-30.

Key challenges:

No self-service capability

Challenge

Any change to a product, service or account – however small – required users to call or email support.

There was no way to manage anything independently.

Solution

I designed a My Products area giving users full visibility and control over their active services.

Users could upgrade, downgrade, toggle bolt-ons on and off, edit site details and manage equipment – all without contacting support.

Pricing was shown in real time for every change.

Ideation:

Landing page

The vision for the new Portal started with a landing page that gave users an immediate overview of their products, services, sites and locations on login.

The navigation was stripped back to just two areas – My Products and Create New – replacing the sprawling 147-link menu with something users could actually orientate themselves within.

One area for creating new orders
One area for managing current products and services

Wireframes and final designs:

My products

The screen was split into two panels – active services and sites on the left, with the right panel dynamically updating to show relevant details based on what was selected.

If nothing was selected, the right panel provided guidance prompting users to interact with the left.

Edit an active service

Selecting a specific service revealed its current level, location and any available upgrades or bolt-ons – all with pricing shown clearly.

Users could upgrade, downgrade or toggle bolt-ons on and off themselves, with the cost difference visible at a glance. No more waiting days for accounts to recalculate and respond.

Edit a site

Selecting a site allowed users to edit the address and contact numbers, view all active services at that location and toggle services on or off as needed.

Each site’s equipment was also manageable from the same screen.

Final designs:

Profile area

One of the most impactful changes to the order journey was the introduction of a dedicated profile area – a place for users to store their details once, so the platform could pre-populate them automatically whenever a new order was created.

Account overview

A centralised dashboard giving users a summary of their account – active products, recent orders and key account details at a glance.

Personal information

Users could store their name, email, phone and mobile numbers and company details here – the same information previously required from scratch at the start of every order journey.

Payment methods

Users could save and manage their preferred payment methods, removing the need to re-enter card or billing details with each transaction.

Orders overview

A full history of past and in-progress orders, giving users visibility of where each order was in the process without needing to contact support.

Notification settings

Users could control which communications they received and how – managing email and platform notifications based on their preferences.

Login and security

Password management, two-factor authentication settings and account security controls – all manageable without contacting support.

Final designs:

Create your order

Price transparency

One of the most consistent pieces of feedback across user interviews was the complete lack of pricing visibility during the ordering process. Users submitted orders without knowing what they’d cost – then waited days for accounts to come back with a figure.

I introduced a receipt-style panel that appeared as users built their order, showing the running cost in real time. Upsell and add-on opportunities were surfaced within the same panel, with savings shown clearly when users added complementary products.

Reduced jargon

The Portal was full of technical acronyms, inconsistent terminology and confusing labels that users – even experienced ones – struggled with.

I reviewed and rewrote the content across the entire platform getting policy sign-off, replacing jargon with plain language, standardising button labels, clarifying field descriptions and removing ambiguity throughout.

The goal was simple: if a user doesn’t know what something means, they can’t make a good decision.

Simplified order journeys

The profile area fed directly into the order flows – with details pre-populated from the user’s saved profile, the need to re-enter information on every order was eliminated.

Users who hadn’t yet set up a profile were given the option at the end of a form to save their entered details to their profile for next time.

For channel partners managing multiple customers, the same approach scaled naturally – users could simply select the relevant customer account and their details would populate accordingly.

Outcomes:

The results

Navigation reduced from 147 links to 2 clear sections
Refined UX patterns rolled out across all order types on the platform
Real-time pricing replaced a days-long accounts email queue
SIP Trunk order journey reduced from 52-88 clicks to 15-30 clicks
Users could self-serve product changes, upgrades and account management without contacting support

HYPE Stock Availability

Projects HYPE: Stock availability

Stock availability and Website revamp

HYPE is a British streetwear brand known for bold prints and casual apparel with a serious following. When I joined, the e-commerce website was generating a significant volume of negative feedback – customers paying for items only to be told they were out of stock, and then hearing nothing about it afterwards. The Trustpilot rating sat at 3.7.

I was brought in to lead a full UX overhaul, and while not everything made it to launch during my time there, the two most impactful pieces did – and the Trustpilot rating climbed to 4.3.

My role

I was the sole designer on the project, responsible for the full process end to end – research, data analysis, affinity mapping, user flows, wireframes, UI design, prototyping and design system foundations. Everything was built in Adobe XD.

The scope covered stock availability, order communications, account area, navigation, product pages, login flows, a component library and the beginnings of a full design system.

User research Trustpilot and Zendesk data analysis Affinity mapping Competitive analysis Heatmap analysis User flows Wireframing UI design Prototyping Component library Design system foundations Checkout flow optimisation Email template design Conversion rate improvement Accessibility auditing Conversion rate improvement Data-driven design Before and after design analysis Pain point documentation

Research:

Data gathering

Before touching a wireframe I went straight to the data. HYPE had Trustpilot, Zendesk and Google Analytics – though Analytics wasn’t properly embedded and the data was unreliable, so Trustpilot and Zendesk did the heavy lifting.

I reviewed three months of feedback, focusing on 1 and 2 star reviews, and started grouping complaints into themes.

The volume was striking. Two issues dominated everything else:

38 complaints about zero communication after placing an order — no confirmation email, no dispatch notification, nothing
24 complaints about customers completing the full checkout, paying, and then being told the item was out of stock

Beyond those two, there were 13 complaints about product quality or incorrect sizing, and 6 about poor customer service.

The Trustpilot reviews told the story clearly:

I was able to purchase an item that was out of stock. Out of stock items should not be available to purchase
Not happy as paid for items then got message saying out of stock
3 separate orders and 3 times you have refunded me and cancelled my order because you can't fulfil it. All 3 orders were showing in stock at the time
Ordered bag advertised on website which accepted my order and took my money and then emailed me shortly after to say bag is out of stock and money would be refunded within a few days wasn’t happy this allowed me to place order and pay before telling me order couldn’t be processed
2 weeks has passed and I'm still waiting for my item. Not impressed at all
I had to chase for my order still not got my order after nearly a month of waiting
Placed an order and paid.

Received an email the following day saying my order had been cancelled and I had been refunded due to no stock availability

The order arrived with me before I'd even received a dispatch email so I didn't know when the order was coming, luckily I was in to receive it!
I still am yet to receive my item. Communication has been non existent until I pursued the case and again nearly two week later I am still awaiting my product. Very disappointing
Took my money for a top that was out of stock and then don't bother to tell you it's out of stock! 
No email to state order confirmation... only positive is my order arrived in time to be gifted
Product didn't arrive, chased no response to emails, when finally responded half the order was out of stock, CS claimed they have refunded via PayPal, they haven't!
I never got my order I was so disappointed I had paid for it then got a email to say not in stock
I have had the money taken from my account, clothes still haven’t arrived, emailed to ask where they are, still no reply!!!
Ordered my item, then chased this up to be told it will be sent out when they receive stock. This isn't acceptable
Ordered a bag for my son online only to be informed 2 days later that they don't have it. Maybe they should update the stock on the website so as not to disappoint customers
No email to state order confirmation.... contacted them and told I would receive a email once dispatched.., however I didn’t receive this either standard delivery is 2-3 days.. it did arrive within the time frame but the constant worry on if my order has been processed if they have dispatched yet is a issue I’ve never experienced a company to not send any email what so ever....: only positive is my order arrived in time to be gifted

Research:

Affinity mapping

I mapped the complaints into categories to find the patterns – grouping feedback from the three month window under common themes.

Two areas jumped out immediately as the priority: stock transparency and order communication. Everything else was secondary.

Ideation:

Journey flows

To understand the scale of the problem I mapped out the current checkout journey against a proposed new one – comparing them side by side to highlight where friction could be removed.

Current flow

Click count: 18+

A user selects an item, chooses a size from a dropdown that gives no indication of stock availability, adds to cart, proceeds through multiple checkout screens and enters their full details from scratch every single time – name, email, shipping address, billing address, card number, card name, expiry date, security code and mobile number.

After all of that, they find out the item is out of stock. They’ve already been charged.

Proposed flow

Click count: 4

Hover over an item to see available sizes. Select a size. Choose a saved payment method. Confirm order. Done.

For returning customers with saved details, that’s the entire journey.

Key challenges:

Customers buying items that were out of stock

Challenge

The existing size selector on the product page showed all sizes but gave no indication of availability.

Customers selected a size, added to cart, completed the entire checkout and only after hitting Complete Order were they told the item wasn’t available. They’d been charged.

The refund took 3–5 working days. It’s not hard to see why people were furious.

Solution

I designed a Quick Add feature for the product card. On hover, an overlay appeared showing which sizes were available for that item, with unavailable sizes shown with a strikethrough.

Customers could see stock status before clicking through to anything. If their size was out of stock, they could tap it to enter their email and be notified when it came back in.

Selecting an available size added it directly to the basket. For logged-in users with saved payment details, the checkout came down to 4 clicks.

Key challenges:

No communication after purchase

Challenge

Once an order was placed, customers heard nothing. No confirmation, no dispatch notification, no tracking. Some customers only received an email asking them to review a product that hadn’t even arrived yet – which understandably made people wonder if it was a scam.

When I dug into the email settings, I found there wasn’t any logic in place driving the communications at all. I also discovered that customers with personalised email addresses outside of Gmail, Outlook or Yahoo were getting bounced entirely — their emails were never sending.

I fixed the settings first, which was an immediate win, then designed a full communication system around it.

Solution

I created a series of email templates covering every stage of the order journey: order confirmation, dispatched, on route, delivered, cancelled, items received for refund and refund processed.

Each email included a visual order tracker showing where the customer was in the journey, what had been completed and what was next.

The tone was warm and friendly rather than generic. The dispatched email included a tracking number linking directly to the courier. The delivered email included a discount code and easy routes to customer support.

Prototype:

Quick add – product card

The card component was rebuilt from scratch with a hover state that hadn’t existed before. On hover, an overlay appeared at the bottom of the image showing available sizes. Unavailable sizes were visually crossed out.

The Quick Add feature delivered four clear benefits: full transparency around stock availability, a future-proof component built to scale, a leaner checkout experience and an end to customers purchasing items that were never available to buy.

Shows transparency and openness
Future-proof design
Creates a leaner checkout experience
Stops experience of customers buying unavailable stock

Designs:

Quick add – product page

After validating the Quick Add concept on the product card, the same logic was rolled out to the product page. The size selector was updated to show availability clearly, with the out of stock notification flow integrated.

An Add to Cart button remained for customers who wanted to browse first and decide later. Colour variant switching updated the page in real time.

Final designs:

Email communication

Seven email templates designed from scratch with a consistent visual language – order tracker, relevant information surfaced at the right stage of the journey, clear calls to action and a warm tone throughout. The dispatched email linked to courier tracking. The delivered email included a discount code and easy routes to customer support.

Design system:

HYPE DS

As the project progressed I built out the foundations of a component library in Adobe XD – HYPE DS – using Atomic Design methodology.

Atoms defined the building blocks: buttons, icons, typography, colours, shadows, spacing. These were combined into molecules – the card component being the most developed, with full anatomy documentation, redline specs and toggle states for every variant including Sale, Label, Icon, Offer Banner and Hover.

The goal was to give any designer or developer picking up the work a consistent, documented starting point – rather than recreating components from scratch each time. Designers could toggle specific sections of a component on and off to see exactly how the design would behave in context.

Proposed features:

Wider revamp work

Beyond what shipped, I designed and documented a significant body of work ready for implementation. This included accessibility improvements across the site – auditing fonts and running designs through accessibility scanners to identify and address any serious issues before they reached production.

Using the early component foundations from HYPE DS, I started with the elements that touched every single page first – redesigning the global navigation and footer to set a consistent baseline across the site. From there I worked on login and sign up flows, then tackled the wider areas: a full account area, product filtering, homepage revamp, mobile hamburger navigation, loading animation and HYPE Unlimited delivery subscription page.

The account area was comprehensive – covering dashboard, personal details, addresses, payment methods with support for Amazon Pay, PayPal, Apple Pay, Google Pay, Klarna and VeeLoop, order history, wishlist, gift cards, referral scheme, notifications and chat support.

Designs:

Global navigation redesign

Before and after

Designs:

Footer redesign

Before and after

Designs:

Account area

Order history

Order detail

Addresses

Designs:

Product page

Before designing the new product page, I analysed the existing design and documented the specific issues contributing to poor user experience and lost sales.

The pain points:

Stock availability shown too late

Selecting a size from the dropdown only told you it was unavailable after you'd selected it.

Multiple unnecessary clicks to discover something that should have been visible from the start.

Repeated content

The item name and description appeared three times on the same page. On mobile, all three were visible simultaneously on screen.

Pointless repetition that added noise without adding value.

Broken image thumbnails

To view the next product image, users had to scroll down to click a thumbnail, then scroll back up to see it. A left/right arrow would have solved this entirely.

Size Guide button out of place

Visually prominent but contextually odd, sitting awkwardly without any clear relationship to the surrounding elements.

Clutter and distraction

At the point a user had already chosen an item and navigated to its page, the design felt like it was actively trying to pull them away from buying it.

The Our Offer panel was the most obvious offender - irrelevant offers that didn't adapt based on who was viewing them, shown to everyone regardless of gender or age.

Wishlist buried at the bottom

A feature users actually wanted was hidden at the bottom of the page, out of the natural purchase flow.

Our Offer panel broken on scroll

When scrolling down the page the panel title clipped and cut off, breaking the layout. A visible bug that had gone unaddressed.

Quantity selector blending in

Hotjar recordings showed users regularly missing the quantity input because it visually blended into the surrounding buttons. People were buying single items when they wanted multiples.

Before and after

The redesign addressed each of these directly

Stock availability surfaced upfront via the Quick Add feature, layout decluttered, repeated content removed, wishlist repositioned, and the image navigation.

Outcomes:

The results

The two pieces that shipped – stock availability and order communications – addressed the two biggest sources of negative feedback directly. The impact was measurable.

Trustpilot rating increased from 3.7 to 4.3
Checkout click count reduced from 18 clicks to 4 for returning customers
Order complaints dropped significantly as customers started recieving timely, clear communication throughout their purchase journey
User experience HYPE: Stock availability

Stock availability and Website revamp

HYPE is a British streetwear brand known for bold prints and casual apparel with a serious following. When I joined, the e-commerce website was generating a significant volume of negative feedback – customers paying for items only to be told they were out of stock, and then hearing nothing about it afterwards. The Trustpilot rating sat at 3.7.

I was brought in to lead a full UX overhaul, and while not everything made it to launch during my time there, the two most impactful pieces did – and the Trustpilot rating climbed to 4.3.

My role

I was the sole designer on the project, responsible for the full process end to end – research, data analysis, affinity mapping, user flows, wireframes, UI design, prototyping and design system foundations. Everything was built in Adobe XD.

The scope covered stock availability, order communications, account area, navigation, product pages, login flows, a component library and the beginnings of a full design system.

User research Trustpilot and Zendesk data analysis Affinity mapping Competitive analysis Heatmap analysis User flows Wireframing UI design Prototyping Component library Design system foundations Checkout flow optimisation Email template design Conversion rate improvement Accessibility auditing Conversion rate improvement Data-driven design Before and after design analysis Pain point documentation

Research:

Data gathering

Before touching a wireframe I went straight to the data. HYPE had Trustpilot, Zendesk and Google Analytics – though Analytics wasn’t properly embedded and the data was unreliable, so Trustpilot and Zendesk did the heavy lifting.

I reviewed three months of feedback, focusing on 1 and 2 star reviews, and started grouping complaints into themes.

The volume was striking. Two issues dominated everything else:

38 complaints about zero communication after placing an order - no confirmation email, no dispatch notification, nothing
24 complaints about customers completing the full checkout, paying, and then being told the item was out of stock

Beyond those two, there were 13 complaints about product quality or incorrect sizing, and 6 about poor customer service.

The Trustpilot reviews told the story clearly:

I was able to purchase an item that was out of stock. Out of stock items should not be available to purchase
Not happy as paid for items then got message saying out of stock
3 separate orders and 3 times you have refunded me and cancelled my order because you can't fulfil it. All 3 orders were showing in stock at the time
Ordered bag advertised on website which accepted my order and took my money and then emailed me shortly after to say bag is out of stock and money would be refunded within a few days wasn’t happy this allowed me to place order and pay before telling me order couldn’t be processed
2 weeks has passed and I'm still waiting for my item. Not impressed at all
I had to chase for my order still not got my order after nearly a month of waiting
Placed an order and paid.

Received an email the following day saying my order had been cancelled and I had been refunded due to no stock availability

The order arrived with me before I'd even received a dispatch email so I didn't know when the order was coming, luckily I was in to receive it!
I still am yet to receive my item. Communication has been non existent until I pursued the case and again nearly two week later I am still awaiting my product. Very disappointing
Took my money for a top that was out of stock and then don't bother to tell you it's out of stock! 
No email to state order confirmation... only positive is my order arrived in time to be gifted
Product didn't arrive, chased no response to emails, when finally responded half the order was out of stock, CS claimed they have refunded via PayPal, they haven't!
I never got my order I was so disappointed I had paid for it then got a email to say not in stock
I have had the money taken from my account, clothes still haven’t arrived, emailed to ask where they are, still no reply!!!
Ordered my item, then chased this up to be told it will be sent out when they receive stock. This isn't acceptable
Ordered a bag for my son online only to be informed 2 days later that they don't have it. Maybe they should update the stock on the website so as not to disappoint customers
No email to state order confirmation.... contacted them and told I would receive a email once dispatched.., however I didn’t receive this either standard delivery is 2-3 days.. it did arrive within the time frame but the constant worry on if my order has been processed if they have dispatched yet is a issue I’ve never experienced a company to not send any email what so ever....: only positive is my order arrived in time to be gifted

Research:

Affinity mapping

I mapped the complaints into categories to find the patterns – grouping feedback from the three month window under common themes.

Two areas jumped out immediately as the priority: stock transparency and order communication. Everything else was secondary.

Ideation:

Journey flows

To understand the scale of the problem I mapped out the current checkout journey against a proposed new one – comparing them side by side to highlight where friction could be removed.

Current flow – Click count: 18+

A user selects an item, chooses a size from a dropdown that gives no indication of stock availability, adds to cart, proceeds through multiple checkout screens and enters their full details from scratch every single time – name, email, shipping address, billing address, card number, card name, expiry date, security code and mobile number.

After all of that, they find out the item is out of stock. They’ve already been charged.

Proposed flow – Click count: 4

Hover over an item to see available sizes. Select a size. Choose a saved payment method. Confirm order. Done.

For returning customers with saved details, that’s the entire journey.

Key challenges:

Customers buying items that were out of stock

Challenge

The existing size selector on the product page showed all sizes but gave no indication of availability.

Customers selected a size, added to cart, completed the entire checkout and only after hitting Complete Order were they told the item wasn’t available. They’d been charged.

The refund took 3–5 working days. It’s not hard to see why people were furious.

Solution

I designed a Quick Add feature for the product card. On hover, an overlay appeared showing which sizes were available for that item, with unavailable sizes shown with a strikethrough.

Customers could see stock status before clicking through to anything. If their size was out of stock, they could tap it to enter their email and be notified when it came back in.

Selecting an available size added it directly to the basket. For logged-in users with saved payment details, the checkout came down to 4 clicks.

Key challenges:

No communication after purchase

Challenge

Once an order was placed, customers heard nothing. No confirmation, no dispatch notification, no tracking. Some customers only received an email asking them to review a product that hadn’t even arrived yet – which understandably made people wonder if it was a scam.

When I dug into the email settings, I found there wasn’t any logic in place driving the communications at all. I also discovered that customers with personalised email addresses outside of Gmail, Outlook or Yahoo were getting bounced entirely – their emails were never sending.

I fixed the settings first, which was an immediate win, then designed a full communication system around it.

Solution

I created a series of email templates covering every stage of the order journey: order confirmation, dispatched, on route, delivered, cancelled, items received for refund and refund processed.

Each email included a visual order tracker showing where the customer was in the journey, what had been completed and what was next.

The tone was warm and friendly rather than generic. The dispatched email included a tracking number linking directly to the courier. The delivered email included a discount code and easy routes to customer support.

Key challenges:

Quick add – product card

The card component was rebuilt from scratch with a hover state that hadn’t existed before. On hover, an overlay appeared at the bottom of the image showing available sizes. Unavailable sizes were visually crossed out.

The Quick Add feature delivered four clear benefits: full transparency around stock availability, a future-proof component built to scale, a leaner checkout experience and an end to customers purchasing items that were never available to buy.

Shows transparency and openness
Future-proof design
Creates a leaner checkout experience
Stops experience of customers buying unavailable stock

Designs:

Quick add – product page

After validating the Quick Add concept on the product card, the same logic was rolled out to the product page. The size selector was updated to show availability clearly, with the out of stock notification flow integrated.

An Add to Cart button remained for customers who wanted to browse first and decide later. Colour variant switching updated the page in real time.

Final designs:

Email communication

Seven email templates designed from scratch with a consistent visual language – order tracker, relevant information surfaced at the right stage of the journey, clear calls to action and a warm tone throughout. The dispatched email linked to courier tracking. The delivered email included a discount code and easy routes to customer support.

Design system:

HYPE DS

As the project progressed I built out the foundations of a component library in Adobe XD – HYPE DS – using Atomic Design methodology.

Atoms defined the building blocks: buttons, icons, typography, colours, shadows, spacing. These were combined into molecules – the card component being the most developed, with full anatomy documentation, redline specs and toggle states for every variant including Sale, Label, Icon, Offer Banner and Hover.

The goal was to give any designer or developer picking up the work a consistent, documented starting point – rather than recreating components from scratch each time. Designers could toggle specific sections of a component on and off to see exactly how the design would behave in context.

Proposed features:

Wider revamp work

Beyond what shipped, I designed and documented a significant body of work ready for implementation. This included accessibility improvements across the site – auditing fonts and running designs through accessibility scanners to identify and address any serious issues before they reached production.

Using the early component foundations from HYPE DS, I started with the elements that touched every single page first – redesigning the global navigation and footer to set a consistent baseline across the site. From there I worked on login and sign up flows, then tackled the wider areas: a full account area, product filtering, homepage revamp, mobile hamburger navigation, loading animation and HYPE Unlimited delivery subscription page.

The account area was comprehensive – covering dashboard, personal details, addresses, payment methods with support for Amazon Pay, PayPal, Apple Pay, Google Pay, Klarna and VeeLoop, order history, wishlist, gift cards, referral scheme, notifications and chat support.

Designs:

Global navigation redesign

Before and after

Designs:

Footer redesign

Before and after

Designs:

Account area

Order history

Order detail

Addresses

Designs:

Product page

Before designing the new product page, I analysed the existing design and documented the specific issues contributing to poor user experience and lost sales.

The pain points:

Stock availability shown too late

Selecting a size from the dropdown only told you it was unavailable after you'd selected it.

Multiple unnecessary clicks to discover something that should have been visible from the start.

Clutter and distraction

At the point a user had already chosen an item and navigated to its page, the design felt like it was actively trying to pull them away from buying it.

The Our Offer panel was the most obvious offender - irrelevant offers that didn't adapt based on who was viewing them, shown to everyone regardless of gender or age.

Repeated content

The item name and description appeared three times on the same page. On mobile, all three were visible simultaneously on screen.

Pointless repetition that added noise without adding value.

Wishlist buried at the bottom

A feature users actually wanted was hidden at the bottom of the page, out of the natural purchase flow.

Broken image thumbnails

To view the next product image, users had to scroll down to click a thumbnail, then scroll back up to see it. A left/right arrow would have solved this entirely.

Our Offer panel broken on scroll

When scrolling down the page the panel title clipped and cut off, breaking the layout. A visible bug that had gone unaddressed.

Size Guide button out of place

Visually prominent but contextually odd, sitting awkwardly without any clear relationship to the surrounding elements.

Quantity selector blending in

Hotjar recordings showed users regularly missing the quantity input because it visually blended into the surrounding buttons. People were buying single items when they wanted multiples.

Before and after

The redesign addressed each of these directly

Stock availability surfaced upfront via the Quick Add feature, layout decluttered, repeated content removed, wishlist repositioned, and the image navigation.

Outcomes:

The results

The two pieces that shipped – stock availability and order communications – addressed the two biggest sources of negative feedback directly. The impact was measurable.

Trustpilot rating increased from 3.7 to 4.3
Checkout click count reduced from 18 clicks to 4 for returning customers
Order complaints dropped significantly as customers started recieving timely, clear communication throughout their purchase journey

Hack24 Byte Ya Matez

Projects Hack24: Byte ya matez

Byte ya matez

Hack24 is a 24-hour coding competition run by Tech Nottingham, based in Nottingham city centre.

Teams of up to four people pitch ideas and build them into something real – all within a single overnight sprint. While I was at UNiDAYS, our team entered. I was the interface designer. Nobody really slept.

My role

Our team consisted of developers and API specialists, with me handling all the interface design and contributing to the concept.

The brief we chose was set by Esendex – simple in theory, ambitious in practice. I designed the full UI, built the loading animation myself, and created the interaction mechanics that brought the concept to life visually – all within 24 hours.

Concept development User interface design Interaction design Motion design Prototyping NFC interaction design Real-time data visualisation

The brief:

Esendex challenge

The aim of the brief was simple:

“Make communication (and the world) better!”

Bonus points were on offer for teams that integrated Esendex products. We used the Esendex Multi-channel API, which let users interact with each other via their mobile phones.

Paired with a mapping API, it gave us everything we needed to build something genuinely fun.

The concept:

Zombies vs Humans

We built Byte Ya Matez – a real-world game of tag played across the city using your phone. Players are assigned to one of two teams: Zombies or Humans.

The aim is simple – chase and tag members of the opposing team before they get you. When one team runs out of players, the game restarts.

Scattered across the city map are Power zones, Safe zones and Dead zones – each shifting the balance of the game and giving teams a reason to coordinate, move and communicate.

Tagging another player was done by tapping your phone against theirs with NFC (Near Field Communication) active – a neat physical interaction that made the digital game feel genuinely real-world.

Key challenges:

Designing a full app UI in 24 hours

Challenge

There’s no time for iteration in a hackathon.

Every design decision had to be made quickly, confidently and with the end user in mind from the start.

Solution

I kept the interface focused and purposeful. Every screen had one job.

The visual language was bold and immediately readable – something that needed to work outdoors, on the move, under pressure.

Key challenges:

Making the game feel alive

Challenge

A map with dots on it isn’t exciting.

The interface needed to communicate urgency, momentum and personality – especially given the Zombies vs Humans theme.

Solution

I leaned into the concept visually. The loading animation featured a zombie crawling across the bottom of the screen while the app loaded – immediately setting the tone.

Status indicators showed live player counts for each team, updating as players switched sides. Notifications kept players informed about what was happening around them in real time.

Key challenges:

Communicating NFC tagging visually

Challenge

The act of tagging another player via NFC needed a satisfying visual payoff – otherwise the mechanic would feel flat.

Solution

I designed the tagging interaction screen to give clear, immediate feedback when a player had been caught – introducing a little bit of struggle for the player trying to escape making the moment feel impactful rather than just a tap on a phone.

User interface:

Loading animation…

Rather than a generic spinner, I built a custom loading animation – a zombie crawling across the bottom of the screen while the app content loads.

It set the tone immediately and got a reaction from everyone who saw it.

Zombie loading bar example

User interface:

Status bar

Live counters showed the current number of Humans and Zombies in play, updating in real time as players were tagged and switched teams.

At a glance, players could see how the game was going.

User interface:

Notifications

The game kept players informed throughout – alerts about nearby players, zone updates and team status changes.

No game is complete without a well-timed notification telling you a zombie is around the corner.

User interface Hack24: Byte ya matez

Byte ya matez

Hack24 is a 24-hour coding competition based in Nottingham City centre.

Teams of up to four people compete for some awesome prizes by starting with innovative ideas and building them into new things.

My role

Nottingham Hack24 is an annual student hackathon organised by Tech Nottingham and focuses on tech innovation, coding, and collaboration.

The event is typically a 24-25 hour overnight hackathon open to students. encouraging projects in software, hardware, games, websites, and more, with no prior experience required.

Whilst working at UNiDAYS our team decided to partake in the event, I was the interface designer of the project.

User research Brand design Whiteboarding User flows Wireframes User interface Prototyping

Hack24:

Esendex challenge

TBC

Teams received bonus points for using Esendex products.

We used the ‘Esendex Multi-channel API’. This allowed users to interact with each other using their mobile phones.

When paired with the mapping API, this allowed the team to create a virtual game of ‘tag’ that could be used with friends across the city.

Esendex challenge:

Zombies vs Humans

The aim of the game is simple; Chase and Tag your friends around your area. You get allocated a team; Zombies or Humans. As soon as there are no more players for one team left, then the game restarts.

There are ‘Power’, ‘Safe’ and ‘Dead’ zones where you can call out to your friends to help each team to take advantage and swing the pendulum of your side to win the game.

You tag a friend by tapping your phone on the other players device, making sure NFC (Near Field Communication) is active.

User interface:

Loading animation…

I decided to create a fun twist on the loader for the app. In the true spirit of zombies, the body would crawl across the bottom of the screen whilst the page loads.

Zombie loading bar example

User interface:

Status bar

These are the status indicators showing the number of players currently on each team. As players swap between groups; the Humans or Zombies counters change.

User interface:

Notifications

No game is complete without relevant notifications explaining the situation of yourself and friends within your area.

Impero Remote Manager

Projects Impero Solutions: Remote Manager and Rebrand

Remote Manager

Impero Solutions is a Loughborough-based software company operating across two distinct sectors – Education and Workplace. Their products covered everything from classroom management and network admin to online safety and remote device control. When I joined, the brand needed a complete overhaul. Everything – the logo system, colour palettes, typography, tone of voice, print materials, digital communications, exhibition stands and the website – needed to be rebuilt from scratch and made consistent across two very different audiences.

Remote Manager was one of the key products within the suite, and one I had the most direct involvement in across UI, icon design and product branding.

My role

I led the full rebrand, which covered both the Education and Workplace sectors across the entire product suite – Education Pro, Workplace Pro, Remote Manager and a range of additional modules. This included defining the visual identity from the ground up: the corporate logo system, sector logos, product and module logos, colour palettes, typography, tone of voice, illustration style and graphic device. I then applied that identity across every touchpoint – brochures, datasheets, case studies, stationery, business cards, PowerPoint templates, exhibition stands and the website.

I also produced the Impero Brand Guidelines documentation, a 34-page reference document that gave the whole team – and resellers – a clear, consistent framework to work from.

Brand identity design Logo design Icon design Typography Colour theory Print design Exhibition design Brand guidelines documentation UI design A/B testing Geolocation-based personalisation Reseller brand management Brochure and collateral design

Key challenges:

One brand, two very different audiences

Challenge

Impero’s Education and Workplace sectors needed to feel like part of the same family while still being visually distinct enough to speak to very different customers – schools and colleges on one side, office-based organisations and public sector bodies on the other.

Solution

I built a tiered brand system with a shared corporate identity at the top, and sector-specific palettes, illustrations and tone of voice guidelines branching beneath it.

Education used Saffron Yellow and Sapling Green – bright, youthful and optimistic.

Workplace used Electric Blue and Spiced Magenta – cooler, more mature. Both sat under the same Carbon Grey corporate identity, keeping the family feeling intact.

Key challenges:

A product suite that kept growing

Challenge

Impero had multiple products and modules with more planned – each needing its own logo, icon, splash screen and collateral.

The system needed to scale without breaking.

Solution

I designed a modular logo system with clear rules for creating new product and module logos, including exact specifications for type size, spacing, colour and construction.

Any new module could be added to the system consistently without needing to start from scratch.

Key challenges:

Resellers needed to co-brand without breaking the identity

Challenge

Third-party resellers would be adding their own logos to Impero’s brochures, datasheets and case studies – which risked the brand looking inconsistent or cluttered in the wild.

Solution

I defined clear reseller guidelines within the brand document, specifying exactly where partner logos should sit, at what size, with what exclusion zone, and requiring approval before anything went to print.

Key challenges:

Exhibition design at scale

Challenge

Impero attended events annually and needed stands that could range from a couple of metres wide to 15 metres wide by 10 metres high – a significant leap in complexity from standard print work.

Solution

The graphic device I created – a flowing, abstract pattern built from the Impero logo’s circle icon – was designed to scale confidently at any size, bleeding off edges and working just as well at 15 metres as it did on an A4 brochure.

Designs:

The brand system

The Impero brand was built across four levels: the corporate logo, two sector logos (Education and Workplace), product logos (Education Pro and Workplace Pro) and an expandable range of module logos including Remote Manager. Each level had its own usage rules, colour combinations, minimum sizes and exclusion zones – all documented in the brand guidelines.

The corporate colour palette centred on Carbon Grey as the dominant tone, balanced with Saffron Yellow (Education) and Electric Blue (Workplace) in equal measure to avoid bias towards either sector. Zinc Grey supported the suite across all touchpoints.

Typography was set in Gandhi Sans – a clean, modern sans-serif – with clear rules around headers, body copy, sentence case and product naming conventions.

User interface:

Remote Manager app

Remote Manager was Impero’s network admin and classroom management module – a blend of online safety, remote device control and network monitoring tools.

I handled the UI design, icon design and product branding for Remote Manager, designing the application icon and the suite of in-app icons from scratch. Each icon used Impero’s three corporate colours to give the interface a modern, consistent feel while remaining simple and instantly readable at small sizes.

Application icon

Icon design

The icons that ran through the app were simple, yet detailed. Each icon had three corporate colours; this helped give the app a modern facelift.

Print:

Print and Digital communications

Remote Manager was Impero’s network admin and classroom management module – a blend of online safety, remote device control and network monitoring tools.

I handled the UI design, icon design and product branding for Remote Manager, designing the application icon and the suite of in-app icons from scratch. Each icon used Impero’s three corporate colours to give the interface a modern, consistent feel while remaining simple and instantly readable at small sizes.

Website:

imperosoftware.com

The last piece of the rebrand to go live was the Impero website. During development, the site was A/B tested to determine which layout best drove user engagement before the final version went live.

The site also used geolocation to serve region-specific content – users in different markets saw tailored visual elements and messaging relevant to their location.

User interface Impero Solutions: Remote Manager

Remote Manager

Impero Solutions is a UK-based software company specialising in network management, digital classroom tools, and safeguarding solutions, primarily for the education sector and workplaces.

My role

Operating in two key sectors; Office and Education. I worked on the company rebrand and structure of their products, and branding identity to create a simple to understand and instantly recognisable format for customers.

User research Brand design A/B testing User interface

User interface:

Remote Manager

Application icon

Icon design

The icons that ran through the app were simple, yet detailed. Each icon had three corporate colours; this helped give the app a modern facelift.

User interface:

Remote Manager app

Remote Manager is a seamless and innovative blend of online safety, network admin and classroom management software.

Imagery

It works in conjunction with the Education Pro, Workplace Pro and YouID software.

In doing so, we created a fresher and brighter identity that connects with Impero’s customers and creates a clear vision that flows through all products and sub-brand.

Website:

imperosoftware.com

The last thing to get rebranded was the website. During the test phase of development, the site got A/B tested so that we could choose which website layout to use once the official site went live.

The website uses the location of the user. So when a user is in a different region, it loads up that specific regional webpage.

Each region has it’s own tailored visual elements that run throughout the pages.

imperosoftware.com

A/B testing

A/B testing is a method used on many sites to find out how well a design is influencing users’ engagement, particularly in regards to a specific call-to-action.

When users arrive at the site, they are shown one version of the design at random, and overtime statistics are measured to see which design gave the best results. Once a winner is determined, it becomes the design for all visitors.