browser app

From Static PDFs to Dynamic Product Reports & UX Optimization

COMPANY

Cerascreen

ROLE

Product designer

EXPERTISE

UX/UI design

YEAR

2022 - 2023

Project Description

Led the redesign of a browser-based product platform used for test activation and result reporting. The core challenge was low clarity, outdated UI, and limited flexibility due to static PDF reports. I focused on improving usability, cross-platform consistency, and transitioning result reports from static PDFs to dynamic HTML pages to enable personalization, tracking, and scalable product experiences.

Impact

  • Improved report flexibility through dynamic HTML architecture

  • Enabled interaction tracking (previously impossible with PDFs)

  • Reduced cognitive load via clearer hierarchy and status indicators

  • Established consistency across shop and activation platforms

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.

Solution

Solution

Solution

The browser app rework involved simplifying user journeys, modernizing the user interface, and ensuring consistency between the shop and the test activation platform. The redesign focused on providing a cohesive, visually aligned experience to prevent users from feeling lost when switching platforms.

For the results reports, we moved from static PDFs to HTML pages, dramatically improving flexibility. This allowed the design to be responsive across devices, while also enabling personalization for different users. The HTML format offered the ability to include dynamic elements, such as recommended products based on the user's test results, and allowed for more effective tracking of user interactions, which wasnโ€™t possible with PDFs.

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.

Process

I reviewed the existing interface and identified key usability issues:

  • Poor hierarchy in the test table

  • Status information buried in text, making it easy to miss

  • Inconsistent styling compared to the design library

In Figma, I explored redesign concepts that:

  • Introduced status indicators (e.g., download, questionnaire, results) with distinct colors and icons

  • Improved spacing and contrast for better readability

  • Simplified navigation by grouping related actions

Impact

A direct comparison highlights the improvements in hierarchy, clarity, and consistency.

Key changes:

  • Clear status labels with supporting icons

  • Consistent alignment with the design library

  • Enhanced spacing for easier scanning

Results

Although the redesigned UI was not rolled out, this project reinforced several lessons:

  • Even small adjustments in hierarchy and labeling can make complex data tables more usable.

  • Applying a design system consistently is crucial for building trust and coherence across products.

  • Redesign explorations are valuable for uncovering how existing workflows could be simplified, even if implementation is delayed.