MDCalc – Erik D. Kennedy

<!DOCTYPE html>     <html class="no-js">  <head>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177948964-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177948964-1'); </script>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/png" href="../img/favicon.png" /> <title>MDCalc – Erik D. Kennedy</title>  <link rel="stylesheet" href="../css/styles.css">  <script src="../js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Public+Sans:ital,wght@0,300;0,600;1,300;1,600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.typekit.net/daj6tqq.css"> </head> <body class="project project--mdcalc"> <nav class="project-header"> <a href="../index.html" class="project-header__home-link">Erik D. Kennedy</a> <a href="mailto:erik.d.kennedy@gmail.com" class="project-header__email-link">erik.d.kennedy@gmail.com</a> </nav> <div class="project-splash"> <div class="project-text"> <h1 class="project-title">MDCalc</h1> <p class="project-tagline">A responsive website for the world’s #1 medical calculator</p> </div> <div class="project-imagery"> <img src="mdcalc/mdcalc-splash-mobile.png" id="mdcalc-splash-mobile" data-parallax data-speed="0.1" data-top> <img src="mdcalc/mdcalc-splash-tablet.png" id="mdcalc-splash-tablet" data-parallax data-speed="0.2" data-top> </div> </div> <section class="meta"> <div class="meta__stat"> <h4>Services</h4> <ul> <li>UX design</li> <li>UI design</li> <li>Front-end prototype HTML/CSS/JS</li> </ul> </div> <div class="meta__stat"> <h4>Team</h4> <ul> <li>Graham Walker (CEO)</li> <li>Joseph Habboushe (Co-founder)</li> <li>Jason Simeral (COO)</li> <li>Yi Lu (developer)</li> </ul> </div> <div class="meta__stat"> <h4>Platform</h4> <ul> <li>Responsive Website</li> </ul> </div> <div class="meta__stat"> <h4>Outcomes</h4> <ul> <li>Logins up 450%</li> <li>Site traffic up 11%</li> <li>New content usage up 130%</li> <li>User feedback up 54%</li> </ul> </div> </section> <section> <h2>The Brief</h2> <p>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.</p> <p>Their initial web app was reaching its limits, and they wanted:</p> <ul> <li>A modern <strong>responsive website</strong></li> <li>With improved content <strong>discoverability</strong></li> <li>And a <strong>clean look & feel</strong></li> </ul> </section> <section> <h2>For doctors, every second counts</h2> <p>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.</p> <div class="double-figure"> <figure class="figure--left"> <p><span class="figure-label">Default State</span></p> <img src="mdcalc/calc-default.png" alt="Calculator screen of MDCalc mobile app"> <div class="pointer" style="--x: 93%; --y: 34%"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">ℹ️ Actionable yet non-critical information minimized (but still hinted at)</p> </div> <div class="pointer" style="--x: 92%; --y: 45%"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">✍️ All inputs displayed on single line whenever possible for maximal data density</p> </div> <div class="pointer" style="--x: 95%; --y: 59%"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">☝️ Switch units with a single tap. No need to go to “Settings”.</p> </div>  <div class="pointer" style="--x: 12%; --y: 72%"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">👀 Left-aligned labels for quick scanning</p> </div> <div class="pointer" style="--x: 50%; --y: 90%"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">🥳 Result instantly appears when all fields entered. Zero clicks to view or refresh results.</p> </div> </figure> <figure class="figure--right"> <p><span class="figure-label figure-label--orange">Errors, Warnings, Etc.</span></p> <img src="mdcalc/calc-alt-states.png" alt="Calculator screen of MDCalc mobile app with error states, warning states, etc."> </figure> </div> </section> <section> <h2>Homepage Iterations</h2> <p>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.</p> <figure class="figure--centered"> <p><span class="figure-label figure-label--orange">Non-final concept</span></p> <img src="mdcalc/homepage-v1.png" alt="MDCalc homepage UI, iteration version 1"> <div class="pointer" style="--x: 77%;--y: 9%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">✅ Large, visible search is a huge improvement from prior designs</p> </div> <div class="pointer" style="--x: 78.5%; --y: 31%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">🤔 Unclear how filtering works if a search hasn’t been entered or if you change tabs</p> </div> <div class="pointer pointer--left" style="--x: 17%;--y: 55%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">👍 Sidebar and tabs present alternative content that could be helpful to the user</p> </div> <div class="pointer pointer--left" style="--x: 17%;--y: 82%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">💰 More signups = more ad revenue, but this is a wall of text – not good!</p> </div> </figure> <figure class="figure--centered"> <p><span class="figure-label figure-label--orange">Non-final concept</span></p> <img src="mdcalc/homepage-v2.png" alt="MDCalc homepage UI, iteration version 2"> <div class="pointer pointer--left" style="--x: 23%;--y: 11%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">🙈 For special announcements, this might feel too out-of-the-way or ad-like</p> </div> <div class="pointer pointer--left" style="--x: 26%;--y: 45%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">🔍 Pared down design shows its inspirations – “now with 50% more Google”</p> </div> <div class="pointer" style="--x: 80%;--y: 27%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">🍦 While functional, this design also felt too plain and clinical</p> </div> </figure> <figure class="figure--centered"> <p><span class="figure-label">Final design</span></p> <img src="mdcalc/homepage-v3.png" alt="MDCalc homepage UI, iteration version 3"> <div class="pointer" style="--x: 96%;--y: 8%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">💵 A bright orange button advertises that signup is free (a boon for ad revenue)</p> </div> <div class="pointer pointer--left" style="--x: 9%;--y: 30%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">🧐 Large, visible search bar encourages users to explore huge number of calculators</p> </div> <div class="pointer" style="--x: 81%;--y: 47%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">💪 Flexible space for special content, news, and ads</p> </div> <div class="pointer pointer--left" style="--x: 19%;--y: 58%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">💅 Clean tabbed-based layout</p> </div> </figure> </section> <section> <h2>A Powerful Search</h2> <p>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.</p> <figure class="figure--centered"> <img src="mdcalc/search.png" alt="MDCalc search UI"> <div class="pointer" style="--x: 79%;--y: 28%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">🔥 Zero-click instant search</p> </div> <div class="pointer" style="--x: 77%;--y: 40%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">👍 Result count instantly auto-updates, giving context</p> </div> <div class="pointer pointer--left" style="--x: 13%;--y: 41%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">💁‍♂️ Suggested filters makes it easy to explore functionality</p> </div> <div class="pointer pointer--left" style="--x: 19%;--y: 51%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">👀 Search term highlighted where present in results</p> </div> <div class="pointer" style="--x: 79%;--y: 68%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">🔍 Filter by 5 different categories – encouraging exploration and tinkering</p> </div> </figure> </section> <section> <h2>Responsive by Design</h2> <p>By rethinking the design from the <em>smallest</em> 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.</p> <div class="row-of-figures"> <figure> <img src="mdcalc/favs-mobile.png" alt="MDCalc favorite calcs UI on mobile"> </figure> <figure> <img src="mdcalc/favs-tablet.png" alt="MDCalc favorite calcs UI on tablet"> </figure> <figure> <img src="mdcalc/favs-desktop.png" alt="MDCalc favorite calcs UI on desktop"> </figure> </div> </section> <section> <h2>Results</h2> <p>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.</p> <div class="stripe"> <div class="stripe__stats"> <div class="stripe__stat"> <p class="label">Logins</p> <p class="scalar scalar--plus">450%</p> <p class="stripe__stat__desc">Logged in users are served higher-revenue ads</p> </div> <div class="stripe__stat"> <p class="label">New Content Usage</p> <p class="scalar scalar--plus">130%</p> <p class="stripe__stat__desc">Better visibility doubled hits for new calcs</p> </div> <div class="stripe__stat"> <p class="label">Site Traffic</p> <p class="scalar scalar--plus">11%</p> <p class="stripe__stat__desc">An unexpected SEO bump, likely from better on-page organization</p> </div> <div class="stripe__stat"> <p class="label">User Feedback</p> <p class="scalar scalar--plus">54%</p> <p class="stripe__stat__desc">Increased feature visibility = increased user communication</p> </div> </div> </div> </section> <section class="mini"> <h2>Browse Other Projects</h2> <div class="next-cards"> <a href="#" class="next-card"> <div class="next-card__text"> <p class="label label--orange">Coming Soon:</p> <h3>GiveWell</h3> <p>Boosting donations to the world’s most effective charities</p> </div>  </a> <a href="#" class="next-card"> <div class="next-card__text"> <p class="label label--orange">Coming Soon:</p> <h3>Spacr</h3> <p>A spaced repetition study app that just works – finally</p> </div>  </a> </div> </section> <section class="mini"> <h2>Interested in working together?</h2> <p>I am currently working with select clients.</p> <p><a href="https://docs.google.com/forms/d/e/1FAIpQLSd2AuvvSNiMFr0qwBKF16Jxq7POrAAbXLEzoxGuKJQgMHnJbw/viewform" class="button">Let's Chat</a></p> </section> <footer> <p>© 2023 Kennedy Design, Inc.</p> <small> <a href="https://learnui.design" target="_blank">Learn UI Design</a> · <a href="https://learnux.design" target="_blank">Learn UX Design</a> <span class="no-mobile">·</span> <a href="http://dribbble.com/erikdkennedy" target="_blank">Dribbble</a> · <a href="https://twitter.com/erikdkennedy" target="_blank">Twitter</a> </small> </footer> <script src="../js/vendor/jquery-3.0.0.min.js"></script> <script src="../js/vendor/floatl.js"></script> <script src="../js/main.min.js"></script> </body> </html>

CINXE.COM

MDCalc – Erik D. Kennedy