Hover to visualize internal liver anatomy.

A step up from the stock illustration PocketHealth was using, this visual had the honour of being nicknamed “juicy” by PocketHealth’s founding designer.

All PocketHealth employees receive a Lego Mini figure version of themselves

Biliary system illustration previewed in Figma UI framework

Working as PocketHealth’s First Biomedical Communicator

Medical diagram of the liver showing the hepatic portal vein, hepatic artery, hepatic veins, hepatic duct, gallbladder, inferior vena cava, and aorta.

Labeled illustration of the hepatobiliary and pancreatic systems, showing the liver, gallbladder, bile ducts, pancreas, pancreatic duct, stomach, duodenum, and bile.

Labeled medical illustration of the biliary system showing the liver, gallbladder, bile ducts, pancreas, stomach, and duodenum.

Following completion of my MSc in Biomedical Communications at the University of Toronto, I joined PocketHealth as the company’s first Biomedical Communicator. My role focused on making radiology information more understandable and accessible for patients through medical illustration, visual systems design, and patient-centered communication.

Working closely with designers, engineers, and leadership, I developed over 300 explanatory medical diagrams and helped shape the communication language of PocketHealth’s medical visualization experience.

Illustration of the liver and gallbladder labeled with the inferior vena cava, aorta, hepatic artery, portal vein, and common bile duct.

View on desktop for best experience

Illustration of the human urinary system with kidneys, ureters, and bladder displayed on a computer screen beside a LEGO figure holding a red cup.

Communication Challenge

PocketHealth had been using images from Servier Medical Art (a free online stock illustration bank) sometimes without labels. There is very little information conveyed here.

PocketHealth’s Report Reader help’s patients better understand their healthcare reports independently.

Originally, the system relied on only tagged medical terminology connected to written definitions. While useful, terminology alone often lacked the visual context necessary for patients to fully understand anatomical structures, imaging planes, or report findings.

In 2024, PocketHealth expanded the platform with AI-assisted organ visualization features designed to highlight anatomical regions within radiology scans. Even with organs highlighted, radiology scan highlights alone are something most in the general public cannot interpret. The platform required consistent educational visuals that would bridge that gap clearly within a highly constrained digital interface while working seamlessly with the scan and term tagging system.

The project required developing an entire visual communication system that could:

integrate into PocketHealth’s existing product ecosystem
remain understandable for non-medical audiences
maintain anatomical accuracy
scale efficiently across hundreds of future illustrations
function clearly across mobile and desktop environments

At the start of the project, very little infrastructure existed for how these visuals should be designed, standardized, or implemented.

Constraints

Health portal displaying a normal gallbladder CT report and labeled gallbladder anatomy diagram.

Desktop UI for PocketHealth’s MyCare Navigator in 2023

PocketHealth had previously had a junior designer take a stab at medical visuals, resulting in the gallbladder visual to the right of this screen grab. I could see it was difficult to interpret and needed a better and more accessible visual language. For example, it is not clear that the gallbladder sits under the liver which it does in reality since the designer illustrated it to sit on top of a faded liver. Visuals like these can create confusion for patients when visiting and discussing results with doctors.

The illustrations needed to operate within several major constraints:

Small mobile-first viewing areas
Variable levels of patient health literacy
Strict anatomical accuracy requirements
Consistent visual language across hundreds of illustrations
Compatibility with engineering and product workflows
Integration into PocketHealth’s existing UI system
Fast iteration and scalable production

In many cases, the illustrations also needed to communicate anatomy within compact four-by-four inch interface regions while remaining readable on both desktop and mobile devices.

Jotting notes down regarding illustration guidelines for reproducibility was essential, not just so PocketHealth has this information but also so that anyone can reproduce the style of the illustrations as needed to follow the established brand.

Notes on Figma to help colleagues understand proper medical communications systems and the goals of the visuals

Slide titled “Medical Illustration Principles” outlining medical accuracy, communication practices, visual appeal, long-term value for PocketHealth, and applications including animations and interactive media.

Diagram showing text label styles, colored category and quadrant labels, arrow and callout examples, and leader line symbols.

Building a Visual System

Slide titled “Colour Guidelines” outlining color, gradient, vessel, duct, organ stroke, and 300×300 pixel artboard specifications.

Rather than approaching each illustration independently, I focused on building reusable visual systems that could scale across the platform.

This included developing:

standardized label systems
reusable leader line components
anatomical orientation systems
colour and hierarchy guidelines
modular illustration workflows
reusable UI-compatible anatomy assets

The goal was to ensure future illustrations could remain visually consistent while supporting rapid iteration as the product expanded.

Color-coded text label style guide showing base, large, surface, sub, category, opposite, and quadrant labels.

