MDCalc

A responsive website for the world’s #1 medical calculator

Services

Team

Platform

Outcomes

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 true responsive website.

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

Calculator screen of MDCalc mobile app

ℹ️ 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.

Calculator screen of MDCalc mobile app with error states, warning states, 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

MDCalc homepage UI, iteration version 1

✅ 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

MDCalc homepage UI, iteration version 2

🙈 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

MDCalc homepage UI, iteration version 3

💵 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.

MDCalc search UI

🔥 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

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

MDCalc favorite calcs UI on mobile
MDCalc favorite calcs UI on tablet
MDCalc favorite calcs UI on desktop

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.

Logins

450%

Site Traffic

11%

New Content Usage

130%

User Feedback

54%

Browse Other Projects

Coming Soon:

GiveWell

Boosting donations to the world’s most effective charities

Coming Soon:

Spacr

A spaced repetition study app that just works – finally

Interested in working together?

I am currently working with select clients.

Let's Chat