MPS Reference - Scott Nichols

The style guide

One visual system for a rare, complex disease

Every page of MPS Reference is built from four parts. Each one has a job beyond looking good: helping a clinician find, compare and trust what they're reading.

Halftone photographyGrayscale portraits under a translucent magenta panel keep real people in the frame without competing with the data.

A clinical paletteNavy #002E56 anchors every page, with magenta, red and pink for emphasis and calls to action.

Nine specialties, nine iconsEach specialty, from cardiology to pulmonology, has its own icon and color, so readers can follow their field across the site.

Two typefaces, two jobsKnockout for headlines; Chaparral Pro Bold Italic for callouts, chart titles and the clinical voice.

The MPS Reference style guide: a halftone hero photo under a magenta text panel, the color palette, nine medical specialties each with an icon and color, and the headline and subhead type specimens.

01 · The problem

Critical rare disease data was buried in text and tables.

Clinicians couldn't see the pattern for the paragraphs.

Clinicians, researchers and caregivers needed a reliable way to interpret mucopolysaccharidosis (MPS) data, but the existing reference material was fragmented, text-heavy and hard to scan. MPS is often mistaken for other conditions, so this data is consulted in clinical and research settings where reading it slowly, or wrongly, delays a diagnosis.

02 · Role and constraints

Accuracy first, aesthetics second, for a small audience that can't afford to misread.

What I owned

The site's visual and UX design: the style guide, information hierarchy, data visualization standards, responsive behavior and a visual language built for clarity and contrast. I worked with subject matter experts on clinical accuracy and with developers on feasibility as new data sets were added.

Highly specialized content

MPS data is complex, unfamiliar to non-specialists and easy to misread. Every visual decision had to protect the meaning of the data.

A small, expert audience

A narrow but critical group of readers. The design had to respect expert workflows while staying approachable for caregivers.

Dense data on every device

Desktop research sessions had to survive on a phone, where screen space and attention are both limited.

03 · Key decisions

Three questions shaped the system.

How do you keep charts from needing instructions?

I wrote one set of rules for every chart and table: chart titles in Chaparral Pro Bold Italic, navy for the primary plot and red for the secondary, a near-white chart background and gray axis labels. Once someone learns to read one chart, they can read the rest.

Learn to read one chart, and you can read them all.

The tables and graphs standards: a sample bar chart with its title, label and footnote styles, the primary and secondary plot colors, chart background and axis label colors, and a sample table with a magenta header.

Should charts support the text, or be the interface?

The charts are the interface. Every patient stays a dot, the MPS percentile curves are the reference, and the gap between them is the finding. A callout below states the clinical takeaway in one sentence.

The deviation reads at a glance, with no statistics required.

Boys and girls growth charts for MPS IV: red dots for individual patients, navy percentile curves, a trendline well below typical growth, and a callout reading Young patients who fall off the growth curve should raise your suspicion of MPS.

Lists of symptoms, or a body you can point at?

A body you can point at. Readers pick a system, from musculoskeletal to neurologic, and the page opens that system's manifestations with clinical images, so they drill into detail only when they need it.

Pattern recognition comes before terminology.

04 · The solution

One style guide, carried through every page.

The coordinated chronic care page: the geneticist at the center of a hub of specialists, each drawn with its specialty icon, beside a callout box and an assessment schedule table with a magenta header. — Coordinated care drawn as a hub of specialty icons, with the geneticist at the center. The callout and table follow the guide's type and color rules.

The systems page: a patient illustration showing the skeleton and organs on a navy band, an orange Uncover the signs and symptoms button, then a table of disorders commonly confused with MPS and a callout about early referral. — The navy band and orange call to action lead into the conditions MPS is most often mistaken for, closed by a callout in the clinical voice.

The What's new in MPS page: three recent clinical papers, each with a thumbnail, an italic title, a date, a summary and a Read more link, then a purple band urging early referral. — Recent research is summarized up front in the italic title style, and a purple band ends the page on the one action that matters: refer early.

05 · Outcome

What changed for the people reading it

First thing readers see

Trends

was paragraphs

Readers see what is happening before they are asked to read about it.

Reading a chart

Learn once

was relearn each one

Shared rules for titles, color and axes carry across every chart and table.

Finding a symptom

Point at it

was scan a list

The body illustration narrows the page to the right system.

Specialty wayfinding

9 icons

each with its own color

Every specialty is recognizable on every page, from the care hub to the tables.

Described from the style guide and page designs. Not production analytics.

06 · Reflection

A visual foundation that scales with the science.

The style guide gave the site a clear, structured reference experience that made rare disease data easier to interpret on any device. Because it was a system, not a set of pages, it could grow as new diagnoses and data sets were added.

I still work this way on complex systems: design for decisions made under uncertainty, choose clarity over completeness, and treat data presentation as a core UX problem, not a visual afterthought.