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





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:

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

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.

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


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.



Logged in users are served higher-revenue ads

New Content Usage


Better visibility doubled hits for new calcs

Site Traffic


An unexpected SEO bump, likely from better on-page organization

User Feedback


Increased feature visibility = increased user communication

Browse Other Projects

Coming Soon:


Boosting donations to the world’s most effective charities

Coming Soon:


A spaced repetition study app that just works – finally

Interested in working together?

I am currently working with select clients.

Let's Chat