Visual system was created as components in Figma to allow for easy swapping as new illustrations were made.

I learned Figma to be able to create the visual system for PocketHealth’s medical visuals. I used PocketHealth’s brand colours for black colouring since they had an established black brand colour.

View the Figma Process & Reference Board for the First Organ Visuals

Solving the Orientation Problem

Minimal dark-blue line drawing of a faceless human figure standing against a black background

Dark blue outline of a standing human figure on a black background

Various sketches for the orientation figure. Procreate.

One of the first major tasks involved developing patient-friendly orientation illustrations capable of explaining radiological imaging planes such as sagittal, coronal, and axial sections.

Initial freehand vector sketches proved difficult to scale consistently, particularly when working with complex isometric body perspectives. Because future illustrations would also require accurate anatomical positioning for organs and structures throughout the body, I shifted toward a hybrid 3D-assisted workflow.

Drawing from prior experience in Maya, I independently learned Blender in order to build a reusable anatomical reference pipeline using publicly available anatomical datasets.

Using these models, I:

positioned the body in isometric perspectives
constructed representative sectional imaging planes
visualized anatomical cuts spatially
generated reusable perspective references
translated the results back into clean vector illustrations

This workflow dramatically improved both consistency and scalability while allowing the illustrations to align more naturally with PocketHealth’s digital product environment.

Grayscale 3D modeling scene showing a mannequin surrounded by intersecting planes on a Blender grid.

Illustration of the human pelvis and lower abdominal organs with color-coded blood vessels and nerves

3D anatomical model showing the human digestive system, including the liver, stomach, small intestine, and large intestine

Using 3D datasets was a breakthrough for the workflow, especially since this model included all organs in their relatively accurate positions to each other. Blender. Sketches done in Procreate.

Dataset sourced from: https://lifesciencedb.jp/bp3d/

Medical illustration showing AP diameter measured on an axial cross-section of the torso, with the measurement arrow extending from the spine to the sternum.

3D models made illustrations such as AP diameter especially accurate and efficient to make.

Illustrations sketches in Procreate, vectorized in illustrator, imported to Figma as svgs where they were then labeled using the visual system I developed and exported in 4×4 panels. Illustrations were handed off to engineers for upload in batches.

Product Integration

The final illustrations were integrated directly into PocketHealth’s Report Reader platform to support patient education alongside radiology findings.

These visuals helped provide anatomical context for structures, directional terminology, organs, and imaging concepts directly within the patient experience.

Illustration of a human body with a horizontal imaging plane and an arrow showing bottom-to-top sectioning.

Collage of mobile anatomy reference pages explaining directional terms, anatomical planes, body quadrants, ipsilateral and contralateral sides, and AP diameter.

Anatomical directional terms infographic showing medial versus lateral, proximal versus distal, superior versus inferior, and anterior versus posterior, with corresponding mobile webpage examples.

All visuals were designed with PocketHealth’s UI in mind, as they were constantly tested and iterated in Figma, using frames matching the existing UI exactly to ensure proper readability and aesthetic appeal within PocketHealth’s MyCare Navigator interface on the phone and on desktop.

Hover to compare healthy and cirrhotic liver anatomy.

Hover to reveal bladder internal anatomy.

Medical illustration of a cirrhotic liver with fibrosis, scarring, and a hypertensive portal vein.

Outcome

“Brendan’s illustrations were quite eye-catching and communicative - helping PocketHealth stand out as more patient-centric and visually engaging. His work consistently resonated with both patients and internal teams, and we were proud to showcase it in demos as a key example of how we translate complex ideas into accessible, meaningful content.”

— Rishi Nayyar, CEO of PocketHealth

The project resulted in the development of a scalable visual communication infrastructure for PocketHealth’s patient education platform. The work established reusable systems and workflows that could support future product expansion, interdisciplinary collaboration, and more accessible healthcare communication experiences.

Exactly 301 reusable assets were made, including use in video advertisements for PocketHealth, in an interactive integrated body atlas, and public-facing visuals during demos at events. This work furthered PocketHealth’s goal in putting patients first by translating complex ideas and what they need the most to better understand their health, ultimately having more autonomy in decisions over their care.

All illustrations were later compiled with the engineers across a three-day project towards creating PocketHealth’s first centralized data visualization. All of the patient’s medical reports and imaging can be viewed using the Interactive Body Atlas, including internal organ systems and various disease states for organs such as cirrhosis for the liver. B. Lazar & PH Engineer Team, February 2025.

Labeled anatomical illustration of the liver, gallbladder, inferior vena cava, aorta, hepatic artery, portal vein, and common bile duct.

Illustration of a red wax seal stamped onto a rolled brown parchment scroll

