Telstra Health / Dr Foster / NHS

Healthcare / B2B / SaaS

Breathing New Life into Dr Foster's Portal: A Heuristic Resuscitation for Healthcare Analytics

Enhanced

Brand Perception

Improved

User Experience

Unlocked

Business Opportunities

Tablet display showing the Dr. Foster healthcare portal interface with a darkened blue overlay and prominent white 'Portal by dr foster' branding text. The background shows the healthcare dashboard with various clinical tools including patient re-ID and mortality comparison features.
Tablet display showing the Dr. Foster healthcare portal interface with a darkened blue overlay and prominent white 'Portal by dr foster' branding text. The background shows the healthcare dashboard with various clinical tools including patient re-ID and mortality comparison features.

Overview

The Dr. Foster Portal, Telstra Health’s vital healthcare analytics platform, was not just outdated – it was at a critical juncture. Years without updates had left sections broken (like the News feed), information stale, and its Bootstrap 4 design system unmaintained, leading to usability nightmares: truncated alerts, confusing layouts, and lists cluttered with retired products.

Healthcare professionals were abandoning Portal, driving user churn and undermining the platform's value. Simultaneously, user migration of thousands of users to Portal was planned in a bid to centralise Dr Foster's products, demanding completion within 3 months.

This case study demonstrates how strategic UX leadership and cross-functional collaboration, operating under immense pressure, not only revitalised a failing platform but unlocked its potential to become a key business asset, just in time for a pivotal migration.

Before and After views of the Portal Homepage. Drag the slider left to reveal the redesign

The Challenge

The Dr. Foster Portal, while housing essential healthcare data, was rapidly becoming a liability. Its neglected state presented critical usability and business challenges that threatened its long-term viability, particularly ahead of the massive user migration. The core problem was to resuscitate a failing platform and transform it into a user-friendly, reliable asset within an incredibly challenging context.

Key issues:


• Usability Crisis & User Churn: The portal’s outdated design and lack of maintenance had created a deeply frustrating user experience. Key sections were broken (News), information was stale, alerts were confusingly presented, and the UI was cluttered with outdated content. This resulted in significant user churn, with healthcare professionals increasingly abandoning self-service data access in favour of time-consuming and costly consultant interactions. For products like HIP, user adoption was stagnating.


• Outdated and Unmaintained Design System: The underlying Bootstrap 4 design system was not just dated visually; it was unmaintained and unrefined. This resulted in inconsistent patterns, non-optimised layouts, and accessibility issues. Essential elements like alerts were poorly designed with truncated text and confusing placement, directly hindering user comprehension of critical information.


• Imminent Mass User Migration: Telstra Health was on the cusp of migrating thousands of NHS users to the Dr. Foster Portal as part of a strategic centralisation effort. A failing portal would create a disastrous first impression for these new users, jeopardising adoption and the success of the broader centralisation initiative. The login flow itself needed review to ensure NHS applicability and accessibility standards. This migration imposed a strict 3-month absolute deadline for significant improvements.


• Severe Budget Limitations: Ongoing organisational restructuring meant minimal budget allocation for this critical project. Extensive resources or a larger team were simply not options.


• Limited Direct User Access: Due to the urgency and organisational context, direct access to end-user healthcare professionals for usability testing was severely restricted. Creative proxy user research methods were essential.


• Technical Constraint: Ongoing The redesign had to operate within the constraints of the existing Bootstrap 4 codebase. Completely rebuilding or adopting a new technology stack was infeasible within the timeframe and budget. The team would need to recreate and optimise within the existing system.

These constraints demanded a highly strategic, resource-efficient, and impactful UX approach. Failure was not an option given the impending mass migration and the portal's critical role in Telstra Health’s service offerings.

Dr. Foster Healthcare Portal UX evaluation showing 'Key Homepage Issues' with annotated critique of the current design. The interface screenshot is surrounded by callouts identifying problems including poorly optimized navigation, excessive white space, broken news feed, accessibility issues with contrast, and absence of proper branding elements.
Dr. Foster Healthcare Portal UX evaluation showing 'Key Homepage Issues' with annotated critique of the current design. The interface screenshot is surrounded by callouts identifying problems including poorly optimized navigation, excessive white space, broken news feed, accessibility issues with contrast, and absence of proper branding elements.

