Banner 2.png

Medical Systems


The project describes a user-centered design exploration, including user needs assessment and iterative prototyping for interpreting lab test results.

Time: 04 / 2020

Work: Product Design & UX Research

Project Type: Research


Personal clinical data such as laboratory test results are increasingly being made available to patients via web-based patient portals. However, professional lab test results are presented via portals in a format

that is hard for patients to interpret and use. Furthermore, the indications of test results may vary among patients with different personal characteristics and medical contexts.

Close Up.png

The Product

The final product gives users the ability to quickly have insight into recent test results, saved medical terms and additional information based on their demographics. 
Under the "Your Results" Tab users can find a list of 

all results while giving access to more insight. We utilized graphical representations, meaningful plain language, and takeaway messages to construct a new presentation interface of lab test results.



During the whole project, sketches and wireframes helped me and the team to test various layouts as well as testing the usability and content strategy. For me wireframing was an important step to figure out the 

best layouts and clearly define the requirements on each section of the product. Iterating fast and efficient was a vital part in coming up with the best solution.


Color System

Three colors (red, yellow, and green) in gradients were used in conjunction with words (e.g., “high”, “low”, and “optimal”) and takeaway messages (e.g., “your result is good”) to provide an intuitive view of the

normality of each lab value. For all the base colors we were using a classic boilerplate to keep the product as clean as possible.


Component Library

The component library was an important tool during the process. To iterate fast and efficient a design system helped us to swap out individual components to quickly asses adjustments in the final design.

Throughout the design system we always had to keep in mind on how design decisions would reflect on the decision of a user.



To further augment patient’s understanding of the borderline values that are slightly outside of the normal range, we included a pair of red arrows and its explanation (e.g., “Doctors are not concerned until here”)

on each result chart to indicate how far outside of the standard reference. This visual aid has proven to be effective in reducing patients’ perceived urgency of abnormal results.

Group 214.png

Medical Terms

For additional clarification users can save medical terms. For each saved term, the user can favorite, annotate (e.g., adding a comment), or simply delete. All comments and annotations can be stored on the

interface for later viewing by patients or clinicians. Favorited terms are always displayed on top and other saved terms can be easily searched or sorted. 

Medical Terms.png

AI Support

The “Ask Questions” section was designed to provide personalized information support tailored to the patient’s demographics, medical context, and test results. 

Information related to these three questions can be retrieved in real-time from reputable sources, such as healthcare organizations, online healthcare forums and medical literature databases

Ask Questions.png


Under the Providers section users have the ability so select an individual partner to upload their results into the system. Throughout the experience the Name of the test, the result date as well as values are needed.

A "Having Trouble" CTA provides users additional guidance and can be clicked for further information on the test results and the set up. 

Add Result.png



Google Marker

002 - Product Design & UX Research

Google Marker is a digital experience for students and the facility management to simplify the reporting, filing and management process of damages and equipment issues on the campus through a cross-platform system