Medical illustration of the human urinary system showing the kidneys, ureters, bladder, urethra, adrenal gland, and renal blood vessels

Medical illustration showing back-to-front body sectioning with sagittal, coronal, and transverse planes.

Anatomical diagram showing proximal and distal directions on the right arm and leg, with right and left sides labeled.

Medical illustration comparing unilateral and bilateral body involvement in anterior (front) views, with one-sided and both-sided areas highlighted.

Anatomical diagram showing the coronal, axial, and sagittal planes intersecting a human body

Labeled anatomical illustration of the liver, gallbladder, hepatic artery, portal vein, common bile duct, inferior vena cava, and aorta.

Anatomical diagram of the liver showing the inferior vena cava, hepatic vein, aorta, hepatic artery, hepatic portal vein, hepatic duct, and gallbladder.

Labeled anatomical diagram of the liver, gallbladder, bile ducts, pancreas, stomach, and duodenum

Anatomical illustration of the spleen showing the splenic artery and splenic vein, with the spleen location highlighted on a human silhouette.

Labeled anatomical diagram of the stomach showing the esophagus, cardia, fundus, body, antrum, pylorus, and duodenum.

Labeled anatomical diagram of the pancreas, gallbladder, bile ducts, pancreatic ducts, stomach, and duodenum

Anatomical diagram of the biliary system showing the liver, gallbladder, hepatic duct, cystic duct, common bile duct, stomach, and duodenum.

Labeled illustration of the human digestive system showing the stomach, large and small intestines, appendix, rectum, and anus.

Illustrated digestive system showing the large intestine, small intestine (ileum), and terminal ileum.

Illustrated diagram of the human digestive system labeling the stomach, duodenum, colon, jejunum, ileum, and rectum.

Medical illustration comparing a healthy brain with a midline shift, showing the brain’s central structures displaced to one side.

Medical illustration comparing a healthy brain with extra-axial fluid collection compressing brain tissue.

Labeled anatomical diagram of the kidneys showing the adrenal gland, renal artery and vein, renal pelvis, renal pyramids, ureter, aorta, inferior vena cava, and urine.

Labeled illustration of the urinary system showing the kidneys, adrenal gland, ureters, bladder, urethra, renal pelvis, aorta, and inferior vena cava.

Labeled cross-section of a kidney showing the renal cortex, renal capsule, renal pyramids, renal pelvis, and ureter.

Labeled anatomical diagram of the urinary bladder, ureters, and urethra

Labeled anatomical diagram of the urinary bladder showing the ureters, bladder wall, detrusor muscle, ureteral opening, urine, and urethra.

Illustration of the spine showing vertebrae and intervertebral discs

Anatomical illustration of the lumbar spine showing thoracic vertebrae, lumbar vertebrae L1 through L5, sacrum, and pelvis.

Illustration of the human pelvis and hip joints, labeling the pelvis, hip joint, and femur.

Anatomical illustration of the shoulder joint showing the humerus, shoulder blade, and articular cartilage.

Illustration of the femur showing a magnified cross-section of bone marrow

Medical illustration of an osteoporotic long bone with a fracture and magnified porous bone marrow

Illustrated anatomy diagram of the lungs showing the trachea, left lung, left hilum, pulmonary artery, left bronchus, and pulmonary vein.

Illustration of venous blood returning from body tissue to the heart through a vein, with a labeled heart and magnified blood vessel cross-section.

Labeled anatomical illustration of the heart showing the superior and inferior vena cava, aortic arch, pulmonary arteries and veins, right and left coronary arteries, and descending aorta.

Illustration of a human heart and artery showing blood leaving the heart and entering surrounding tissue.

Anatomical diagram labeling the aorta, heart, brachiocephalic artery, right and left common carotid arteries, and right and left subclavian arteries.

Annotated illustration of the aorta, showing the aortic arch, ascending aorta, descending aorta, abdominal aorta, heart, lungs, liver, and right kidney.

Medical diagram showing an aortic aneurysm in the abdominal aorta, with the heart, aortic arch, and aorta labeled.

Illustration of the four breast density categories: A entirely fatty, B scattered fibroglandular density, C heterogeneously dense, and D extremely dense breast tissue.

Labeled cross-section diagram of breast anatomy showing the pectoral muscle, rib, adipose tissue, fibroglandular tissue, lactiferous ducts, nipple, and fibrous tissue.

Labeled anatomical diagram of the human chest showing the lungs, heart, trachea, esophagus, aorta, subclavian artery, common carotid artery, and diaphragm.

Labeled diagram of the human digestive system showing the liver, stomach, spleen, pancreas, gallbladder, large intestine, small intestine, and appendix.

Medical illustration of the abdominal aorta and major branches supplying the liver, stomach, spleen, and kidneys.