Test Result Portal: From Static PDFs to a Living Product Experience
COMPANY
Cerascreen
ROLE
Product Designer
PLATFORM
Web Portal
YEAR
2022 - 2023
Test Result Portal: From Static PDFs to a Living Product Experience
COMPANY
Cerascreen
ROLE
Product Designer
PLATFORM
Web Portal
YEAR
2022 - 2023
Test Result Portal: From Static PDFs to a Living Product Experience
COMPANY
Cerascreen
ROLE
Product Designer
PLATFORM
Web Portal
YEAR
2022 - 2023
Project Description
Users came to this portal after sending a health test sample. They needed to activate their kit, wait for results, and understand what those results meant. The portal did all of this, but barely. The interface was outdated, confusing to navigate, and delivered results as static PDFs that nobody could do anything with. I led the redesign of the portal and the transition from PDF reports to dynamic HTML pages.
Users came to this portal after sending a health test sample. They needed to activate their kit, wait for results, and understand what those results meant. The portal did all of this, but barely. The interface was outdated, confusing to navigate, and delivered results as static PDFs that nobody could do anything with. I led the redesign of the portal and the transition from PDF reports to dynamic HTML pages.
Impact
Dynamic HTML reports replaced static PDFs, enabling responsive design, personalised content, and product recommendations for the first time. Interaction tracking became possible where it was completely impossible with PDFs. Clearer navigation through improved status indicators, hierarchy, and layout. Cross-platform consistency established between the shop and the portal.
The company’s browser platform was mainly used to activate blood tests and access results. While the functionality worked, the UI was outdated, inconsistent with the design system, and confusing to navigate. Tables lacked hierarchy, and actions such as downloading reports or answering questionnaires were hard to find.
The company’s browser platform was mainly used to activate blood tests and access results. While the functionality worked, the UI was outdated, inconsistent with the design system, and confusing to navigate. Tables lacked hierarchy, and actions such as downloading reports or answering questionnaires were hard to find.
The Challenge
The portal was the most important moment in the user journey. Someone had just sent a personal health sample and was waiting to understand their results. The experience needed to feel clear and trustworthy.
Instead, users landed on a cluttered interface where test status was buried in text, actions were hard to find, and the design felt disconnected from the main shop. Results arrived as static PDFs with no guidance, no personalisation, and no way to know how users were engaging with them.
The portal was the most important moment in the user journey. Someone had just sent a personal health sample and was waiting to understand their results. The experience needed to feel clear and trustworthy.
Instead, users landed on a cluttered interface where test status was buried in text, actions were hard to find, and the design felt disconnected from the main shop. Results arrived as static PDFs with no guidance, no personalisation, and no way to know how users were engaging with them.
What I Designed
Portal homepage and navigation
Status information was buried in plain text and easy to miss. I introduced clear status indicators with icons and colour coding, improved spacing and contrast, and grouped related actions together. Users could now scan the page and immediately understand where things stood.
Status information was buried in plain text and easy to miss. I introduced clear status indicators with icons and colour coding, improved spacing and contrast, and grouped related actions together. Users could now scan the page and immediately understand where things stood.
Tests overview
I redesigned the test table so users could group the same test type across multiple orders and track trends over time. This turned a flat list into something that showed progress, which made the product feel more meaningful for repeat users.
I redesigned the test table so users could group the same test type across multiple orders and track trends over time. This turned a flat list into something that showed progress, which made the product feel more meaningful for repeat users.
Result reports: PDF to HTML
This was the most significant change. Static PDFs were replaced with dynamic HTML pages. Reports became responsive across devices, could include personalised product recommendations based on results, and for the first time the team could track how users actually engaged with their reports. That data simply did not exist before.
This was the most significant change. Static PDFs were replaced with dynamic HTML pages. Reports became responsive across devices, could include personalised product recommendations based on results, and for the first time the team could track how users actually engaged with their reports. That data simply did not exist before.
Collaboration
I worked closely with the PM and development team throughout. The HTML report transition required close coordination because it changed the delivery architecture, not just the design. I also aligned the portal with the existing design system so future updates would not require starting from scratch.
I worked closely with the PM and development team throughout. The HTML report transition required close coordination because it changed the delivery architecture, not just the design. I also aligned the portal with the existing design system so future updates would not require starting from scratch.
Results
The HTML report format unlocked capabilities the product had never had. Interaction tracking, personalised recommendations, and responsive design all became possible in one architectural shift.
The portal UI redesign was validated through internal review and usability testing. Full rollout was planned as a next phase after my time at the company.
The HTML report format unlocked capabilities the product had never had. Interaction tracking, personalised recommendations, and responsive design all became possible in one architectural shift.
The portal UI redesign was validated through internal review and usability testing. Full rollout was planned as a next phase after my time at the company.
What I Learned
This project taught me how much the context around a design decision matters. The same UI pattern that feels efficient on a shopping page can feel cold on a page showing someone their health data. I spent a lot of time on language, status labels, and the emotional tone of the page, not just the layout.
The PDF to HTML transition also showed me that infrastructure decisions are design decisions. Changing the format unlocked personalisation, tracking, and responsiveness all at once. Understanding technical constraints early meant I could design with those possibilities from the start.
This project taught me how much the context around a design decision matters. The same UI pattern that feels efficient on a shopping page can feel cold on a page showing someone their health data. I spent a lot of time on language, status labels, and the emotional tone of the page, not just the layout.
The PDF to HTML transition also showed me that infrastructure decisions are design decisions. Changing the format unlocked personalisation, tracking, and responsiveness all at once. Understanding technical constraints early meant I could design with those possibilities from the start.