browser app
Browser app & results reports rework
COMPANY
Cerascreen
ROLE
Product designer
EXPERTISE
UX/UI design
YEAR
2023 - 2024 (parallel to other projects)
Project description
This project involved reworking both the browser app used for test activation and result viewing, as well as redesigning the results reports themselves. The main platform, used for activating blood and other health tests, had an outdated interface that was not aligned with the company’s design library. Additionally, the results reports were previously provided as static PDF files, which were not responsive and lacked personalization.
The goal was to create a consistent, modern experience across the platform and improve the usability of both the browser app and the results reports by transitioning the latter from PDFs to HTML, providing greater flexibility, design options, and responsiveness.
Process
The process began with mapping user flows, focusing on the tasks users needed to complete—such as test activation, result viewing, and sharing. For the results reports, the challenge was to replace static PDFs with dynamic HTML pages. After identifying key areas for improvement and creating draft concepts, I collaborated with backend developers to assess the feasibility of making changes to the test platform and the result reports.
Research & analysis
I conducted research to fully understand the user flows of similar platforms and analyzed where improvements could be made. Competitor analysis played a role in understanding best practices for both test activation and result reporting platforms, ensuring we balanced functionality with ease of use.
Ideation
After mapping the user flows for tasks like activating tests, viewing results, and sharing reports, I created wireframes to visualize simplified journeys. This process involved multiple iterations, with continuous feedback from developers and the health product team, ensuring that each flow was feasible within existing systems.
Design, test & iteration
Once the user flows were finalized, I designed the interface using the established design library to ensure consistency across platforms. Quick wireframes were followed by detailed mockups in Figma, emphasizing modern UI design and intuitive navigation for both the browser app and the newly designed HTML results reports.
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.
Results
The combined rework of the browser app and results reports resulted in significant improvements to both user experience and design flexibility. The browser app saw reduced customer support tickets related to test activation and result viewing due to simplified user flows and better visual alignment with the shop platform.
For the results reports, transitioning to HTML provided users with a more personalized and responsive experience. This change also opened up opportunities for additional content integration, such as product recommendations, while giving us the ability to measure user interactions. These combined improvements led to a more cohesive and user-friendly system, supporting both functional and business goals.