Amethyst Design System

Projects Gamma: Amethyst design system

Amethyst design system

When I joined Gamma, the UX team was in its infancy and the inconsistencies across the business were obvious – different products, different patterns, different ways of working, no shared language between designers or between design and development.

Nobody had built a design system before. I championed the idea, got buy-in and built Amethyst from scratch over 18 months.

By the time it was up and running, 9 designers were working from it and it was planned to roll out across all Gamma services.

My role

I was the sole creator of Amethyst – responsible for every part of it, from the initial concept and naming through to foundations, components, documentation, developer handoff and the processes that surrounded it.

I introduced ways of working that hadn’t existed at Gamma before – feedback loops, sign-off steps, tone of voice guidelines, Atomic Design methodology and a component library in Figma with boolean properties.

The team was small and the UX function was still finding its feet – I worked closely with three other designers at various points, getting their hands-on feedback to test and refine the system as it grew.

Design system creation Atomic Design methodology Figma component library Boolean properties Design tokens Responsive grid design Typography Colour theory Iconography Illustration guidelines Storybook Chromatic Frontify Design documentations Accessibility (WCAG) Tone of voice Developer handoff Feedback loop design Mentoring

Research:

Why Amethyst?

Naming a design system matters – it gives it an identity and makes people feel invested in it.

I ran a workshop to figure out what to call it, exploring acronyms like GTDS, telecoms-inspired names, plays on the word Gamma – Wave, Rays – and various other directions.

Amethyst won. The amethyst stone is often referred to as the inventor’s stone – fitting for a team of creatives building something new from the ground up. It also happened to match Gamma’s brand colour, which didn’t hurt.

Amethyst:

The problem

Gamma had multiple products and services being designed and built in parallel, but no shared foundation connecting them. Inconsistent UI patterns, duplicated work, no agreed visual language and no single source of truth.

Designers were solving the same problems independently, developers were recreating components from scratch and there was no process for ensuring quality or consistency across the board.

The solution wasn’t just a component library – it was a system. A way of working that connected design to development, gave everyone a shared language and meant that decisions made once could scale across the entire product suite.

Amethyst:

The foundations

Before building any components I established the foundations – the building blocks everything else would be built on.

Design tokens

The system was fully tokenised, making it straightforward to switch between light and dark mode across all components – a single token update cascaded through the entire library rather than requiring manual changes component by component.

Colour

A full colour palette covering brand, neutral, semantic and interactive states across both light and dark themes.

Typography

Type scales, weights and line heights defined for every context – headings, body, labels, captions.

Grid systems

Responsive grid definitions covering desktop, tablet and mobile breakpoints.

Iconography

A consistent icon set with clear usage guidelines.

Illustrations

A defined illustration style to ensure visual consistency across all touchpoints.

Amethyst:

Atomic design methodology

Amethyst was built using Atomic Design – starting with atoms, combining them into molecules, building those into organisms and assembling organisms into full patterns and templates.

Atoms

The smallest building blocks; buttons, inputs, labels, icons, checkboxes, toggles.

Molecules

Atoms combined into functional unites; form fields, search bars, notification components.

Organisms

More complex UI sections that are built from molecules; navigation bars, card grids, data tables.

Patterns

Full page templates and reusable layout structures built from organisms.

Every level was documented, named consistently and linked within Figma so designers could trace a component back to its constituent parts at any time.

Figma

The component library

The Figma component library was built with boolean properties throughout – meaning designers could toggle parts of a component on and off in real time without needing to create separate variants for every possible state. This was entirely new to Gamma. Before Amethyst, designers were either creating components from scratch or duplicating and manually editing existing ones.

Boolean properties meant that a single card component could handle every combination of states – with or without an image, with or without a label, with or without a CTA – without the library becoming unmanageable.

Every component was built to cover all interactive states: default, hover, focus, active, disabled and error where relevant.

Storybook & Chromatic

Developer handoff

Amethyst wasn’t just a Figma library – it was designed to connect design to code.

We integrated Storybook for component development and Chromatic for visual regression testing, meaning developers had a coded mirror of the design components to work from.

This reduced the back-and-forth between design and development and gave both sides a shared reference point for what a component should look like and how it should behave.

Documentation:

The Amethyst design guide

Alongside the component library I wrote the Amethyst design guide – hosted in Frontify – covering everything a designer or developer needed to use the system correctly.

Each component entry covered:

When and how to use it: guidance on appropriate contexts and usage

Do’s and don’ts: clear examples of correct and incorrect usage

Accessibility considerations: WCAG compliance notes, colour contrast requirements, touch target sizing

Tone of voice: writing guidelines to ensure consistent, on-brand copy across all products

Developer notes: implementation guidance and links to Storybook components

The goal was for any designer or developer – new to Gamma or experienced – to be able to pick up Amethyst and use it correctly without needing to ask anyone for help.

Definition:

New processes and Ways of working

Building the system was only part of the job. Getting people to use it consistently required new processes that hadn’t existed at Gamma before. I introduced:

Feedback loops: structured review points where designers could share work in progress and get input from the team before moving to final designs.

Sign-off steps: a clear process for how components were reviewed, approved and added to the library, ensuring quality control as the system grew.

Mentoring: I worked with three other designers in the team through a mentoring programme, using their experience of the system to identify gaps, test new components and refine documentation.

Tone of voice: a writing framework applied consistently across all Gamma products and communications.

The results

Built from scratch and operational within 18 months

9 designers working from a single shared system

Planned rollout across all Gamma services

Introduced Atomic Design, boolean properties, Storybook integration, Chromatic, Frontify documentation and structured design processes – all new to Gamma

Eliminated duplicated work and inconsistent UI patterns across the product suite

The patterns established in Portal Evolution became the foundation for Amethyst – and from Amethyst, they rolled out everywhere

User experience Gamma: Portal evolution

Portal Evolution

Gamma Telecoms’ portal improvements make managing services and orders easier, enhance user experience, and support the move to digital communications like unified solutions and the PSTN switch-off.

My role

On the Portal Evolution project for Gamma, I led the design and development of a next-generation platform aimed at streamlining complex workflows and enhancing user engagement. My focus was on creating intuitive, scalable solutions that empowered users to navigate and manage their tasks with ease.

I collaborated closely with stakeholders to identify pain points and opportunities for improvement, conducting user research and usability testing to gather actionable insights. These findings informed the creation of personas, user journeys, and wireframes, which I shared with cross-functional teams to align on a clear vision. By leveraging a combination of research, design, and iterative problem-solving, I delivered a platform that not only addressed immediate user needs but also provided a foundation for future growth and innovation.

User research Affinity mapping Site mapping Competitor analysis User flows Tree jack Wireframes Visual design Prototyping

Key challenges:

Inconsistent, inefficient navigation

Challenge

The Portal’s overly complex navigation left customers struggling to locate the areas they needed to work on, resulting in frustration, wasted time, and decreased productivity.

This lack of intuitive design not only hindered users from completing tasks efficiently but also contributed to a negative perception of the platform’s usability and reliability.

Solution

I researched into all the sections and pages within the navigation to identify opportunities to separate, group, or merge them. The goal was to simplify the experience and make it easier for customers to find what they needed.

As a result, I created a streamlined experience where users could clearly distinguish between creating and managing orders within a single flow. Previously, these actions were split across separate links, which added unnecessary complexity.

Key challenges:

Fragmented user journeys

Challenge

Users of the Gamma Portal encountered inconsistent user interfaces and disjointed journeys when navigating the platform’s features, including reporting dashboards, ordering processes, and administrative tools.

These inconsistencies made the platform less accessible and efficient, ultimately affecting customer satisfaction and retention.

Solution

I explored specific ways to help customers streamline their ordering processes.

One key area I focused on was reducing friction by encouraging users to self manage within a profile area. This allowed customers to input their information beforehand, so when starting an order, they could simply select a profile. With one click, all the required fields would be automatically pre-filled, making the process faster and more efficient.

To further enhance usability, we added a convenient checkbox at the bottom of the form for users who hadn’t prepopulated their profile. This feature allowed them to transfer the information they entered on the form directly to their profile for future use.

For Channel Partners managing multiple customers, this approach was scalable, as users could easily select the relevant account to streamline their workflow even further.

Goals

Improve navigation across the platform

The navigation was excessively large, with over 147 individual links!! Users found it difficult to identify which links were relevant to their workflows and how to navigate to specific sections that were important to them when needed.

Simplify all journey flows

Throughout many order journeys, there was significant repetition and unnecessary mandatory fields that had to be completed when placing an order. Many customers believed this was a way for Gamma to collect data from them.

Although these input fields were mandatory, the system was unable to validate whether the data entered was correct. As a result, customers realised they could input anything into the fields to proceed to the next page in the flow.

Reduce pressures on support teams by allowing users to self serve on the platform

When users placed an order or needed to make any changes to their accounts, users were required to call the support line so an agent could make the necessary updates.

No matter how small the task, this was still required.

Research:

Site mapping

After gathering extensive feedback from users across the business, first-hand customers, and exploring the platform myself, I decided it would be best to create a site map.

This process allowed me to review all areas of the site and gain a clear overview of its structure. I also made rough notes describing the actions required on each specific page to better understand the purpose and layout.

Could any of the sections within the navigation be simplified or condensed, as there may be duplications throughout? Surely a navigation menu can be streamlined from 147 links!

Research:

Journey flows

Once I had gained more insight into the platform, I began mapping out the journeys users would take to create orders. Each time an order was created across the business, the user had to log in, select an account, and input their details—followed by additional steps specific to the type of order they wanted to make.

Key findings:

Site map

I wen’t through every page on the site, going through the navigation links and made a brief note of what each page required the user to do to complete the relevant task. (Yes! It was quite a job!)

Observations
There are numerous search pages, each requiring you to select a specific account and enter a unique identifier. However, the search functionality lacks clarity—typing in the search field either displays results or leaves the page blank. There’s no 'No results' message or any guidance on what can be searched for, making it unclear what specific information is allowed or expected.
There is inconsistent terminology used across the platform, along with numerous spelling and grammar errors. For example, buttons are labelled inconsistently as 'Continue', 'Next', or 'Proceed'.
The 'Download' button appears on search pages before the user has performed a search, which makes the page feel confusing and unintuitive.
There are numerous instances of unusual UX behaviour and inconsistent styling throughout the platform.

Key findings:

Site map overview

I grouped all the finding together. This gave me a breakdown of the main areas of focus to start improving.

Overview
54 pages involve 'searching'
31 pages involve 'Management'
11 pages involve 'Creating'  
9 pages involve 'Bulk actions'   
9 pages involve 'Notifications'   

It was obvious just by looking at the numbers that areas needed to be streamlined, instead of having a page for every single area, lets have one global feature instead.

By streamlining the navigation, I thought it would be a great idea to see if every duplicate page could be removed, if there were reasons to keep that page, I would see if I could integrate that particular part in the grand design so functionality wasn’t being missed out.

Ideation:

Landing page

The idea was to create a landing page when the user logs in. Users can see their products, services, sites and locations easily.

The navigation has been completely stripped back and simplified:

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

One of the main frustrations when creating a new order was the lack of flexibility to amend or change orders, upgrade services, or even update site details and equipment for each site.

Users had to phone or email to make changes to their account. The same process applied when placing an order: users would endure the laborious task of creating their order, only for it to be emailed to someone in accounts, who would then calculate the costs and send an invoice back to the user.

The whole process felt incredibly outdated and wasn’t very transparent.

Wireframes:

‘My products’ page

I created an area where users could easily self-serve and ‘Manage’ their active products manually, as well as a space where they could easily ‘Create’ a new order if they wanted to add another service.

The screen is split into two sections: the left side displays your active services at each site, while the right side dynamically updates to show specific information about whatever you’ve selected on the left. This could be site details or information about a particular service.

If nothing is selected, the screen provides helpful guidance to indicate that you can interact with the panels on the left.

Edit an active service

If a user selects a specific service, they can see the level of service they have, along with its location.

If the service or product is eligible for an upgrade, users can do this themselves by simply toggling the options on or off. Alternatively, users can also select any relevant bolt-ons for that particular service, with prices clearly highlighted for transparency.

This removes the need to wait for accounts to recalculate everything and get back to the user.

Edit a site

Similarly to selecting a service, the site details could be easily edited or adjusted, and users could view all the products and services active at a particular site.

They could also toggle a service on or off if it was no longer required.

Final design:

‘My products’ page

When the user logs into the Portal, the first thing they see is a breakdown of all the sites that the business has registered on they system.

Sites can be empty if they don’t have any active services. When services are active, you can see them on the page. Users can select the site as a whole or a specific service to update accordingly.

Edit an active service

When a service is selected, you can add bolt-ons or upgrade / downgrade and change settings accordingly based on the service thats been selected.

For transparency, you can see the cost difference for everything at a glance (none of that previous ’email / call’ in to get an updated price).

Edit a site

When a site is selected, you can edit the address and numbers, as well as toggle services on or off – the business has bought the service, so they can distribute the services however they wish. 

Each site has it’s own equipment, the same as the site settings, these can be updated and toggled on / off.

Research:

Creating a new order

I began collecting first-hand information and insights on users’ opinions and behaviours of the current platform – specifically creating a new order as this was a common task that users did on the platform.

I noticed there were lots of similarities and repeated tasks for each flow – could I simplify this step in the journey somehow?

I asked users what they liked and disliked about the journey, while also making general notes. I organised these notes into categories:

Observations Positive Minor Serious Critical

Along the way, I also gathered suggestions on how the platform could be improved moving forward.

User interviews:

Step 1: Contact details

All users would have to start by entering their details – they would have to select their account, along with information such as email address, name, company name, phone and mobile numbers as well as selecting what the nature of the business was.

These fields felt very accessive and they had to be filled in every time users wanted to create a new order – if the details were linked to the account they’ve selected in the first step then surely the other details could be pre-populated based on the selected account.

Serious
Users often failed to provide the correct information in the Customer Contact Details section. This was primarily because they didn’t fully understand the information being requested. In many cases, the technical contact was from a different company and not local to the person completing the form, making it even more challenging to provide accurate details.
Minor
Some users questioned why certain information was being requested and expressed concerns that it might be a data capture exercise by the business.
Positive
Many users found it straighforward to complete the information in the form.

User interviews:

Step 2: Product details

Users then have to select what level of security they want for the product. The options were very jargon heavy and wordy – plus I don’t know what the difference is between each choice, what extra am I paying for?

I also noticed users kept missing the yellow “I confirm” checkbox and then clicked ‘Continue’ to progress with the order. 

This felt like it used to be at the bottom of the page, but more and more information has been added to the page over time like the ‘Promotions’ section.

Serious
Multiple users mentioned that they would add a dummy broadband service in order to qualify for free SIP Trunk Call Manager.
Supporting comments:
The broadband service rental cost is typically lower than the SIP Trunk Call Manager cost because of the cost of DDI's etc, so even if it's not used we do have a couple where they have an existing ethernet circuit and we've put a broadband service in that's not even used just to get the free SIP Trunk Call Manager
Minor
Some users didn’t understand the differences between the Build Types and would rely solely on the information provided in the order form from their account managers.
Positive
A user explained that SIP Trunk Call Manager had been hugely beneficial during COVID, as it allowed customers to manage their own call diverts.

User interviews:

Step 3: Build details

The first yellow warning message at the top of the page say: “It is vital that CPE information is correct”, but lots of people mentioned that they didn’t know what a SBC / IP-PBX was. 

Critical
Some users reported that when they entered a quantity in the Channel Count field and clicked 'Continue', then navigated back to the previous page, the quantity they had entered was automatically changed to 10.
Serious
Users often had to enter a dummy IP address because they didn’t have an IP address available at the time.
Many users would initially enter "2" in the Channel Count field and later go back to update it once the service had been configured.
Some users were unsure about the difference between "SBC in front of an IP-PBX" and "IP-PBX only."
Minor
Similar to the Contact Details page, users didn’t understand why Gamma was requesting such a large amount of information.
Supporting comments:
I've not always been accurate with the information and is hasn't caused me a problem
Observations
Users assumed that the address picker was linked to the 999 emergency details.

User interviews:

Step 4: Service configuration

Users would then have to set up their daily fraud limit by inputting a daily amount of their choice and select what calls they can block from being made.

Minor
Some users commented that the default fraud limits were set too high.
Users were unsure if they could enter multiple email addresses. Despite the form stating 'email address(es)', they were unclear about the correct format to use.
Users were unsure about the purpose of 'Fax (T.38)', but some chose to enable it regardless.
Positive
Many users felt that the Fraud Management section was a valuable tool.
Observations
A few users chose not to enable Fraud Management, as they had already barred Premium Calls and felt there was no need for both.

User interviews:

Step 5: Call manager configuration

This was an optional page, but users would select if they wanted to upgrade their product – however it didn’t tell the user what the cost was for the upgrade.

Critical
Many users chose not to add the service add-ons, feeling they were too expensive and not worth the cost.

User interviews:

Step 6: Number selection

When users could create phone numbers, they could select the area code they needed, along with the quantity they needed and if they needed to be a consecutive amount or just randomly ordered.