Key issues of the original homepage design uncovered by Heuristic Analysis & Stakeholder Workshops

Process & Iteration

Faced with a near-impossible challenge – revitalise a failing platform under extreme time, budget, and access constraints, just before a massive user migration – our small, expert team adopted a highly pragmatic and data-driven approach. Our core strategy revolved around leveraging available resources and expertise with maximum efficiency.

Stakeholder Workshops with Consultants: User Insights as Proxy

With no direct access to end-users, we strategically engaged Dr Foster consultants as critical user proxies. These consultants possessed deep domain knowledge and direct experience supporting healthcare professionals using the Portal.

Time was of the essence, so workshops were highly focused and outcome-driven:

Rapid Insight Gathering

Workshops served as condensed user research sessions. Consultants directly articulated user pain points, workflow frustrations, and the tangible impact of the portal’s usability issues on their daily tasks and user adoption (churn). They highlighted specific examples of confusing alerts, broken features (News), and outdated information.

Business Imperative Emphasis

Consultants reinforced the urgent business need for portal revitalisation, emphasising the impending mass migration and the risk of failure if usability issues were not addressed swiftly. This underscored the strategic importance of the redesign beyond just aesthetics.

Opportunity Area Identification

Feedback sessions were specifically structured to identify high-impact, low-resource improvements. We prioritised areas where design changes within the Bootstrap 4 framework could yield maximum usability gains without requiring extensive development time or budget.

Stakeholder workshop findings for the Telstra Health portal redesign, organized in four categories: User Experience, Content & Communication, Functionality & Features, and Branding & Strategy. Each section lists identified issues such as inconsistent design, unclear value proposition, fragmented support features, and weak brand identity. The slide uses a blue background with white content cards and Telstra Health/Dr Foster branding.
Stakeholder workshop findings for the Telstra Health portal redesign, organized in four categories: User Experience, Content & Communication, Functionality & Features, and Branding & Strategy. Each section lists identified issues such as inconsistent design, unclear value proposition, fragmented support features, and weak brand identity. The slide uses a blue background with white content cards and Telstra Health/Dr Foster branding.

Key Highlights from the Portal Stakeholder Workshops

Rigorous Heuristic Analysis: Expert-Driven Data & Efficiency

To maximise efficiency and compensate for the lack of direct user testing, we conducted a comprehensive and multi-faceted heuristic analysis, leveraging our in-house UX expertise and minimising reliance on external resources.

This expert-driven evaluation became our primary data source for design decisions:

Multi-Framework Approach

We didn't just rely on standard Nielsen Norman Group heuristics. We strategically combined 3 powerful sets of criteria for deep insights:


• Nielsen Norman Group (NN/g) Heuristics: Foundation for identifying common usability flaws.


• ISO 9241-210:2019 (Human-Centred Design): Ensured user needs, task requirements, and user-friendliness remained central, even in an expert review.


• POUR Principles (Accessibility): Critical for ensuring inclusivity and addressing potential accessibility barriers within the outdated Bootstrap system.


A combined total of 21 Heuristic criterions, each one was mapped to Telstra Health Design Principles and then to a Telstra Health value - creating a powerful Heuristic framework that was tied to business goals and vision.

Healthcare user interface accessibility documentation showing POUR Accessibility Principles and heuristic evaluation guidelines. The image displays sections on Perceivable Information, Operable User Interface, ISO 9241-110 Ergonomics standards, and Nielsen's Ten Usability Heuristics with detailed bullet points for implementation guidelines.
Healthcare user interface accessibility documentation showing POUR Accessibility Principles and heuristic evaluation guidelines. The image displays sections on Perceivable Information, Operable User Interface, ISO 9241-110 Ergonomics standards, and Nielsen's Ten Usability Heuristics with detailed bullet points for implementation guidelines.
Healthcare user interface accessibility documentation showing POUR Accessibility Principles and heuristic evaluation guidelines. The image displays sections on Perceivable Information, Operable User Interface, ISO 9241-110 Ergonomics standards, and Nielsen's Ten Usability Heuristics with detailed bullet points for implementation guidelines.

