A UX Kase Study: Knowledge to Practice

Kasey Randall
Feb 27 · 6 min read

👨‍⚕ ️How to Better Help Physicians Stay Up To Date

🗺️ Overview

My first Toptal engagement began as any client project would, with an immediate deep dive into the company and application, reviewing recent user feedback, gaining insights, and discussing business goals set to achieve.

Knowledge to Practice is on a mission to improve patient care with a practice-changing application helping physicians continuing medical education.

“Whether you want to stay current with emerging medicine, refresh on foundational knowledge, or prepare for your cardiology boards, Knowledge to Practice supports all of your learning needs.”

Working directly with the Director of Product, I was responsible for and trusted to help improve the overall user experience and interface design.

Role: UX design & strategy, rapid prototyping, UI/visual design, development handoff & collaboration,

Team: Beth McHugh - Director of Product, Zac Hallett - VP of Engineering. Kara Sasse - Chief Product Officer.

🐉 Challenge

This project was a large-scale web application spanning both desktop and mobile and a complex code structure utilizing React Material UI on the front-end. To help speed up the design process I decided to embrace the utilize the front-end framework, suggest improvements within reason (not a moonshot), and not recommend any wild UI changes.

There were many areas of improvement inside the app including enhancements to the navigation, content catalog, assessment quiz, landing page and dashboard, and much more. This case study is just an abridged archive of those items.

I was lucky to have the scope laid out for me spanning several months of dev sprints.

🤔 Strategy

Goals

  1. Identify what messaging will motivate physicians most to continue learning
  2. Identify the most valuable functionality that best serves as a trigger for physicians to keep up to date on the latest and use the product consistently.

Questions

  • Will an updated navigation increase users ability to get more quickly to topics of interest?
  • Will a dashboard that reports on progress motivate users to continue learning?
  • Is the navigation from the home page intuitive?
  • Is it less overwhelming than the prior round?
  • Is it intuitive to understand/usable?
  • Will users value the short pre/post assessments as a way to identify areas to focus their time?

⚔ Process

I’ve become effective at breaking down big challenges into smaller pieces to solve one at a time. In order to do this successfully I utilize a structured, adaptable, user-centered design process. I begin with understanding the user problems to be solved based on recent feedback and data then iterate and collaborate through wire-flows and user flows to determine best paths forward. I then iterate through low fidelity wireframes for general structure and after reviews I work through high fidelity user interface mockups. To futher assist the development team understand the intended interaction/design I deliver artifacts including, but not limited to mockups, animations, assets, splices, and specs. Using tools such as Invision Freehand and Adobe Xd I’m able to quickly design and deliver these artifacts as well as collaborate with teams to prototype and conduct usability testing for feedback and to demo to internal stakeholders for buy-in.

Tools: Adobe Xd, Invision, Slack, Google Suite

User flows in Invision freehand

Design — what you’re really here for

🔊 Accessing Audio Feature Faster

Dropdown ➡ tabs. One of my initial tasks included a mobile usability problem when physicians would take courses. Based on user research, it wasn’t immediately clear that there were different options to view course content.

result: dropdown selections to visible, scrolling tabs

Challenge: Working within a tight timeline and turn around there wasn’t an expectation for a complete revamp but instead something to deal with the issue at hand while considering the current build.

How can we increase both the visibility of learning options and usability. If we can reduce a click, great. If we can display most options at a glance, better!

Behavior rules: Display the first selections open by default with icon and label, collapse the others displaying icon only, any content that has more than 3 options (edge case) a horizontal scroll will help with any overflow. Expand label with transition on click.

👋 🍔 Say goodbye to the burger on mobile

From hamburger menu to expanded, bottom navigation.
Dropping the once ubiquitous, all-encompassing hamburger menu for a more common mobile element, the bottom bar navigation.

Working with the Director of Product we tested on desktop to see if the success rate increased when physicians (users) were prompted to find certain content. After we discovered that yes, in fact, it was much easier for physicians to find the content they were looking for by displaying the navigation by default. We then turned desktop’s left-side nav into a bottom bar on mobile.

on mobile: burger menu to bottom bar nav

🏠 Home page and navigation

Questions:

  • Will an updated navigation increase users ability to get to topics of interest more quickly?
  • Is this new home page intuitive?
There was no real “home” prior.

Research findings:

Home Page:

  • 7 of 8 found the landing page intuitive (1 was initially overwhelmed but was able to navigate after a little time) and all the features viewed valuable.
  • Users liked that they could easily get back to content they’ve started.

Navigation:

  • Finding: Left, expanded navigation was intuitive and helped unfamiliar users understand options and navigate easily.
  • 4 (of 6) users could complete the navigation task with either navigation.
  • 2 (of 6) could not complete the task with a top/collapsed navigation but could with the expanded left navigation
  • 5 of 6 shown preferred expanded left navigation (1 had no preference)
Home page hero with custom svg image
Getting users access to learning content faster, easier.
Future Scope: collapsable navigation???

📊 Dashboard Redesign

Goals

  • Condense and simplify data & content
  • Display users’ progress in a more intuitive way
  • Create a more engaging UI
Before
After

Research findings

Track Progress:

  • Overall intuitive layout and less overwhelming than the prior round. Users found the “progress” valuable and expressed motivation for wanting to get it to 100%
  • Knowledge check wasn’t a motivator outside of academic-focused users.
  • Recommendation section largely ignored as well.

Credit Achievements:

Very valuable across users to have a place that tracks their credits.

  • Called out by almost every user (as opposed to recommendations which was ignored).
  • Users really valued seeing their progress with credits.
  • Even users not concerned with obtaining them found value that this was a place where they could easily track them.
  • One user even wished it collected all her activities (eg. conferences) in on place.

🤯 Impact

Some of these designs have made their way into production and some are still in development or backlogged but patiently awaiting the impact results from real world use. So far so good.

🏁 End

Thanks for reading! If you’d like to learn more about me check out my website or follow me on linkedin / instagram.

Kasey Randall

Written by

💻 Digital Product Designer • Toptal top 3% www.kaseyrandall.design

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade