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.
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.
Pilea Peperomioides
Mojito (Variegated)
£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.
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.
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.
Experian Insights UX
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.
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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.
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.
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
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.
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!)
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.
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 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:
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.
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.
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
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.
I've not always been accurate with the information and is hasn't caused me a problem
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.
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.
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.
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.
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
Personal information
Payment methods
Orders overview
Notification settings
Login and security
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.
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.
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.
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!)
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.
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 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:
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.
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.
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
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.
I've not always been accurate with the information and is hasn't caused me a problem
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.
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.
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.
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.
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.
HYPE Stock Availability UX
Stock availability
HYPE is a British streetwear brand known for its bold, vibrant designs, statement prints, and casual apparel that blends urban fashion with pop culture influences. I was brought in to give the website a complete overhaul and improve the UX and simplicity across the website.
My role
I started collecting data to highlight any consistent issues and problems that users were experiencing whilst using the website to make purchases.
We had platforms such as Trustpilot and Zendesk which gave a great overview and allowed me to make a list of the most common issues. We also had Google Analytics, but this wasn’t properly embedded so the data was very unreliable.
Whilst looking through the data, there was an overwhelming amount of feedback highlighting the lack of communication about the order status. People also highlighted after entering all the required details and clicking Confirm to make a purchase, the user then got notified that the item was actually out of stock!
So they never got informed what was happening next and some users were being charged. So the plan was to create a much leaner user flow notifying and informing the users what the state of their orders was.
Key challenges:
Make stock availability transparent for users
Challenge
It was apparent that users were being misinformed about stock availability when it came to buying items from the shop.
Customers would get to the end of the payment journey, make a payment, and then find out later that the item was actually not available to buy due to no stock availability.
Solution
I recreated the card component that was already used on the website. The main update for this component was adding a hover state to the image.
Previously, users could only click the item to go through to the item page.
So to save time for customers, when they hovered over the item they were interested in, they would easily see what sizes were available for that item.
This prevented frustration when clicking the item to then find out it wasn’t available in the required size.
Key challenges:
Improve communication around order statuses
Challenge
Another issue around transparency was the communication side of things that customers recieved when placing an order. There wasn’t any, or if there was, it was absolutely minimal.
Customers didn’t know where their order was in the journey, was it being processed? Or out for delivery? – who knew.
Solution
I sat down and looked at the journeys that other online stores used for online orders.
I created timings and events that triggered specific communication methods to help inform the customers of the progression of their order.
This included emails and text messages (if the user agreed to recieve SMS).
Goals
Improve negative feedback on sites like Trustpilot
When I first joined the company, there was quite a lot of negativity towards the business.
I wanted to drastically change this impression of users by making improvements to the site. Hopefully this would create positive feedback.
Make website more accessible and drastically improve UX
TBC
Research:
Data gathering
I started collecting data from Trustpilot and Zendesk to highlight any consistent issues and problems that users were experiencing whilst using the website to make purchases.
Using these platforms gave me a great overview and allowed me to make a list of the most common issues. We also had Google Analytics, but this wasn’t properly embedded so the data was very unreliable.
Whilst looking through the data, there was an overwhelming amount of feedback highlighting the “lack of communication” about the order status. People also highlighted after entering all the required details and clicking ‘Confirm’ to make a purchase, the user then got notified that the item was out of stock!
Users never got informed what was happening next and some users were being charged. So the plan was to create a much leaner user flow notifying and informing the users what the state of their orders was.
Feedback collected from Trustpilot:
Received an email the following day saying my order had been cancelled and I had been refunded due to no stock availability
Research:
Affinity mapping
I created an affinity map to help highlight any pain points identified by the users. I created a date range of 3 months and purposely selected to view reviews with only 1 and 2 stars.
I grouped these problems under common themes and features for the website.
By doing this mapping session it was quite clear that two main problem areas needed to be looked into.
Order and status updates
In a 3 month period, there was a whopping 38 complaints, lots of people mentioned the ‘lack of any communication’ once the customer’s orders have been placed. Not even a ‘Thank you for your order’ email / text.
Some people also mentioned that they wouldn’t even receive a date from the Royal Mail, the order would just arrive.
As a result of this, customers naturally got suspicious thinking HYPE was a scam company. Especially for people who have never purchased anything from them previously.
Stock quantity not updating
24 complaints in the same 3 month period were made about customers placing an order and afterwards being informed that the item was actually out of stock! – Although I didn’t have any involvement with regards to the stock system that was being used, I was able to create ways in which users could be made aware of stock shortages or items that were out of stock.
Doing this would therefore reduce the anger and frustration caused to the user when buying items that were never available to buy in the first place.
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:
Lean checkout journey
It was clear that I needed to work on a more lean checkout process that informed users of any out of stock items. Alongside this, I worked on a selection of order confirmation layouts that would inform users what step their order is at in the delivery process.
Current checkout flow
Click count: 18+
So the current process is that a user selects what item they want to buy, and on the item page you can select the size which is required through a dropdown.
There are two issues with this:
The dropdown in the item page where you’re supposed to select your required size is poor! Yes, it highlights all the sizes, but it doesn’t actually state if they’re in stock or not at that point.
After you select the size you require, it is still a lottery if the size is actually available. The system is supposed to check if the size selected is available, but according to 24+ complaints across 3 months, I would suggest that this logic isn’t working correctly, or working at all!
So a size is selected, the user clicks ‘Add to Cart’ – you then have a bunch of other clicks to make. When you eventually get to see your cart/basket, you click ‘Proceed to Checkout’
When in the Checkout screen, you still have to click another ‘Checkout’ button, to enter all your details: Name, email address, shipping address, check a box if the billing address is the same as the shipping, enter the long card number, name on the card, expiration date and security code.
Once you think you’re finally done, you also get told to enter your mobile number and finally click (punch, smash) the ‘Complete order’ button.
Phew!
So after filling out all of these steps, you then find out that the item is actually out of stock after this step, not to mention you have just been charged for the item, and a lot of people don’t even get any sort of confirmation that the order has gone through. I understand why people get angry!
Proposed checkout flow
Click count: 4
I took a step back and looked at the current process and noticed that every single time a user wanted to buy an item off the website, they had to re-enter all of their details each time.
This got me thinking, why not just enter your details once, save them onto an account area that is dedicated just for you and then when you return to make another purchase in the future, you can select the same details you have used in the past (with an added step of typing your bank cards security code for protection reasons).
So taking the new flow into account, the user hovers over the item they want to buy, an overlay appears at the bottom of the image of the item showing the sizes that are available for that specific item.
If the item is in stock, the user selects the available size which will get added to their basket. They then click the ‘Checkout’ button which allows the user to select a previous payment method that they have stored on their account. Once selected, the user clicks ‘Complete order’.
The user will then instantly receive an email confirmation giving a breakdown of the items that have been purchased, showing the delivery address, and which payment method was used.
Prototype:
Quick add item panel
The first thing I worked on was the ‘item panel’, these run throughout the whole website and are normally placed to encourage users to view whole sections of that specific range of clothing.
Due to lots of feedback that users were getting through the whole checkout process and then finding out after the money had been taken that the item was out of stock, I thought it would be good to give an overview of the sizes that are available from the start, instead of getting through the whole process to then be disappointed that you can’t get your item.
If the size was unavailable, the user can click on the size they require and they enter their email address to be notified at a later date when more stock is available.
(Why not have a click through the final prototype for this feature…)
Research:
Order confirmation
With the item panel in progress, I started researching into some competitor analysis to see what information could be added/removed from the current email correspondence.
Research:
Customer feedback
Previously lots of customers were unhappy with the lack of communication after purchasing an item. Lots of people highlighted once the item had been bought, it wasn’t uncommon for there to be no communication whatsoever.
Some people even mentioned that the only communication they had received was an email to give a review on the product, which hadn’t even been delivered at that point! I experienced this first hand myself, and it definitely adds to the confusion, because you wonder if the order has actually been delivered and I’ve just missed it, or the postman has put it somewhere that I just haven’t seen.
The plan was to reorganise the current logic that was set up and see what could be done to improve to current processes.
Firstly, there wasn’t any logic in place, so it was no wonder that nobody was receiving any emails.
Secondly, when looking into the email settings, I discovered that if users (like myself) have a personalised email address outside of the usual Gmail / Outlook / Yahoo etc, the system would just bounce and never send an email.
So I fixed the settings so everyone should receive an email when making a purchase going forward! That’s a bit of the battle won!
Feedback collected from Trustpilot:
Final design:
Communication flows
I ended up creating a series of emails that would follow one another in the delivery journey of the items which have been purchased by the customer.
I created an email template that showed users the items they’d purchased, I also created a series of icons that highlighted the current step the order was at.
I needed to take into consideration the point when the order is in transit, the user could possibly get a text message or an email from the Royal Mail / DPD etc.
When working to fix problems that have previously arisen by feedback, it is vitally important to try and tick all the boxes, especially if the feedback is as regular as it was at the time of working on this project.
I personally feel it is important to add transparency and friendliness to any sort of communication between company and customer. Making communication feel personable, not just a copy and paste jobby which gets sent to everyone regardless.
So taking user feedback into consideration:
By adding the orange banner under the header gave customers a clear understanding of the step their order is at and what’s next in that process.
When the customer’s order reached the Dispatched state, the email communication changed to show the customer’s tracking number – the user can click on this number to navigate to the relevant page and track their order.
Adding the details of the order allows the customer to browse over these at the earlier stages, to see if there is anything entered incorrectly (another issue that kept getting mentioned), then they have time to update these details through their account area before it is too late.
Stock availability
HYPE is a British streetwear brand known for its bold, vibrant designs, statement prints, and casual apparel that blends urban fashion with pop culture influences. I was brought in to give the website a complete overhaul and improve the UX and simplicity across the website.
My role
I started collecting data to highlight any consistent issues and problems that users were experiencing whilst using the website to make purchases.
We had platforms such as Trustpilot and Zendesk which gave a great overview and allowed me to make a list of the most common issues. We also had Google Analytics, but this wasn’t properly embedded so the data was very unreliable.
Whilst looking through the data, there was an overwhelming amount of feedback highlighting the lack of communication about the order status. People also highlighted after entering all the required details and clicking Confirm to make a purchase, the user then got notified that the item was actually out of stock!
So they never got informed what was happening next and some users were being charged. So the plan was to create a much leaner user flow notifying and informing the users what the state of their orders was.
Key challenges:
Make stock availability transparent for users
Challenge
It was apparent that users were being misinformed about stock availability when it came to buying items from the shop.
Customers would get to the end of the payment journey, make a payment, and then find out later that the item was actually not available to buy due to no stock availability.
Solution
I recreated the card component that was already used on the website. The main update for this component was adding a hover state to the image.
Previously, users could only click the item to go through to the item page.
So to save time for customers, when they hovered over the item they were interested in, they would easily see what sizes were available for that item.
This prevented frustration when clicking the item to then find out it wasn’t available in the required size.
Key challenges:
Improve communication around order statuses
Challenge
Another issue around transparency was the communication side of things that customers recieved when placing an order. There wasn’t any, or if there was, it was absolutely minimal.
Customers didn’t know where their order was in the journey, was it being processed? Or out for delivery? – who knew.
Solution
I sat down and looked at the journeys that other online stores used for online orders.
I created timings and events that triggered specific communication methods to help inform the customers of the progression of their order.
This included emails and text messages (if the user agreed to recieve SMS).
Goals
Improve negative feedback on sites like Trustpilot
When I first joined the company, there was quite a lot of negativity towards the business.
I wanted to drastically change this impression of users by making improvements to the site. Hopefully this would create positive feedback.
Make website more accessible and drastically improve UX
TBC
Research:
Data gathering
I started collecting data from Trustpilot and Zendesk to highlight any consistent issues and problems that users were experiencing whilst using the website to make purchases.
Using these platforms gave me a great overview and allowed me to make a list of the most common issues. We also had Google Analytics, but this wasn’t properly embedded so the data was very unreliable.
Whilst looking through the data, there was an overwhelming amount of feedback highlighting the “lack of communication” about the order status. People also highlighted after entering all the required details and clicking ‘Confirm’ to make a purchase, the user then got notified that the item was out of stock!
Users never got informed what was happening next and some users were being charged. So the plan was to create a much leaner user flow notifying and informing the users what the state of their orders was.
Feedback collected from Trustpilot:
Received an email the following day saying my order had been cancelled and I had been refunded due to no stock availability
Research:
Affinity mapping
I created an affinity map to help highlight any pain points identified by the users. I created a date range of 3 months and purposely selected to view reviews with only 1 and 2 stars.
I grouped these problems under common themes and features for the website.
By doing this mapping session it was quite clear that two main problem areas needed to be looked into.
Order and status updates
In a 3 month period, there was a whopping 38 complaints, lots of people mentioned the ‘lack of any communication’ once the customer’s orders have been placed. Not even a ‘Thank you for your order’ email / text.
Some people also mentioned that they wouldn’t even receive a date from the Royal Mail, the order would just arrive.
As a result of this, customers naturally got suspicious thinking HYPE was a scam company. Especially for people who have never purchased anything from them previously.
Stock quantity not updating
24 complaints in the same 3 month period were made about customers placing an order and afterwards being informed that the item was actually out of stock! – Although I didn’t have any involvement with regards to the stock system that was being used, I was able to create ways in which users could be made aware of stock shortages or items that were out of stock.
Doing this would therefore reduce the anger and frustration caused to the user when buying items that were never available to buy in the first place.
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:
Lean checkout journey
It was clear that I needed to work on a more lean checkout process that informed users of any out of stock items. Alongside this, I worked on a selection of order confirmation layouts that would inform users what step their order is at in the delivery process.
Current checkout flow
Click count: 18+
So the current process is that a user selects what item they want to buy, and on the item page you can select the size which is required through a dropdown.
There are two issues with this:
The dropdown in the item page where you’re supposed to select your required size is poor! Yes, it highlights all the sizes, but it doesn’t actually state if they’re in stock or not at that point.
After you select the size you require, it is still a lottery if the size is actually available. The system is supposed to check if the size selected is available, but according to 24+ complaints across 3 months, I would suggest that this logic isn’t working correctly, or working at all!
So a size is selected, the user clicks ‘Add to Cart’ – you then have a bunch of other clicks to make. When you eventually get to see your cart/basket, you click ‘Proceed to Checkout’
When in the Checkout screen, you still have to click another ‘Checkout’ button, to enter all your details: Name, email address, shipping address, check a box if the billing address is the same as the shipping, enter the long card number, name on the card, expiration date and security code.
Once you think you’re finally done, you also get told to enter your mobile number and finally click (punch, smash) the ‘Complete order’ button.
Phew!
So after filling out all of these steps, you then find out that the item is actually out of stock after this step, not to mention you have just been charged for the item, and a lot of people don’t even get any sort of confirmation that the order has gone through. I understand why people get angry!
Proposed checkout flow
Click count: 4
I took a step back and looked at the current process and noticed that every single time a user wanted to buy an item off the website, they had to re-enter all of their details each time.
This got me thinking, why not just enter your details once, save them onto an account area that is dedicated just for you and then when you return to make another purchase in the future, you can select the same details you have used in the past (with an added step of typing your bank cards security code for protection reasons).
So taking the new flow into account, the user hovers over the item they want to buy, an overlay appears at the bottom of the image of the item showing the sizes that are available for that specific item.
If the item is in stock, the user selects the available size which will get added to their basket. They then click the ‘Checkout’ button which allows the user to select a previous payment method that they have stored on their account. Once selected, the user clicks ‘Complete order’.
The user will then instantly receive an email confirmation giving a breakdown of the items that have been purchased, showing the delivery address, and which payment method was used.
Prototype:
Quick add item panel
The first thing I worked on was the ‘item panel’, these run throughout the whole website and are normally placed to encourage users to view whole sections of that specific range of clothing.
Due to lots of feedback that users were getting through the whole checkout process and then finding out after the money had been taken that the item was out of stock, I thought it would be good to give an overview of the sizes that are available from the start, instead of getting through the whole process to then be disappointed that you can’t get your item.
If the size was unavailable, the user can click on the size they require and they enter their email address to be notified at a later date when more stock is available.
(Why not have a click through the final prototype for this feature…)
Research:
Order confirmation
With the item panel in progress, I started researching into some competitor analysis to see what information could be added/removed from the current email correspondence.
Research:
Customer feedback
Previously lots of customers were unhappy with the lack of communication after purchasing an item. Lots of people highlighted once the item had been bought, it wasn’t uncommon for there to be no communication whatsoever.
Some people even mentioned that the only communication they had received was an email to give a review on the product, which hadn’t even been delivered at that point! I experienced this first hand myself, and it definitely adds to the confusion, because you wonder if the order has actually been delivered and I’ve just missed it, or the postman has put it somewhere that I just haven’t seen.
The plan was to reorganise the current logic that was set up and see what could be done to improve to current processes.
Firstly, there wasn’t any logic in place, so it was no wonder that nobody was receiving any emails.
Secondly, when looking into the email settings, I discovered that if users (like myself) have a personalised email address outside of the usual Gmail / Outlook / Yahoo etc, the system would just bounce and never send an email.
So I fixed the settings so everyone should receive an email when making a purchase going forward! That’s a bit of the battle won!
Feedback collected from Trustpilot:
Final design:
Communication flows
I ended up creating a series of emails that would follow one another in the delivery journey of the items which have been purchased by the customer.
I created an email template that showed users the items they’d purchased, I also created a series of icons that highlighted the current step the order was at.
I needed to take into consideration the point when the order is in transit, the user could possibly get a text message or an email from the Royal Mail / DPD etc.
When working to fix problems that have previously arisen by feedback, it is vitally important to try and tick all the boxes, especially if the feedback is as regular as it was at the time of working on this project.
I personally feel it is important to add transparency and friendliness to any sort of communication between company and customer. Making communication feel personable, not just a copy and paste jobby which gets sent to everyone regardless.
So taking user feedback into consideration:
By adding the orange banner under the header gave customers a clear understanding of the step their order is at and what’s next in that process.
When the customer’s order reached the Dispatched state, the email communication changed to show the customer’s tracking number – the user can click on this number to navigate to the relevant page and track their order.
Adding the details of the order allows the customer to browse over these at the earlier stages, to see if there is anything entered incorrectly (another issue that kept getting mentioned), then they have time to update these details through their account area before it is too late.
STERIS Collect & Deliver
Collect & deliver
One of the big projects that was on our road map for 2018 was to create a mobile app for EPOC / EPOD (Electronic Point of Collection / Electronic Point of Delivery).
My role
The plan for this project was to create a lean app-based solution to help porters in their daily job when collecting and delivering trolleys from a hospital facility to a cleaning warehouse, minimising any defects caused by human error in the process (roughly 80 defects per week!)
To do this, I looked at moving their current process of good ol’ pen and paper to a digital format. The porter would scan the clean trolleys they collected from the cleaning warehouse and drop them off at a hospital to be used, scanning their location on arrival, followed by any dirty trolleys they collected in that trip.
Collect and deliver:
User interface
We already had the process, but it was done with pen and paper or word of mouth between members of staff collecting and delivering trolleys.
User interface:
Login
When the user opens the app, the first thing that they have to do is login with their credentials.
The app login had a 10minute inactivity period before it logged the user out of the app. If the user works for a longer time, the user can tap ‘Remember me’, and it will keep them signed in until they decide to log themselves out.
After logging in, the user is taken to their Task page, where they can set up, or do their daily jobs. – Phase 1, started with Collect and Deliver.
User interface:
Password expired
After some time, for security reasons, we made the user enter a new password.
User interface:
Collect
When drivers collect trolleys, they must scan the location that the trolleys are being collected. They then need to scan the trolley IDs for the waiting trolleys.
If a trolley is scanned that shouldn’t be collected, then the user will be notified to inform them of an error.
User interface:
Hospital contacts
When the driver logs into a device, it populates the contacts page with the staff relevant to the collection and delivery points for that shift.
If something goes wrong during a journey; stuck in traffic, for example, drivers can call the on-site manager, or use the maps to navigate around the traffic to get to their destination quicker.
User interface:
Favourite tasks
The user can edit their tasks depending on what jobs they are doing throughout their shift. This updates the Task page when the user toggles each job on or off.
User interface:
Locations
Most drivers have roughly 3 of 4 delivery points that they drive to throughout their shift. Sometimes there can be ad-hoc requests or Fast Track deliveries that are needed as soon as possible. These will notify the user and take them directly to that location as quickly as possible.
Settings:
Change language
STERIS work over multiple countries, so the app needed the ability to allow users to change language settings.
To do this, users go into Settings, select the Languages area, followed by tapping on their language of choice. Once a selection is made, the app navigates back to the Settings page.
Settings:
Change user
The device is used across multiple users, so we added the ability to switch between accounts quickly. Doing this allowed users to keep their preferred personalised Tasks the same without having to set their Tasks up again every time they logged into that device.
Settings:
Create new password
If the user wanted to change their password, all they have to do is enter their current password, followed by entering and confirming their new password. Once the user has tapped Save, the password will be updated.
Collect & deliver
One of the big projects that was on our road map for 2018 was to create a mobile app for EPOC / EPOD (Electronic Point of Collection / Electronic Point of Delivery).
My role
The plan for this project was to create a lean app-based solution to help porters in their daily job when collecting and delivering trolleys from a hospital facility to a cleaning warehouse, minimising any defects caused by human error in the process (roughly 80 defects per week!)
To do this, I looked at moving their current process of good ol’ pen and paper to a digital format. The porter would scan the clean trolleys they collected from the cleaning warehouse and drop them off at a hospital to be used, scanning their location on arrival, followed by any dirty trolleys they collected in that trip.
Collect & deliver:
User interface
We already had the process, but it was done with pen and paper or word of mouth between members of staff collecting and delivering trolleys.
User interface:
Login
When the user opens the app, the first thing that they have to do is login with their credentials.
The app login had a 10minute inactivity period before it logged the user out of the app. If the user works for a longer time, the user can tap ‘Remember me’, and it will keep them signed in until they decide to log themselves out.
After logging in, the user is taken to their Task page, where they can set up, or do their daily jobs. – Phase 1, started with Collect and Deliver.
User interface:
Password expired
After some time, for security reasons, we made the user enter a new password.
User interface:
Collect
When drivers collect trolleys, they must scan the location that the trolleys are being collected. They then need to scan the trolley IDs for the waiting trolleys.
If a trolley is scanned that shouldn’t be collected, then the user will be notified to inform them of an error.
User interface:
Hospital contacts
When the driver logs into a device, it populates the contacts page with the staff relevant to the collection and delivery points for that shift.
If something goes wrong during a journey; stuck in traffic, for example, drivers can call the on-site manager, or use the maps to navigate around the traffic to get to their destination quicker.
User interface:
Favourite tasks
The user can edit their tasks depending on what jobs they are doing throughout their shift. This updates the Task page when the user toggles each job on or off.
User interface:
Locations
Most drivers have roughly 3 of 4 delivery points that they drive to throughout their shift. Sometimes there can be ad-hoc requests or Fast Track deliveries that are needed as soon as possible. These will notify the user and take them directly to that location as quickly as possible.
Settings:
Change language
STERIS work over multiple countries, so the app needed the ability to allow users to change language settings.
To do this, users go into Settings, select the Languages area, followed by tapping on their language of choice. Once a selection is made, the app navigates back to the Settings page.
Settings:
Change user
The device is used across multiple users, so we added the ability to switch between accounts quickly. Doing this allowed users to keep their preferred personalised Tasks the same without having to set their Tasks up again every time they logged into that device.
Settings:
Create new password
If the user wanted to change their password, all they have to do is enter their current password, followed by entering and confirming their new password. Once the user has tapped Save, the password will be updated.