Heuristic Analysis - our triple set of criteria mapped to Design Principles and Telstra Health values

Data-Driven Prioritisation

The combined insights from stakeholder workshops and the heuristic analysis provided a prioritised list of usability issues, ranked by potential user impact and feasibility of implementation within constraints. This data-driven approach ensured we focused our limited resources on the most critical improvements. High priority issues included the broken News section (user trust and platform credibility), confusing alert presentation (critical information delivery), and the outdated visual design (user perception and engagement).

Portal redesign prioritization matrix plotting design improvements by Impact (vertical axis) and Effort (horizontal axis). Various tasks like 'Improve Help Section' and 'Information Architecture' are positioned across the quadrants. Right sidebar explains that the design system will use Bootstrap and notes that high-impact items are essential to the redesign plan.
Portal redesign prioritization matrix plotting design improvements by Impact (vertical axis) and Effort (horizontal axis). Various tasks like 'Improve Help Section' and 'Information Architecture' are positioned across the quadrants. Right sidebar explains that the design system will use Bootstrap and notes that high-impact items are essential to the redesign plan.
Portal redesign prioritization matrix plotting design improvements by Impact (vertical axis) and Effort (horizontal axis). Various tasks like 'Improve Help Section' and 'Information Architecture' are positioned across the quadrants. Right sidebar explains that the design system will use Bootstrap and notes that high-impact items are essential to the redesign plan.

Priority Matrix showing the primary opportunities to improve the Portal design

Design System Creation & In-House UX Sessions

Faced with the unmaintained and inconsistent Bootstrap 4 foundation, I had Felipe from my team spearhead the creation of a new design library within the existing framework. This, coupled with in-house UX sessions with me, ensured a strategic and user-centred design system approach:

Brand Alignment

For brand alignment within the design system, Telstra Health core brand colours and typography were integrated, resolving previous visual inconsistencies. To leverage Dr. Foster’s established reputation and equity within the healthcare market, I created a dual-lockup logo for use on the navigation pane.

Dr. Foster Health Information Portal (HIP) dashboard displaying various healthcare analytics tools including Health Information Portal, Early Warning Mortality, InFocus Patient Re-ID, and Mortality Comparator modules. The interface shows news updates and favorites sections with a University Hospitals Birmingham NHS Foundation Trust header.
Dr. Foster Health Information Portal (HIP) dashboard displaying various healthcare analytics tools including Health Information Portal, Early Warning Mortality, InFocus Patient Re-ID, and Mortality Comparator modules. The interface shows news updates and favorites sections with a University Hospitals Birmingham NHS Foundation Trust header.
Dr. Foster Health Information Portal (HIP) dashboard displaying various healthcare analytics tools including Health Information Portal, Early Warning Mortality, InFocus Patient Re-ID, and Mortality Comparator modules. The interface shows news updates and favorites sections with a University Hospitals Birmingham NHS Foundation Trust header.

The redesigned Portal homepage with dual-lockup logo and updated colour palette

Pattern Establishment

Defining and establishing new UI patterns for navigation, alerts, forms, and data presentation, ensuring consistency and improved usability across the portal. These patterns were optimised within the Bootstrap framework for efficient implementation.

Portal Design System documentation page showing UI patterns for navigation and alerts. The left side displays alert anatomy with labeled components, while the right side shows header anatomy and examples. The page has a blue background with white content cards and includes Dr. Foster Health branding.
Portal Design System documentation page showing UI patterns for navigation and alerts. The left side displays alert anatomy with labeled components, while the right side shows header anatomy and examples. The page has a blue background with white content cards and includes Dr. Foster Health branding.
Portal Design System documentation page showing UI patterns for navigation and alerts. The left side displays alert anatomy with labeled components, while the right side shows header anatomy and examples. The page has a blue background with white content cards and includes Dr. Foster Health branding.

