MDCalc

The Brief

MDCalc is the world’s premier medical calculator site, used by over a million medical professionals per month. They host 500+ interactive medical calculators to help practitioners diagnose and treat diseases with leading evidence-based research.

Their initial web app was reaching its limits, and they wanted:

• A modern responsive website
• With improved content discoverability
• And a clean look & feel

For doctors, every second counts

When your user group is medical professionals, every second you can shave off an interaction matters. Our design took into account every possible way to make it easier for doctors to (a) input data, (b) see results, and (c) take action.

Default State

ℹ️ Actionable yet non-critical information minimized (but still hinted at)

✍️ All inputs displayed on single line whenever possible for maximal data density

☝️ Switch units with a single tap. No need to go to “Settings”.

👀 Left-aligned labels for quick scanning

🥳 Result instantly appears when all fields entered. Zero clicks to view or refresh results.

Errors, Warnings, Etc.

Homepage Iterations

The homepage took refining to get exactly right. On one hand, we wanted something simple and elegant. On the other hand, the home page was the “central hub” of MDCalc’s 500+ calculators – and it needed to show users just how useful the site is.

Non-final concept

✅ Large, visible search is a huge improvement from prior designs

🤔 Unclear how filtering works if a search hasn’t been entered or if you change tabs

👍 Sidebar and tabs present alternative content that could be helpful to the user

💰 More signups = more ad revenue, but this is a wall of text – not good!

Non-final concept

🙈 For special announcements, this might feel too out-of-the-way or ad-like

🔍 Pared down design shows its inspirations – “now with 50% more Google”

🍦 While functional, this design also felt too plain and clinical

Final design

💵 A bright orange button advertises that signup is free (a boon for ad revenue)

🧐 Large, visible search bar encourages users to explore huge number of calculators

💪 Flexible space for special content, news, and ads

💅 Clean tabbed-based layout

A Powerful Search

Accessible from the top header site-wide, the search experience was critical in distinguishing MDCalc as the premier medical calc site. Users need both to (a) quickly pull up calculators they’ve used before, but (b) find calculators they didn’t even know existed – primed by advanced filters and suggestions.

🔥 Zero-click instant search

👍 Result count instantly auto-updates, giving context

💁‍♂️ Suggested filters makes it easy to explore functionality

👀 Search term highlighted where present in results

🔍 Filter by 5 different categories – encouraging exploration and tinkering

Responsive by Design

By rethinking the design from the smallest screen sizes on up to the largest, we created a system that prioritized and exposed content, allowed for customizations, and provided value as quickly as possible – no matter what device you were using.

Results

The redesign was a success, and I went on to work with the MDCalc team on the Android app, iOS app, and other web projects.