Medscape Micro Learning Experience Designed by Eliana Feng @ Polaris Design.
PROJECT OVERVIEW
Project Label Creative Direction, UX/UI Design, Visual Design.
Timeline June 2018 to March 2019
Role & Responsibilities
Eliana Feng @ Polaris Design — Creative Direction, UX/UI Design, Visual Design.
Dana Kerker @ WebMD — Initial Wireframes.
Chris Bennett @ WebMD — Product Management.
PROJECT DESCRIPTION
WebMD was looking to build a micro-learning experience on the Medscape platform for medical professionals. This new experience would be built under CME & Education in the current navigation. Eliana Feng @ Polaris Design led the design of this project, collaborating with internal team at WebMD.
USER PROBLEM
CME stands for Continuing Medical Education. CME helps practicing medical professionals maintain competence and learn about new and developing areas of the field. By going through tutorials on CME & Education on Medscape, medical professionals are able to earn “CME credits.” The current user problem is that sometimes the tutorials or “activities” are as long as 90 minutes, and a lot of times medical professionals don’t have 90 minutes to finish the whole tutorial/activity in order to earn credits.
The solution that we were trying to design for is a micro-learning experience that divides the activity into mini chapters. This allows users to finish as many mini chapters as their schedules permit, and earn credits as they go. In this way, users do not need to sit through the whole activity in order to earn any credits, and instead, they accumulate credits through mini chapters.
Intended Users
As per conversation with the Product Management team, the majority of the current CME & Education audience is older medical professionals, over 50 years old. Therefore, the design has to take into consideration that these users might not be as tech-savvy.
Initial Wireframes and user flow
Dana @ WebMD did the first round of wireframes and user testings. Based on how the current structure of the Medscape platform is set up, below is a flow chart of how users would experience this new micro-learning experience under the current structure:
Users would find a list of all the activities under CEM & Education.
If users click on one activity that is a micro-learning activity, they would still first experience the popup that contains all the information about this activity.
Once users click into the popup, the popup goes away and they would experience the new activity landing screen that introduces the concept of micro-learning.
Users would then click on “Continue” and see the chapter list within this activity.
Once users select a chapter to start, they would be heading to the main screen of the chapter. There are three steps within each chapter: pre-assessment, tutorial, and post-assessment. The completion of a chapter means all three steps are completed and users click on “Check Answers” to see the answers of all the questions in post-assessment. The credits are earned for the chapter once the chapter is completed.
Users are able to switch to another chapter within the activity at any time, using the left rail of chapter list.
Users are able to claim credits for the whole activity at any time. The amount of credits is accumulated based on how many chapters that users have completed within the activity.
Based on the initial wireframes, heuristic analysis, and conversations with PM team about business and user goals, Eliana created a user journey map to illustrate the complete user experience.
User Flow Chart Designed by Eliana Feng.
A few highlights from the user journey map above:
For new users, the experience is too “clicky” — it takes three steps/clicks for users to land on the main chapter content: old system popup (unable to change), introduction screen and chapter list screen.
The user flow for returning users is missing from the initial wireframes and is added back on on the above user journey map.
User Testing and Design Challenges
Dana @ WebMD did the first round of user testings based on the initial wireframes. Due to budget limitations, the team was not able to conduct additional user testings. Therefore, Eliana @ Polaris Design recruited medical professionals on her own and conducted two in-person user testings, which gave her additional user insights.
User testing conducted by Eliana Feng
Tackling UX Design Challenges
In order to address the user pain point that it is too “clicky” to get to the main chapter screen, Eliana Feng @ Polaris Design explored a few design solutions.
Iteration I Can we integrate the content from “Activity Landing Screen” and “Chapter List” into one screen?
Combine icons and concise UX copies to clearly convey the concept of flexible credit activity.
Lose the “Credit Conversion Key” table that requires users to do calculation in their head. Instead, on the chapter list, we convert and note the credit amount for the users.
Get rid of the “Start Activity” button on the original “Chapter List” wireframe, as it confuses users with the “Start” button next to each chapter. We would want to convey the idea that users can select ANY chapter to start.
However, per multiple conversations with the development and product management team, due to technical difficulty and how the platform is structured, we have to separate the “Activity Landing Screen” that belongs to the old system, and the “Chapter List” screen that goes into the new system which the team was hoping to migrate into eventually. Therefore, the design had to be rethought.
Iteration II How do we create the “illusion” that it does not appear to be “clicky,” even with separate design screens?
On the “Activity Landing Screen,” the information was reorganized in a way that the CTA is closely tied with the concept of flexible credit activity and above the fold, so that users can easily locate the next step. In the end, the Credit Conversion Table is required by legal and PM, but it is de-priorized as more of a FYI message, to create a more clear IA.
Due to legal reason, we cannot denote the credit amount next to each chapter. In order to reduce cognitive load that users have to do credit calculation in their head, Eliana added a time & credit calculator in the Chapter List screen, on the top right.
Above are the designs of three separate screens. To recap, due to technical reason, we had to separate out the three screens from each other. To address the user pain point that it takes too many steps to get to the “Chapter Main Screen,” the design solution is to use animation/transition to create the illusion and perception that the “Chapter List” and “Chapter Main Screen” are one screen/step. The animation is described and highlighted in the animation guide below.
Landing screen UI/UX Challenges
On the “Flexible Credit Activity Landing Screen,” the main user feedback is that the information is not coherent and users have trouble understanding the content. Below is a list of highlights from wireframes to design:
#1: The content needs to be concise and relevant to the current user state. Mentioning “earn credit” that happens much later in the user experience upfront confuses users and adds to more cognitive load. Hence, Eliana tightened up the content to make it solely focus on flexible credit activity.
#2: The main CTA needs to be above the fold, as users were having trouble to locate it in the user testings.
Chapter list UI/UX Challenges
#1: During user testings, Eliana discovered that there was a lot of confusions around the credit conversion key table on the introduction screen above. The problem is that the credit conversion key table is based on 15-min intervals, while in reality, a lot of chapters aren’t 15-min intervals, as shown in the wireframe below. Hence, users ended up having to do the calculations in their head, which was an unintuitive process. Therefore, in the past design iterations, Eliana suggested to add credit conversion right next to each chapter. Per conversation with the dev team, the credit conversion data for each chapter does not exist in the back end yet and this needs to be conducted manually, which would delay release date. However, the credit conversion data does exist for the entire activity, hence a time/credit calculator was added to the latest design.
#2: The “Start” button next to each chapter was to indicate the idea that the chapters aren’t sequential and users are able to start from any chapter. However, in the user testings, users were confused the “Start” button with the “Start Activity” button in the wireframe. Therefore, in the design, the latter was taken out.
UI Inspirations
While working on the design, Eliana conducted a fairly amount of design research on other leading e-learning platforms, such as Coursera, Khan Academy. There are pros and cons to take from all these platforms, but an important discovery is that the sticky left navigation rail is an established UX pattern across these e-learning platforms.
Therefore, in the design, we decided to continue using the established UX pattern of a sticky left rail that allows users to easily navigate between different chapters. The interface is structured in a way that there is a sticky left navigation rail for chapter list. The main content for the selected chapter is on the right. There is a sticky footer bar that contains a step by step progress bar and a CTA button for the selected chapter.
Main chapter screen UI Challenges
A few pointers, from wireframe to design:
Addressing #1 user pain point in the wireframe that users have trouble locating the “Earn Credit” button, in the design, the “Earn Credit” button is prominently located on the top right as a secondary button. In comparison, the “Continue” CTA is also located on the right as a primary button and it is in the sticky footer that is visible at all time. Keeping all action buttons on the right side reduces eye movement distance and cognitive load.
Addressing #2 user pain point that they have to do the credit calculation in their head, in order to reduce cognitive load, a time & credit calculator is added in the design.
#3 — the three dots in the wireframe was supposed to indicate the three steps (pre-assessment, video, post-assessment) within a chapter. However, in the user testing, users were not sure what it was indicating. Visibility of status is an important part of the overall user experience. Therefore in the design, Eliana added a progress bar in the sticky footer. There will also be visual feedback in the progress bar as users progress into the next step. In addition, on the left rail, there will be two different status labels in the chapter, “In Progress” and “ Completed.”
#4 — Using visual and UI design to re-organize the IA for the chapter information and create a clear visual hierarchy.
Complete User Flow
Responsive design across four breakpoints
Styleguide and design hand-off
To deliver consistent design and facilitate collaboration with the dev team, Eliana created a detailed styleguide and table/mobile interaction guide.