Minor
Many users did not understand the meaning of 'Incoming CLI rule'.
Observations
Users felt that 'Consecutive' should be selected by default.

User interviews:

Step 7: Order complete

The last page is literally where the user reads and accepts the terms and conditions.

Once that task is complete, then the order gets sent over to the accounts team for them to review and work out the total costs.

Observations
One user mentioned they would consider performing enhanced SIP testing, but noted that the downside is it takes 24 hours.

Research:

Journey mapping

Create a new SIP Trunk order

After sorting out the dashboard for Portal Evolution, one of the first projects I worked on involved redesigning and defining the user experience for creating a new oders, specifically for SIP Trunk orders (this was because it was one of the larger journeys.

My approach typically involves mapping out the current journey and documenting every interaction required to complete the task, including optional interactions. For example, I note that the user lands on the login page and needs to click on the email address input field to begin entering their email address.

This detailed process allows me to create a clear before-and-after comparison, where a reduction in clicks highlights a simplified and more efficient task, ultimately saving time for the user.

You might notice the term “Between” in the analysis – this accounts for the optional interactions users can make. For instance, the current flow in its simplest form required 52 clicks, while the redesigned flow reduced this to just 15 clicks.

Current click count: Between 52-88 clicks
Suggested click count: Between 15-30 clicks

Final designs:

Profile area

One of the larger pieces of work that fell out of these flows was to create a profile area for users to add or update their details.

Currently, there wasn’t anything like this on the platform – the aim of creating the profile area was for users to enter the details that were asked throughout the ordering flows.

These details could then be prepopulated during the order journeys, reducing the users need to constantly input information over and over again.

Account overview

TBC

Personal information

TBC

Payment methods

TBC

Orders overview

TBC

Notification settings

TBC

Login and security

TBC

Final designs:

Create your order

I noticed when users wanted to create a new order they couldn’t add multiple services to their order.

It was literally a case of having to add all the details and information into the system multiple times, depending on how many services they wanted to place in the order.

Phase 1 – Price transparency

One of the main points I kept hearing from users and team members was the absolute lack of transparancy around the pricing of products, services and add-ons.

When a user selects a service – a ‘reciept style’ section appears showing the price (before, the users only saw the cost days after submitting their order).

We also tried to encourage upselling and add-ons, so if a user added another product to their order, they would save more money.

Phase 1 – Reduced jargon

TBC

Phase 1 – Simplified order journeys

One of the larger pieces of work that fell out of these flows was to create a profile area for users to add or update their details.

Currently, there wasn’t anything like this on the platform – the aim of creating the profile area was for users to enter the details that were asked throughout the ordering flows, these could then be prepopulated during the order creation, reducing the users need to constantly input information over and over again.

Gymshark Workout App

Projects Gymshark: Workout app

Gymshark workout app

Gymshark set me a design brief: concept a workout app targeted at social natives who wanted to train alongside their favourite Gymshark athletes, get tips on form and technique from the pros and track their strength and conditioning workouts.

The brief covered a home screen redesign, a free vs premium content badging system, onboarding improvements and a pull-to-refresh mechanism for dynamic content.

I added an additional layer on top of the brief – an interactive muscle map overlay showing which muscle groups each exercise targeted in real time.

I spent a few weeks on the project, and the concepts I developed closely mirror the direction Gymshark ultimately took with the product.

My role

I was the sole designer on the project – research, competitor analysis, observations, design solutions, UI and interactive prototype.

The brief asked me to demonstrate creative and conceptual skills alongside iOS knowledge, with user experience prioritised over visual polish.

I treated it as a full end-to-end design exercise.

Competitor analysis User journey mapping iOS native design Accessibility auditing (WCAG 2.0) Onboarding design Empty state design Content badging system Interactive prototyping Muscle map / body overlay design UI design

Research:

Competitor analysis

Before touching a wireframe I analysed how the leading players in the activewear and fitness space handled their product experiences – looking for patterns worth adopting and gaps worth exploiting.

Gymshark already had a strong quick-add feature on their website – hovering over a product revealed size availability and added it directly to the basket, cutting out multiple clicks compared to competitors. A lean model worth carrying into the app experience.

Under Armour showed colour availability without clicking into a product, but still required additional clicks to select a size – less lean than Gymshark’s approach.

Nike used clean, simple imagery with colour breakdowns and prominent Add to Cart buttons – a familiar, functional pattern.

Lululemon required users to click into a product and then open a dropdown to select a size – two additional clicks, and if the size wasn’t available, a frustrating waste of time.

Boohoo took a smart approach by only showing sizes that were actually available for each product – removing the disappointment of selecting an unavailable size entirely.

Amazon used hover states to surface sub-categories quickly, detailed filtering and Best Seller tags – useful patterns for surfacing content efficiently.

Key takeaway

The most effective experiences were the leanest ones. Every unnecessary click was a potential drop-off point, particularly for users mid-workout or on the move.

Research:

User journey mapping

I mapped out the current Gymshark user journey against competitor journeys to understand where friction existed and where the app could learn from best practice.

Gymshark’s quick-add flow was already strong – but the app experience needed to carry the same lean principles through to workout discovery, tracking and content consumption.

Patterns from best-in-class experiences like Petco and Zumiez informed the approach – limited exit points once in a flow, descriptive CTAs that set expectations, guest access, and clear progress indicators.

Observations and suggestions:

About you

Observations

The gender selection only offered Male and Female – no Non-Binary or Prefer Not to Say option.

The Continue button’s active state changed from dark grey to black – a subtle shift that would be easy to miss for users with visual impairments.

Touch targets on the checkbox and buttons were below Apple’s recommended 44px minimum, meaning users could easily tap the wrong element.

Suggestions

Adding a Non-Binary and Prefer Not to Say option promotes gender inclusivity and reflects Gymshark’s audience more accurately.

Increasing touch targets to 44px prevented accidental taps and made the interface usable mid-workout.

Making the active state of the Continue button more visually distinct ensured users knew they could proceed.

Observations and suggestions:

Home screen

Observations

The “Create your first custom plan” element didn’t look like a button – easy to overlook entirely.

The “View Athlete Plans” link failed WCAG 2.0 accessibility guidelines – low contrast made it difficult to read for anyone with a visual impairment, and the tap target was too close to the button above it.

Suggestions

Redesigning “Create Your Custom Plan” as a proper button with a supporting icon made the action clear and consistent with the rest of the app.

Updating “View Athlete Plans” to match the bottom navigation colour improved brand consistency and made the link immediately legible.

Observations and suggestions:

Search empty state

Observations

First-time users were greeted with a completely blank search page – no guidance, no suggestions, no starting point.

A new user who doesn’t know what to search for has nothing to go on.

Suggestions

I replaced the empty state with onboarding copy explaining that no searches had been made yet, alongside curated “Get Started”, “Popular” and “Hot This Week” suggestions.

New users got a gentle nudge in the right direction. Experienced users could ignore it and search directly.

Observations and suggestions:

Onboarding

Observations

The Skip button was positioned centrally at the bottom of the screen – exactly where a user’s eye and thumb naturally land.

Users were unconsciously skipping onboarding without reading it.

Suggestions

Moving Skip to the top right of the screen – where it’s visible but not prominent – meant users were far more likely to read through the onboarding content before dismissing it.

A small change with a significant impact on how much information users actually absorbed.

Ideation:

Home screen

The home screen redesign brought together all of the research findings into a single cohesive experience — promoting new and existing workout content to a mixed male and female audience, surfacing shortcuts to previous activities, and providing a pull-to-refresh mechanism for dynamic content loading.

The screen was structured around three priorities: getting returning users back to where they left off quickly, surfacing new content from athletes they follow, and giving new users a clear path into their first workout.

Ideation:

Free vs Premium badge system

Gymshark planned to introduce a premium subscription tier – with some athlete content free, some premium only, some new and free, and some new and premium. Users needed to be able to tell the difference at a glance without it disrupting the browsing experience.

Taking inspiration from Strava’s badging approach, I designed a consistent visual badging system covering all four states:

Free
Clearly labelled, accessible to all users

Premium
Badged to indicate subscription required

Free + New
Dual badge surfacing both attributes

New + Premium
Dual badge combining novelty and premium status

Any content not marked as Free was treated as premium by default – keeping the system simple and consistent throughout.

Ideation:

Muscle map overlay

Going beyond the brief, I designed an interactive muscle map feature – an addition I felt would meaningfully improve the workout experience.

When a user selected an exercise, a body map overlay highlighted which muscle groups that exercise targeted in real time. Users could also tap a muscle group on the map to discover exercises that worked that area.

The design challenge was surfacing detailed, dynamic information without cluttering the screen or breaking the user’s focus mid-workout.

The overlay was kept clean, minimal and dismissible – information on demand rather than information by default.

What happened next

The brief didn’t lead to a role – but the concepts I developed closely mirror the direction Gymshark subsequently took with their workout product.

The muscle map, the content badging system, the personalised home screen and the empty state improvements all found their way into the product in some form. Sometimes the work lands even when the opportunity doesn’t.

User experience Gamma: Portal evolution

Portal Evolution

Gamma Telecoms’ portal improvements make managing services and orders easier, enhance user experience, and support the move to digital communications like unified solutions and the PSTN switch-off.

My role

On the Portal Evolution project for Gamma, I led the design and development of a next-generation platform aimed at streamlining complex workflows and enhancing user engagement. My focus was on creating intuitive, scalable solutions that empowered users to navigate and manage their tasks with ease.

I collaborated closely with stakeholders to identify pain points and opportunities for improvement, conducting user research and usability testing to gather actionable insights. These findings informed the creation of personas, user journeys, and wireframes, which I shared with cross-functional teams to align on a clear vision. By leveraging a combination of research, design, and iterative problem-solving, I delivered a platform that not only addressed immediate user needs but also provided a foundation for future growth and innovation.

User research Affinity mapping Site mapping Competitor analysis User flows Tree jack Wireframes Visual design Prototyping

Key challenges:

Inconsistent, inefficient navigation

Challenge

The Portal’s overly complex navigation left customers struggling to locate the areas they needed to work on, resulting in frustration, wasted time, and decreased productivity.

This lack of intuitive design not only hindered users from completing tasks efficiently but also contributed to a negative perception of the platform’s usability and reliability.

Solution

I researched into all the sections and pages within the navigation to identify opportunities to separate, group, or merge them. The goal was to simplify the experience and make it easier for customers to find what they needed.

As a result, I created a streamlined experience where users could clearly distinguish between creating and managing orders within a single flow. Previously, these actions were split across separate links, which added unnecessary complexity.

Key challenges:

Fragmented user journeys

Challenge

Users of the Gamma Portal encountered inconsistent user interfaces and disjointed journeys when navigating the platform’s features, including reporting dashboards, ordering processes, and administrative tools.

These inconsistencies made the platform less accessible and efficient, ultimately affecting customer satisfaction and retention.

Solution

I explored specific ways to help customers streamline their ordering processes.

One key area I focused on was reducing friction by encouraging users to self manage within a profile area. This allowed customers to input their information beforehand, so when starting an order, they could simply select a profile. With one click, all the required fields would be automatically pre-filled, making the process faster and more efficient.

To further enhance usability, we added a convenient checkbox at the bottom of the form for users who hadn’t prepopulated their profile. This feature allowed them to transfer the information they entered on the form directly to their profile for future use.

For Channel Partners managing multiple customers, this approach was scalable, as users could easily select the relevant account to streamline their workflow even further.

Goals

Improve navigation across the platform

The navigation was excessively large, with over 147 individual links!! Users found it difficult to identify which links were relevant to their workflows and how to navigate to specific sections that were important to them when needed.

Simplify all journey flows

Throughout many order journeys, there was significant repetition and unnecessary mandatory fields that had to be completed when placing an order. Many customers believed this was a way for Gamma to collect data from them.

Although these input fields were mandatory, the system was unable to validate whether the data entered was correct. As a result, customers realised they could input anything into the fields to proceed to the next page in the flow.

Reduce pressures on support teams by allowing users to self serve on the platform

When users placed an order or needed to make any changes to their accounts, users were required to call the support line so an agent could make the necessary updates.

No matter how small the task, this was still required.

Research:

Site mapping

After gathering extensive feedback from users across the business, first-hand customers, and exploring the platform myself, I decided it would be best to create a site map.

This process allowed me to review all areas of the site and gain a clear overview of its structure. I also made rough notes describing the actions required on each specific page to better understand the purpose and layout.

Could any of the sections within the navigation be simplified or condensed, as there may be duplications throughout? Surely a navigation menu can be streamlined from 147 links!

Research:

Journey flows

Once I had gained more insight into the platform, I began mapping out the journeys users would take to create orders. Each time an order was created across the business, the user had to log in, select an account, and input their details—followed by additional steps specific to the type of order they wanted to make.

Key findings:

Site map

I wen’t through every page on the site, going through the navigation links and made a brief note of what each page required the user to do to complete the relevant task. (Yes! It was quite a job!)

Observations
There are numerous search pages, each requiring you to select a specific account and enter a unique identifier. However, the search functionality lacks clarity—typing in the search field either displays results or leaves the page blank. There’s no 'No results' message or any guidance on what can be searched for, making it unclear what specific information is allowed or expected.
There is inconsistent terminology used across the platform, along with numerous spelling and grammar errors. For example, buttons are labelled inconsistently as 'Continue', 'Next', or 'Proceed'.
The 'Download' button appears on search pages before the user has performed a search, which makes the page feel confusing and unintuitive.
There are numerous instances of unusual UX behaviour and inconsistent styling throughout the platform.

Key findings:

Site map overview

I grouped all the finding together. This gave me a breakdown of the main areas of focus to start improving.

Overview
54 pages involve 'searching'
31 pages involve 'Management'
11 pages involve 'Creating'  
9 pages involve 'Bulk actions'   
9 pages involve 'Notifications'   

It was obvious just by looking at the numbers that areas needed to be streamlined, instead of having a page for every single area, lets have one global feature instead.

By streamlining the navigation, I thought it would be a great idea to see if every duplicate page could be removed, if there were reasons to keep that page, I would see if I could integrate that particular part in the grand design so functionality wasn’t being missed out.

Ideation:

Landing page

The idea was to create a landing page when the user logs in. Users can see their products, services, sites and locations easily.

The navigation has been completely stripped back and simplified:

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

One of the main frustrations when creating a new order was the lack of flexibility to amend or change orders, upgrade services, or even update site details and equipment for each site.

Users had to phone or email to make changes to their account. The same process applied when placing an order: users would endure the laborious task of creating their order, only for it to be emailed to someone in accounts, who would then calculate the costs and send an invoice back to the user.

The whole process felt incredibly outdated and wasn’t very transparent.

Wireframes:

‘My products’ page

I created an area where users could easily self-serve and ‘Manage’ their active products manually, as well as a space where they could easily ‘Create’ a new order if they wanted to add another service.

The screen is split into two sections: the left side displays your active services at each site, while the right side dynamically updates to show specific information about whatever you’ve selected on the left. This could be site details or information about a particular service.

If nothing is selected, the screen provides helpful guidance to indicate that you can interact with the panels on the left.

Edit an active service

If a user selects a specific service, they can see the level of service they have, along with its location.

If the service or product is eligible for an upgrade, users can do this themselves by simply toggling the options on or off. Alternatively, users can also select any relevant bolt-ons for that particular service, with prices clearly highlighted for transparency.

This removes the need to wait for accounts to recalculate everything and get back to the user.

Edit a site

Similarly to selecting a service, the site details could be easily edited or adjusted, and users could view all the products and services active at a particular site.

They could also toggle a service on or off if it was no longer required.

Final design:

‘My products’ page

When the user logs into the Portal, the first thing they see is a breakdown of all the sites that the business has registered on they system.

Sites can be empty if they don’t have any active services. When services are active, you can see them on the page. Users can select the site as a whole or a specific service to update accordingly.

Edit an active service

When a service is selected, you can add bolt-ons or upgrade / downgrade and change settings accordingly based on the service thats been selected.

For transparency, you can see the cost difference for everything at a glance (none of that previous ’email / call’ in to get an updated price).

Edit a site

When a site is selected, you can edit the address and numbers, as well as toggle services on or off – the business has bought the service, so they can distribute the services however they wish. 

Each site has it’s own equipment, the same as the site settings, these can be updated and toggled on / off.

Research:

Creating a new order

I began collecting first-hand information and insights on users’ opinions and behaviours of the current platform – specifically creating a new order as this was a common task that users did on the platform.

I noticed there were lots of similarities and repeated tasks for each flow – could I simplify this step in the journey somehow?

I asked users what they liked and disliked about the journey, while also making general notes. I organised these notes into categories:

Observations Positive Minor Serious Critical

Along the way, I also gathered suggestions on how the platform could be improved moving forward.

User interviews:

Step 1: Contact details

All users would have to start by entering their details – they would have to select their account, along with information such as email address, name, company name, phone and mobile numbers as well as selecting what the nature of the business was.

These fields felt very accessive and they had to be filled in every time users wanted to create a new order – if the details were linked to the account they’ve selected in the first step then surely the other details could be pre-populated based on the selected account.

Serious
Users often failed to provide the correct information in the Customer Contact Details section. This was primarily because they didn’t fully understand the information being requested. In many cases, the technical contact was from a different company and not local to the person completing the form, making it even more challenging to provide accurate details.
Minor
Some users questioned why certain information was being requested and expressed concerns that it might be a data capture exercise by the business.
Positive
Many users found it straighforward to complete the information in the form.

User interviews:

Step 2: Product details

Users then have to select what level of security they want for the product. The options were very jargon heavy and wordy – plus I don’t know what the difference is between each choice, what extra am I paying for?

I also noticed users kept missing the yellow “I confirm” checkbox and then clicked ‘Continue’ to progress with the order. 

This felt like it used to be at the bottom of the page, but more and more information has been added to the page over time like the ‘Promotions’ section.

Serious
Multiple users mentioned that they would add a dummy broadband service in order to qualify for free SIP Trunk Call Manager.
Supporting comments:
The broadband service rental cost is typically lower than the SIP Trunk Call Manager cost because of the cost of DDI's etc, so even if it's not used we do have a couple where they have an existing ethernet circuit and we've put a broadband service in that's not even used just to get the free SIP Trunk Call Manager
Minor
Some users didn’t understand the differences between the Build Types and would rely solely on the information provided in the order form from their account managers.
Positive
A user explained that SIP Trunk Call Manager had been hugely beneficial during COVID, as it allowed customers to manage their own call diverts.

User interviews:

Step 3: Build details

The first yellow warning message at the top of the page say: “It is vital that CPE information is correct”, but lots of people mentioned that they didn’t know what a SBC / IP-PBX was. 

Critical
Some users reported that when they entered a quantity in the Channel Count field and clicked 'Continue', then navigated back to the previous page, the quantity they had entered was automatically changed to 10.
Serious
Users often had to enter a dummy IP address because they didn’t have an IP address available at the time.
Many users would initially enter "2" in the Channel Count field and later go back to update it once the service had been configured.
Some users were unsure about the difference between "SBC in front of an IP-PBX" and "IP-PBX only."
Minor
Similar to the Contact Details page, users didn’t understand why Gamma was requesting such a large amount of information.
Supporting comments:
I've not always been accurate with the information and is hasn't caused me a problem
Observations
Users assumed that the address picker was linked to the 999 emergency details.

User interviews:

Step 4: Service configuration

Users would then have to set up their daily fraud limit by inputting a daily amount of their choice and select what calls they can block from being made.

Minor
Some users commented that the default fraud limits were set too high.
Users were unsure if they could enter multiple email addresses. Despite the form stating 'email address(es)', they were unclear about the correct format to use.
Users were unsure about the purpose of 'Fax (T.38)', but some chose to enable it regardless.
Positive
Many users felt that the Fraud Management section was a valuable tool.
Observations
A few users chose not to enable Fraud Management, as they had already barred Premium Calls and felt there was no need for both.

User interviews:

Step 5: Call manager configuration

This was an optional page, but users would select if they wanted to upgrade their product – however it didn’t tell the user what the cost was for the upgrade.

Critical
Many users chose not to add the service add-ons, feeling they were too expensive and not worth the cost.

User interviews:

Step 6: Number selection

When users could create phone numbers, they could select the area code they needed, along with the quantity they needed and if they needed to be a consecutive amount or just randomly ordered.

Minor
Many users did not understand the meaning of 'Incoming CLI rule'.
Observations
Users felt that 'Consecutive' should be selected by default.

User interviews:

Step 7: Order complete

The last page is literally where the user reads and accepts the terms and conditions.

Once that task is complete, then the order gets sent over to the accounts team for them to review and work out the total costs.

Observations
One user mentioned they would consider performing enhanced SIP testing, but noted that the downside is it takes 24 hours.

Research:

Journey mapping

Create a new SIP Trunk order

After sorting out the dashboard for Portal Evolution, one of the first projects I worked on involved redesigning and defining the user experience for creating a new oders, specifically for SIP Trunk orders (this was because it was one of the larger journeys.

My approach typically involves mapping out the current journey and documenting every interaction required to complete the task, including optional interactions. For example, I note that the user lands on the login page and needs to click on the email address input field to begin entering their email address.

This detailed process allows me to create a clear before-and-after comparison, where a reduction in clicks highlights a simplified and more efficient task, ultimately saving time for the user.

You might notice the term “Between” in the analysis – this accounts for the optional interactions users can make. For instance, the current flow in its simplest form required 52 clicks, while the redesigned flow reduced this to just 15 clicks.

Current click count: Between 52-88 clicks
Suggested click count: Between 15-30 clicks

Final designs:

Profile area

One of the larger pieces of work that fell out of these flows was to create a profile area for users to add or update their details.

Currently, there wasn’t anything like this on the platform – the aim of creating the profile area was for users to enter the details that were asked throughout the ordering flows.

These details could then be prepopulated during the order journeys, reducing the users need to constantly input information over and over again.

Account overview

TBC

Personal information

TBC

Payment methods

TBC

Orders overview

TBC

Notification settings

TBC

Login and security

TBC

Final designs:

Create your order

I noticed when users wanted to create a new order they couldn’t add multiple services to their order.

It was literally a case of having to add all the details and information into the system multiple times, depending on how many services they wanted to place in the order.

Phase 1 – Price transparency

One of the main points I kept hearing from users and team members was the absolute lack of transparancy around the pricing of products, services and add-ons.

When a user selects a service – a ‘reciept style’ section appears showing the price (before, the users only saw the cost days after submitting their order).

We also tried to encourage upselling and add-ons, so if a user added another product to their order, they would save more money.

Phase 1 – Reduced jargon

TBC

Phase 1 – Simplified order journeys

One of the larger pieces of work that fell out of these flows was to create a profile area for users to add or update their details.

Currently, there wasn’t anything like this on the platform – the aim of creating the profile area was for users to enter the details that were asked throughout the ordering flows, these could then be prepopulated during the order creation, reducing the users need to constantly input information over and over again.

Jungle Junkie

The Jungle Junkie

Available plants

Welcome to Jungle Junkie, your destination for vibrant, exotic houseplants! Specialising in stunning tropicals, we bring nature’s beauty into your home. Our curated collection is perfect for beginners and collectors alike, with each plant chosen for its unique foliage and easy-care charm. I’m passionate about greenery and committed to helping you create your own indoor jungle.

Tropical

Aglaonema
Pictum Tricolor

£15.00

The Aglaonema pictum ‘Tricolor’, commonly known as the Chinese Evergreen ‘Tricolor,’ is a striking tropical houseplant prized for its vibrant, variegated foliage.

Add to basket
Tropical

Pilea Peperomioides
Mojito (Variegated)

(1 Review)
£6.00

The Pilea peperomioides ‘Mojito’, commonly known as the Variegated Chinese Money Plant or Pancake Plant, is a rare and visually striking cultivar of the Pilea peperomioides.

Add to basket
Tropical

Tradescantia
Zebrina

£5.00

Commonly known as the Zebra Plant, Inch Plant, or Wandering Jew, is a popular trailing houseplant valued for its vibrant, striped foliage and easy-care nature.

Add to basket
Tropical

Ceropegia Woodii – String of Hearts

£10.00

The String of Hearts (Ceropegia woodii), also known as Rosary Vine or Chain of Hearts, is a charming, trailing succulent houseplant prized for its delicate, heart-shaped leaves and cascading growth.

Add to basket

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 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+ clicks

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 clicks

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
User experience Experian: Insights

Insights

Experian’s Insights platform provides businesses with real-time data analysis, customisable dashboards, and actionable insights. It leverages cutting-edge technologies, including AI and machine learning, to streamline decision-making, enhance customer understanding, and optimise operations.

My role

At Experian, a global leader in credit reporting and marketing services, I designed software to help protect consumers and businesses from fraud and identity theft. My focus was on creating user-friendly designs for key products like PowerCurve Insights and Experian One.

I conducted research and user studies to understand what users needed, turning these insights into tools like personas and user journeys. I shared these findings with Product Management and Engineering teams to ensure we created effective solutions. By combining research, problem-solving, and design skills, I developed adaptable designs that met current needs and remained useful over time.

User research Affinity mapping Competitor analysis User flows Tree jack Wireframes Visual design Prototyping

Key challenges:

Customisable real-time dashboards

Challenge

I was tasked to create a data tool that provided real-time reports that allowed customers to create their own unique dashboards and reports based on the users needs and requirements.

Solution

I developed a solution that enabled users to create fully customisable dashboards and reports tailored to their specific requirements.

The solution also provided cross-platform functionality, allowing users to view their dashboards and receive updates seamlessly, even while on the go.

Key challenges:

Clunky, inefficient report navigation

Challenge

The data reports were buried within a tree-structured list, which was functional to an extent but had significant drawbacks. The process was slow, cumbersome, and difficult to navigate, making it challenging to open and switch between reports. This inefficiency made it nearly impossible for users to view multiple reports quickly and effortlessly.

Solution

I designed a new navigation system to help users seamlessly switch between and access reports within the same folder, as well as easily explore reports in other folders.

Additionally, I introduced thumbnails, providing users with a clear visual preview of each report for quicker identification and access.

Goals

Create a fully customisable experience across web and mobile

Enable users to design personalised dashboards and reports that cater to their unique needs and preferences. This includes providing flexible options for selecting, organising, and displaying data in a way that aligns with their workflows.

Ensure the experience is consistent and seamless across both web and mobile platforms, allowing users to access and manage their reports anytime, anywhere.

Make Insights intuitive so users can easily navigate and find reports

Develop a user-friendly navigation that simplifies the process of locating and accessing reports. This includes clear categorisation, search functionality, and filtering options to help users quickly find what they need.

The design should reduce unnecessary clicks and eliminate frustration, ensuring users can focus on their tasks without being hindered by the interface.

Insights needs to feels part of the Experian One platform

Replace the outdated tree structure with a modern, efficient interface that aligns with the overall design language of Experian One. The new interface should allow users to seamlessly view, compare, and interact with multiple reports without unnecessary delays.

By integrating Insights more cohesively into the platform, users will experience a unified and professional product ecosystem.

Research:

Tree jack task

After phase 1, the initial design evolved, and a navigation menu became necessary to accommodate the various links users needed for their daily tasks.

To ensure the navigation was user-friendly, I conducted a tree jack exercise, asking users to organise and group the links based on what they found most beneficial for their workflows. This approach helped me identify common themes and patterns, providing valuable insights into what users prioritised and needed from the design.

Research:

User testing

After the design was approved, I developed interactive prototypes of the screens, allowing users to navigate through them as if they were using a real application. This approach made the product feel more realistic and helped me gather valuable user feedback.

I asked users targeted questions about specific areas of the interface, including the new navigation menu informed by the tree jack exercise. Additionally, we sought their opinions on what they liked and what improvements they would make if given the opportunity.

Research:

Journey flows

I created several user journey flows to compare the current design with the new design I proposed.

My approach focused on making user flows as streamlined as possible. If a step can be removed without impacting the user’s ability to complete their main tasks, I aim to eliminate that friction. Fewer clicks typically result in less friction, leading to faster task completion and an overall smoother user experience.

Key findings:

Tree jack task

Navigation design

Critical

Given the way users could structure their folders and files, I recommended avoiding the nesting of multiple tasks, datasets, reports, and workbooks directly within the navigation.

While this approach might seem easier for users, as they could see and click on what they needed, it posed significant challenges. For instance, one user mentioned having over 50 folders, with some containing more than 100 reports. This level of nesting could overwhelm and potentially break the navigation.

Instead, it was more effective to guide users to a dedicated area where they could search for the specific file they needed, ensuring a more manageable and efficient experience.

Key findings:

User testing

PowerCurve: Strategy Management

Critical

The lack of a dynamic file or folder structure meant that folders appeared full of reports, even when they were empty. Since the folders couldn’t update to show whether they contained files or not, users were often faced with numerous empty folders scattered throughout the tree structure.

This caused significant confusion, as users assumed they could access a specific category, only to find the folder empty. This led to frustration, wasted time, and annoyance as users had to search elsewhere for a suitable report—without any guarantee that other folders contained the needed files.

Serious

Users pointed out the absence of a search function for locating specific reports, which forced them to rely on memory to remember where a report was stored and navigate to it manually through the tree structure. This process was inefficient and frustrating, particularly for those managing a large number of reports.

Many users suggested adding a “favourite” feature, allowing them to easily access key reports they used regularly, which would significantly improve efficiency and usability.

General

Users expressed a desire to customise reports to display only the information they found useful. Currently, the reports were static PDF visuals that cannot be edited or interacted with to view specific figures, data points, or details within graphs. This limitation made the reports less flexible and less effective for their individual needs.

Experian One:

Dashboard

The users

Originally known as “BI Reporting,” Insights was designed specifically for strategy designers, analysts, and data scientists.

The tool enabled users to monitor strategy performance across various businesses and compare outcomes against benchmark data, providing actionable insights.

Since this was a brand-new product with the potential for multiple links and additional categories, there was a risk of quickly overcrowding the Experian One dashboard. As a result, one of the initial priorities was to streamline navigation for accessing Insights.

Option 1

Since the link to the application would be nested within the Experian One dashboard, it would make sense to create a dedicated section on the dashboard to organise all reports and categories. This approach would provide a centralised location for users to easily access and manage their reports, ensuring a more streamlined and user-friendly experience.

By grouping all reports and categories in a specific section, it would also help prevent clutter on the dashboard and make navigation more intuitive, especially as the number of reports and categories grows over time.

Option 2

Allowing additional paging after the application has been clicked would be a practical solution. This approach would enable users to navigate deeper into specific Insights (BI Reporting) pages without overwhelming the main dashboard or the initial application interface.

For example, users could see the high-level categories, and upon selecting a category, they would be directed to a more detailed page with subcategories or individual reports. This would prevent the page from becoming cluttered with too many categories or reports at once, ensuring a cleaner and more user-friendly experience.

Critical

After doing a bit of digging around, I found out that users could have upto 100 categories, so this could make the dashboard page overcrowded and unusable.

Because of this outcome, I decided Option 1 was the best solution, helping keep the Experian One dashboard as simple as possible.

Journey mapping

Simplify the folder structure

It became evident that I needed to design a more streamlined navigation flow to eliminate the frustration users experienced when navigating through folders, only to find no reports at the end of their journey.

Taking all feedback into account, I created mockups of a few user flows. One of these illustrated the current journey a user would take to open a single report. For security reasons, this flow included logging into the Experian One product, which automatically added a minimum of two additional clicks to the process.

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.
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.

Current flow

Click count:
Between 6-8+ clicks

To access Insights, users must first sign into Experian One. For first-time users, a login is required, but a cookie is stored to prevent the need for repeated logins in the future.

After logging in, users land on the Experian One dashboard, where they can view and access other applications available to them. From here, they can select Insights.

Once the application loads, users are presented with a view of all the folders (servers) and reports they have access to. However, a major issue with this flow is that it’s not clear which folders contain reports. Users may click on a folder, wait for the page to load, and then be met with a “This folder is empty” message. This forces them to navigate back and essentially start over, creating a frustrating and time-consuming experience.

If users do manage to find a report, they can click on it to open the file. After viewing the report, they must close it and return to the folder structure to search for another file, repeating the process.

Suggested flow

Click count:
4 clicks

Similar to the current flow, users still need to go through the Experian One login process unless they have already logged in previously.

Once logged in, users land on the Experian One dashboard, where they can view and access other applications available to them. From here, they can select Insights.

When the application loads, users are now greeted with a homepage displaying groupings that represent the folder titles, with the reports directly visible underneath. I chose to remove the concept of “folders” entirely, as hiding reports within them created unnecessary frustration and complexity for users.

This change removed the need for users to click into folders only to discover they were empty—a common pain point. While this issue might have been less frustrating with better navigation to return to the previous view, the current navigation was so poor that users often resorted to closing the window and starting over.

Although the reduction from six clicks to four may not seem significant, this new approach greatly simplifies the overall navigation. By removing the frustration of endlessly cycling through folders and encountering “This folder is empty” messages, users now have a clearer understanding of where reports are located. The process is far more intuitive, efficient, and user-friendly.

Wireframes:

Report library

Phase 1 design

Previously, the reports were hidden within a tree-structured list. While functional, the navigation process was slow, clunky, and difficult to use efficiently.

For phase one, instead of refining the tree navigation, I opted to display all reports within an open “accordion-style” component. This made it immediately clear which “folders” contained reports, eliminating the need for users to click through multiple layers to find what they needed.

Additionally, I introduced a tab at the top of the page, allowing users to quickly filter down to specific sections, further simplifying navigation and improving usability.

Wireframes:

Open report

Phase 1 design

In phase 1 of the Open Report page design, users could select a report from the Report Library page, and the report would open directly.

If multiple reports were grouped within the same “folder,” these reports were displayed and accessible on the left-hand side of the screen. This approach eliminated the need for users to constantly navigate back and forth to the Report Library to open different reports within the same group. It also reduced load times, as there was no need to reload the entire library when switching between reports in the same folder.

While accessing reports from a different section still required navigating back to the library, I observed that users often preferred to explore the group of reports within the same folder before moving to a different section. This design streamlined the process for users who frequently worked within grouped reports, improving efficiency and usability.

Final design:

Navigation design

The outcome

After reviewing all the feedback I received from the tree jack exercise, it became clear that the navigation could be divided into two main sections: one for viewing and exploring content, and another for creating and scheduling tasks.

I named the sections Discover and Workspace. Clicking on a link in the Discover section, such as ‘Reports’ would take users to their personalised Report Library page (as shown in the previous wireframes). This same structure applied to viewing dashboards, KPIs, and similar items.

The Workspace section, on the other hand, allowed users to create all the items listed under the Discover section. Initially, I placed Workspace at the top of the navigation, but after testing, I realised that users’ primary use case was to view and explore content rather than create it. As a result, I moved Discover to the top to better align with user priorities and improve the overall experience.

Final design:

Landing page

Phase 1 design

As the product began gaining traction and generating excitement within the business, the next step was to give BI Reporting a more engaging and memorable name, along with creating a dedicated landing page for users to navigate to after logging in.

After considering various options, the final decision was to name the product Insights. This name reflects the product’s purpose of providing users with valuable, actionable data in an intuitive and accessible way.

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

Final design:

Report library

Phase 1 design

Experian’s adoption of Tableau for their reports was a significant improvement, as it transformed the reports from static visuals into interactive tools. This change allowed users to engage with the data more effectively, such as hovering over specific data points to view exact figures. This interactivity enhanced the user experience, making the reports more dynamic, insightful, and user-friendly.

User testing

After the design was approved, I created prototypes of the screens, allowing users to navigate through the visuals as if they were interacting with a real application. This approach helped make the product feel more tangible and provided an opportunity to gather valuable feedback as users explored the interface.

We asked users a range of questions, focusing on specific areas of the interface. We also sought their opinions on what they liked about the design and, if given the ‘power’, what changes they would make. Key feedback and suggestions included:

Filtering and sorting options

Users requested the ability to filter and sort reports based on specific criteria, such as dates, customer types, and daily date ranges. This would make it easier to locate relevant reports quickly and efficiently.

Report removal functionality

Users highlighted the need to remove reports from their dashboards. Currently, reports are created and managed by admin staff, who also handle their removal. Providing users with the ability to manage their own reports would improve flexibility and control.

Personalisation of Report Library

Some users asked how reports would be added and created to appear on the Report Library page. This feedback emphasised the need for personalisation features, allowing users to define and manage their own reports rather than relying solely on Admin or Superusers to configure everything.

These insights will help guide the next steps in refining the product, ensuring it meets user needs and expectations while enhancing usability and personalisation.

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

Final design:

Open report

Phase 1 design

To help save the loading time and constantly having to click back and forth between a report, the Report library and back into another report again, I added the ability to navigate with ease between the different areas by designing a scrollable panel that housed the different reports in their folders.

When clicking the accordion, it would open and show the reports available in that section.

When a report was selected, it would appear in the main area, so you can view, and quickly view another report straight away in one or two clicks.

Things to consider

Add the ability to add different permission based profiles such as ‘Superuser’, ‘Edit’ and ‘View-only’.

Create a community area where members can comment, share between other members and create schedulling within the report view.

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
User experience Gamma: Portal evolution

Portal Evolution

Gamma Telecoms’ portal improvements make managing services and orders easier, enhance user experience, and support the move to digital communications like unified solutions and the PSTN switch-off.

My role

On the Portal Evolution project for Gamma, I led the design and development of a next-generation platform aimed at streamlining complex workflows and enhancing user engagement. My focus was on creating intuitive, scalable solutions that empowered users to navigate and manage their tasks with ease.

I collaborated closely with stakeholders to identify pain points and opportunities for improvement, conducting user research and usability testing to gather actionable insights. These findings informed the creation of personas, user journeys, and wireframes, which I shared with cross-functional teams to align on a clear vision. By leveraging a combination of research, design, and iterative problem-solving, I delivered a platform that not only addressed immediate user needs but also provided a foundation for future growth and innovation.

User research Affinity mapping Site mapping Competitor analysis User flows Tree jack Wireframes Visual design Prototyping

Key challenges:

Inconsistent, inefficient navigation

Challenge

The Portal’s overly complex navigation left customers struggling to locate the areas they needed to work on, resulting in frustration, wasted time, and decreased productivity.

This lack of intuitive design not only hindered users from completing tasks efficiently but also contributed to a negative perception of the platform’s usability and reliability.

Solution

I researched into all the sections and pages within the navigation to identify opportunities to separate, group, or merge them. The goal was to simplify the experience and make it easier for customers to find what they needed.

As a result, I created a streamlined experience where users could clearly distinguish between creating and managing orders within a single flow. Previously, these actions were split across separate links, which added unnecessary complexity.

Key challenges:

Fragmented user journeys

Challenge

Users of the Gamma Portal encountered inconsistent user interfaces and disjointed journeys when navigating the platform’s features, including reporting dashboards, ordering processes, and administrative tools.

These inconsistencies made the platform less accessible and efficient, ultimately affecting customer satisfaction and retention.

Solution

I explored specific ways to help customers streamline their ordering processes.

One key area I focused on was reducing friction by encouraging users to self manage within a profile area. This allowed customers to input their information beforehand, so when starting an order, they could simply select a profile. With one click, all the required fields would be automatically pre-filled, making the process faster and more efficient.

To further enhance usability, we added a convenient checkbox at the bottom of the form for users who hadn’t prepopulated their profile. This feature allowed them to transfer the information they entered on the form directly to their profile for future use.

For Channel Partners managing multiple customers, this approach was scalable, as users could easily select the relevant account to streamline their workflow even further.

Goals

Improve navigation across the platform

The navigation was excessively large, with over 147 individual links!! Users found it difficult to identify which links were relevant to their workflows and how to navigate to specific sections that were important to them when needed.

Simplify all journey flows

Throughout many order journeys, there was significant repetition and unnecessary mandatory fields that had to be completed when placing an order. Many customers believed this was a way for Gamma to collect data from them.

Although these input fields were mandatory, the system was unable to validate whether the data entered was correct. As a result, customers realised they could input anything into the fields to proceed to the next page in the flow.

Reduce pressures on support teams by allowing users to self serve on the platform

When users placed an order or needed to make any changes to their accounts, users were required to call the support line so an agent could make the necessary updates.

No matter how small the task, this was still required.

Research:

Site mapping

After gathering extensive feedback from users across the business, first-hand customers, and exploring the platform myself, I decided it would be best to create a site map.

This process allowed me to review all areas of the site and gain a clear overview of its structure. I also made rough notes describing the actions required on each specific page to better understand the purpose and layout.

Could any of the sections within the navigation be simplified or condensed, as there may be duplications throughout? Surely a navigation menu can be streamlined from 147 links!

Research:

Journey flows

Once I had gained more insight into the platform, I began mapping out the journeys users would take to create orders. Each time an order was created across the business, the user had to log in, select an account, and input their details—followed by additional steps specific to the type of order they wanted to make.

Key findings:

Site map

I wen’t through every page on the site, going through the navigation links and made a brief note of what each page required the user to do to complete the relevant task. (Yes! It was quite a job!)

Observations
There are numerous search pages, each requiring you to select a specific account and enter a unique identifier. However, the search functionality lacks clarity—typing in the search field either displays results or leaves the page blank. There’s no 'No results' message or any guidance on what can be searched for, making it unclear what specific information is allowed or expected.
There is inconsistent terminology used across the platform, along with numerous spelling and grammar errors. For example, buttons are labelled inconsistently as 'Continue', 'Next', or 'Proceed'.
The 'Download' button appears on search pages before the user has performed a search, which makes the page feel confusing and unintuitive.
There are numerous instances of unusual UX behaviour and inconsistent styling throughout the platform.

Key findings:

Site map overview

I grouped all the finding together. This gave me a breakdown of the main areas of focus to start improving.

Overview
54 pages involve 'searching'
31 pages involve 'Management'
11 pages involve 'Creating'  
9 pages involve 'Bulk actions'   
9 pages involve 'Notifications'   

It was obvious just by looking at the numbers that areas needed to be streamlined, instead of having a page for every single area, lets have one global feature instead.

By streamlining the navigation, I thought it would be a great idea to see if every duplicate page could be removed, if there were reasons to keep that page, I would see if I could integrate that particular part in the grand design so functionality wasn’t being missed out.

Ideation:

Landing page

The idea was to create a landing page when the user logs in. Users can see their products, services, sites and locations easily.

The navigation has been completely stripped back and simplified:

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

One of the main frustrations when creating a new order was the lack of flexibility to amend or change orders, upgrade services, or even update site details and equipment for each site.

Users had to phone or email to make changes to their account. The same process applied when placing an order: users would endure the laborious task of creating their order, only for it to be emailed to someone in accounts, who would then calculate the costs and send an invoice back to the user.

The whole process felt incredibly outdated and wasn’t very transparent.

Wireframes:

‘My products’ page

I created an area where users could easily self-serve and ‘Manage’ their active products manually, as well as a space where they could easily ‘Create’ a new order if they wanted to add another service.

The screen is split into two sections: the left side displays your active services at each site, while the right side dynamically updates to show specific information about whatever you’ve selected on the left. This could be site details or information about a particular service.

If nothing is selected, the screen provides helpful guidance to indicate that you can interact with the panels on the left.

Edit an active service

If a user selects a specific service, they can see the level of service they have, along with its location.

If the service or product is eligible for an upgrade, users can do this themselves by simply toggling the options on or off. Alternatively, users can also select any relevant bolt-ons for that particular service, with prices clearly highlighted for transparency.

This removes the need to wait for accounts to recalculate everything and get back to the user.

Edit a site

Similarly to selecting a service, the site details could be easily edited or adjusted, and users could view all the products and services active at a particular site.

They could also toggle a service on or off if it was no longer required.

Final design:

‘My products’ page

When the user logs into the Portal, the first thing they see is a breakdown of all the sites that the business has registered on they system.

Sites can be empty if they don’t have any active services. When services are active, you can see them on the page. Users can select the site as a whole or a specific service to update accordingly.

Edit an active service

When a service is selected, you can add bolt-ons or upgrade / downgrade and change settings accordingly based on the service thats been selected.

For transparency, you can see the cost difference for everything at a glance (none of that previous ’email / call’ in to get an updated price).

Edit a site

When a site is selected, you can edit the address and numbers, as well as toggle services on or off – the business has bought the service, so they can distribute the services however they wish. 

Each site has it’s own equipment, the same as the site settings, these can be updated and toggled on / off.

Research:

Creating a new order

I began collecting first-hand information and insights on users’ opinions and behaviours of the current platform – specifically creating a new order as this was a common task that users did on the platform.

I noticed there were lots of similarities and repeated tasks for each flow – could I simplify this step in the journey somehow?

I asked users what they liked and disliked about the journey, while also making general notes. I organised these notes into categories:

Observations Positive Minor Serious Critical

Along the way, I also gathered suggestions on how the platform could be improved moving forward.

User interviews:

Step 1: Contact details

All users would have to start by entering their details – they would have to select their account, along with information such as email address, name, company name, phone and mobile numbers as well as selecting what the nature of the business was.

These fields felt very accessive and they had to be filled in every time users wanted to create a new order – if the details were linked to the account they’ve selected in the first step then surely the other details could be pre-populated based on the selected account.

Serious
Users often failed to provide the correct information in the Customer Contact Details section. This was primarily because they didn’t fully understand the information being requested. In many cases, the technical contact was from a different company and not local to the person completing the form, making it even more challenging to provide accurate details.
Minor
Some users questioned why certain information was being requested and expressed concerns that it might be a data capture exercise by the business.
Positive
Many users found it straighforward to complete the information in the form.

User interviews:

Step 2: Product details

Users then have to select what level of security they want for the product. The options were very jargon heavy and wordy – plus I don’t know what the difference is between each choice, what extra am I paying for?

I also noticed users kept missing the yellow “I confirm” checkbox and then clicked ‘Continue’ to progress with the order. 

This felt like it used to be at the bottom of the page, but more and more information has been added to the page over time like the ‘Promotions’ section.

Serious
Multiple users mentioned that they would add a dummy broadband service in order to qualify for free SIP Trunk Call Manager.
Supporting comments:
The broadband service rental cost is typically lower than the SIP Trunk Call Manager cost because of the cost of DDI's etc, so even if it's not used we do have a couple where they have an existing ethernet circuit and we've put a broadband service in that's not even used just to get the free SIP Trunk Call Manager
Minor
Some users didn’t understand the differences between the Build Types and would rely solely on the information provided in the order form from their account managers.
Positive
A user explained that SIP Trunk Call Manager had been hugely beneficial during COVID, as it allowed customers to manage their own call diverts.

User interviews:

Step 3: Build details

The first yellow warning message at the top of the page say: “It is vital that CPE information is correct”, but lots of people mentioned that they didn’t know what a SBC / IP-PBX was. 

Critical
Some users reported that when they entered a quantity in the Channel Count field and clicked 'Continue', then navigated back to the previous page, the quantity they had entered was automatically changed to 10.
Serious
Users often had to enter a dummy IP address because they didn’t have an IP address available at the time.
Many users would initially enter "2" in the Channel Count field and later go back to update it once the service had been configured.
Some users were unsure about the difference between "SBC in front of an IP-PBX" and "IP-PBX only."
Minor
Similar to the Contact Details page, users didn’t understand why Gamma was requesting such a large amount of information.
Supporting comments:
I've not always been accurate with the information and is hasn't caused me a problem
Observations
Users assumed that the address picker was linked to the 999 emergency details.

User interviews:

Step 4: Service configuration

Users would then have to set up their daily fraud limit by inputting a daily amount of their choice and select what calls they can block from being made.

Minor
Some users commented that the default fraud limits were set too high.
Users were unsure if they could enter multiple email addresses. Despite the form stating 'email address(es)', they were unclear about the correct format to use.
Users were unsure about the purpose of 'Fax (T.38)', but some chose to enable it regardless.
Positive
Many users felt that the Fraud Management section was a valuable tool.
Observations
A few users chose not to enable Fraud Management, as they had already barred Premium Calls and felt there was no need for both.

User interviews:

Step 5: Call manager configuration

This was an optional page, but users would select if they wanted to upgrade their product – however it didn’t tell the user what the cost was for the upgrade.

Critical
Many users chose not to add the service add-ons, feeling they were too expensive and not worth the cost.

User interviews:

Step 6: Number selection

When users could create phone numbers, they could select the area code they needed, along with the quantity they needed and if they needed to be a consecutive amount or just randomly ordered.

Minor
Many users did not understand the meaning of 'Incoming CLI rule'.
Observations
Users felt that 'Consecutive' should be selected by default.

User interviews:

Step 7: Order complete

The last page is literally where the user reads and accepts the terms and conditions.

Once that task is complete, then the order gets sent over to the accounts team for them to review and work out the total costs.

Observations
One user mentioned they would consider performing enhanced SIP testing, but noted that the downside is it takes 24 hours.

Research:

Journey mapping

Create a new SIP Trunk order

After sorting out the dashboard for Portal Evolution, one of the first projects I worked on involved redesigning and defining the user experience for creating a new oders, specifically for SIP Trunk orders (this was because it was one of the larger journeys.

My approach typically involves mapping out the current journey and documenting every interaction required to complete the task, including optional interactions. For example, I note that the user lands on the login page and needs to click on the email address input field to begin entering their email address.

This detailed process allows me to create a clear before-and-after comparison, where a reduction in clicks highlights a simplified and more efficient task, ultimately saving time for the user.

You might notice the term “Between” in the analysis – this accounts for the optional interactions users can make. For instance, the current flow in its simplest form required 52 clicks, while the redesigned flow reduced this to just 15 clicks.

Current click count: Between 52-88 clicks
Suggested click count: Between 15-30 clicks

Final designs:

Profile area

One of the larger pieces of work that fell out of these flows was to create a profile area for users to add or update their details.

Currently, there wasn’t anything like this on the platform – the aim of creating the profile area was for users to enter the details that were asked throughout the ordering flows.

These details could then be prepopulated during the order journeys, reducing the users need to constantly input information over and over again.

Account overview

TBC

Personal information

TBC

Payment methods

TBC

Orders overview

TBC

Notification settings

TBC

Login and security

TBC

Final designs:

Create your order

I noticed when users wanted to create a new order they couldn’t add multiple services to their order.

It was literally a case of having to add all the details and information into the system multiple times, depending on how many services they wanted to place in the order.

Phase 1 – Price transparency

One of the main points I kept hearing from users and team members was the absolute lack of transparancy around the pricing of products, services and add-ons.

When a user selects a service – a ‘reciept style’ section appears showing the price (before, the users only saw the cost days after submitting their order).

We also tried to encourage upselling and add-ons, so if a user added another product to their order, they would save more money.

Phase 1 – Reduced jargon

TBC

Phase 1 – Simplified order journeys

One of the larger pieces of work that fell out of these flows was to create a profile area for users to add or update their details.

Currently, there wasn’t anything like this on the platform – the aim of creating the profile area was for users to enter the details that were asked throughout the ordering flows, these could then be prepopulated during the order creation, reducing the users need to constantly input information over and over again.