Kase Study
Knowledge to Practice: ️Helping 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
- Identify what messaging will motivate physicians most to continue learning
- 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 implementation?
- Is it intuitive / usable / delightful?
- Will users value the short pre/post assessments as a way to identify opportunities 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 further 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
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.
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.
🏠 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 enough to quickly understand?
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)
📊 Dashboard Redesign
Goals
- Condense and simplify data & content
- Display users’ progress in a more intuitive way
- Create a more engaging UI
Research findings
Track Progression:
- 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 that were not overly concerned with obtaining them found value in a place where they could easily track their overall progression
- One user even wished it collected all of their 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.
The client was happy with the direction and progress that I was able to make in such a short time frame. There were a lot of challenges with this project but we were able to complete several of our goals such as; implement an intuitive and helpful dashboard, elevate the landing page to provide additional value with track progress and insightful articles, and not to mention redesign the course wizard for both mobile and desktop that helped Doctors obtain their CME credits.
🏁 End
Thanks for reading! If you’d like to learn more about me check out my website or follow me on linkedin / instagram.