Established UI patterns for Alerts and Headers as part of the new Design System

Mental Models & Card-Based Layout

Analysing NHS digital tooling, particularly recognising the prevalence and user familiarity with Microsoft 365's card-based app presentation. This informed the decision to adopt a card-based layout for the Dr. Foster Portal homepage, creating a familiar and intuitive starting point for NHS users. This layout also provided future-proofing and scalability for adding new products.

Design system documentation for a healthcare portal showing product card structure. Left side displays Microsoft 365 app grid with examples like Bookings and Calendar, while right side shows a product card anatomy diagram with labeled components. Bottom section explains Jakob's Law and mental models in UI design.
Design system documentation for a healthcare portal showing product card structure. Left side displays Microsoft 365 app grid with examples like Bookings and Calendar, while right side shows a product card anatomy diagram with labeled components. Bottom section explains Jakob's Law and mental models in UI design.
Design system documentation for a healthcare portal showing product card structure. Left side displays Microsoft 365 app grid with examples like Bookings and Calendar, while right side shows a product card anatomy diagram with labeled components. Bottom section explains Jakob's Law and mental models in UI design.

Utilising Jakob's Law and NHS Mental Models to inform the Portal Product Card designs

Reuse and Recycling of Design Flows: Login

Strategically deciding to recycle the proven and NHS-compliant login flow from previous Helix products. This minimised design and development time, leveraged prior user testing validation, and ensured immediate NHS regulatory compliance for the critical login process.

Screenshot of the Telstra Health UK Portal interface showing multiple login screens for healthcare platforms including Helix and Dr Foster, alongside a welcome section describing key features like Performance Metrics, Early Warning Mortality Tool, and Patient Re-identification tools. The design uses blue and teal color scheme.
Screenshot of the Telstra Health UK Portal interface showing multiple login screens for healthcare platforms including Helix and Dr Foster, alongside a welcome section describing key features like Performance Metrics, Early Warning Mortality Tool, and Patient Re-identification tools. The design uses blue and teal color scheme.
Screenshot of the Telstra Health UK Portal interface showing multiple login screens for healthcare platforms including Helix and Dr Foster, alongside a welcome section describing key features like Performance Metrics, Early Warning Mortality Tool, and Patient Re-identification tools. The design uses blue and teal color scheme.

Side by side comparison of Portal's reuse of the Helix log in

Solution & Impact

Operating under immense pressure and severe limitations, the Dr. Foster Portal redesign delivered a remarkable transformation, exceeding initial expectations and turning a potential crisis into a business opportunity. The design philosophy centred on strategic cleanup, simplification, targeted UX enhancements, and design system creation within constraints, all meticulously implemented within the existing Bootstrap 4 framework.

The solution demonstrably delivered:

Dramatically Improved Usability & Navigation

Streamlined navigation, card-based homepage layout, improved information hierarchy, clearer content layouts, and a prominent login button directly addressed key usability pain points identified in the heuristic analysis and stakeholder feedback. The redesigned alerts and integrated help/support areas significantly enhanced critical information delivery and user self-service capabilities.

Log In Screen Before and After redesign. Drag the slider left to reveal the redesign

Modern and Scalable UX

Felipe’s creation of the new design library within Bootstrap 4 was a critical achievement. It delivered a design that looked and felt significantly more modern, user-friendly, and scalable for future product additions, without requiring a costly and time-consuming complete rebuild. This demonstrated resourcefulness, technical expertise, and strategic design system thinking in leveraging existing assets for maximum impact within constraints.

Portal Bootstrap 4 Design System documentation showing button styles, input groups and form components. The page displays various button examples including primary, secondary, success buttons in different styles (standard and outline), along with form control examples and input group demonstrations.
Portal Bootstrap 4 Design System documentation showing button styles, input groups and form components. The page displays various button examples including primary, secondary, success buttons in different styles (standard and outline), along with form control examples and input group demonstrations.
Portal Bootstrap 4 Design System documentation showing button styles, input groups and form components. The page displays various button examples including primary, secondary, success buttons in different styles (standard and outline), along with form control examples and input group demonstrations.

New components and guidance as part of the updated Design System

Positive Qualitative Validation & Enhanced Business Potential

While quantitative metrics are still being tracked post-launch, the overwhelmingly positive qualitative feedback from consultants and stakeholders provided immediate validation of the redesign's success. Crucially, Product Lead Hazel Tomlin’s statement – that the redesign unlocked the portal as an engagement and marketing tool, transforming it from a barrier to a business asset – demonstrates the profound strategic impact of the UX transformation.

Successfully Mitigated Migration Risk

By rapidly addressing critical usability issues and modernising the platform just before the mass user migration, the redesign significantly mitigated the risk of a negative first impression and potential user abandonment by thousands of new NHS users. This directly supported the success of the strategic centralisation initiative and protected Telstra Health's investment.

Detailed view of the Telstra Health UK and Dr Foster healthcare portal interfaces showing multiple screens with healthcare analytics tools. Features include performance metrics, early warning mortality tools, patient re-identification services, and InFocus patient re-ID functionality. The interface displays dashboards with recent diagnoses data, news sections, and contact information with support options.
Detailed view of the Telstra Health UK and Dr Foster healthcare portal interfaces showing multiple screens with healthcare analytics tools. Features include performance metrics, early warning mortality tools, patient re-identification services, and InFocus patient re-ID functionality. The interface displays dashboards with recent diagnoses data, news sections, and contact information with support options.

Multi-page views of Dr Foster Portal

Achieving Against the Odds

The Dr. Foster Portal redesign showcases the effectiveness of a data-driven UX transformation, even under significant constraints. By strategically combining rigorous heuristic analysis with targeted stakeholder workshops, we delivered a redesigned platform that garnered overwhelmingly positive feedback, enhanced user perception, and unlocked new business opportunities. This project demonstrates the value of a structured, data-informed UX approach and the power of expert-driven evaluation in achieving impactful results, even when direct user access is limited. The overwhelmingly positive consultant feedback and the newly unlocked business potential serve as strong validation of the redesign's success and the strategic UX leadership applied to this project.

"I appreciated Mike's commitment in understanding and exploring the problem space. I felt immediately supported and reassured that we had a professional design team on the job. It was also clear that he cared about the outcome and had established a robust design triage and development process within his team.

The new UI direction is setting the stage for more to come. We will be using Portal more to sell our products and it's important that our front door reflects our expertise, credibility and professionalism. This now lets us explore…"

Hazel Tomlin

Product Lead, Telstra Health

Value Articulation

While quantifiable metrics are still to be gathered, the overwhelmingly positive feedback from consultants and stakeholders provides significant validation of the redesign's value. This feedback directly translates to:

Enhanced Brand Perception: The "more professional look" directly improves the perceived credibility and expertise of Telstra Health's offerings in the market. For a client-facing analytics portal, this "front door" perception is crucial for building trust and driving business.

Improved User Experience (as perceived by proxies): Consultants, acting as user proxies, confirmed a significantly improved user experience ("looks great when I log in now," "massive improvement"). This suggests increased user satisfaction and potential for more effective platform utilisation.

Unlocked Business Opportunities: The explicit statement from the Product Lead that the redesign now allows them to leverage the portal for "engagement and marketing" signifies a tangible business value creation, opening up new avenues for growth and customer interaction that were previously blocked by the outdated UI.

While hard metrics are ideal, in this case, the strong and consistent positive qualitative feedback from key stakeholders, particularly regarding business opportunities, provides compelling evidence of the redesign's success and its value to Telstra Health.

Skills Used

Design Leadership / UX Design / Information Architecture / Data-Driven Design / Expert Heuristic Analysis / Stakeholder Management / Visual Design / Design System Creation / Rapid Iteration / Accessibility / Strategic Business Alignment

© 2025 Michael J. Preston

Matlock, Derbyshire UK