Designing an LMS Experience

Instructional Design

Overview

Risk-Based Monitoring Essentials is an online course that teaches healthcare professionals how to implement risk-based monitoring in their workplace. My role as UX/UI Designer was to design the learning experience from concept to execution.

Challenge

The challenge was to design a website while the branding and course content were being developed at the same time.

Design Process

Business Goals

The primary goal of the business is to provide healthcare professionals the knowledge and tools needed to successfully lead an RBM initiative, which is achieved through enrollments and course completions.

User Goals

The target audience includes professionals in the life sciences, pharmaceutical, and medical device industries. Their needs are getting up to speed with risk-based monitoring and seeking tools to help support the case to adopt RBM. Pain points include limited knowledge of RBM and difficulty getting buy-in from higher-ups.

Website Requirements

Knowing the goals of the website, I listed the requirements that would enable the business and users to achieve their goals.

Web Design

Information Architecture

From a user standpoint, the website is divided into two areas: public and private. The public area includes the homepage and enrollment pages. The private area was made available after users enrolled in the course.

Online Course Sitemap

Wireframes

During our initial call, stakeholders walked me through a website they liked as well as one they didn’t like. I used that insight to help inform my design.

LearnDash Wireframes

Configuring the Website

After wireframes were approved, I researched WordPress themes that offered similar layouts. I presented theme options as well as plugins that would provide us the necessary functionality. In addition, I worked with the programmer to install Google Analytics and add noindex tags to private pages.

High Fidelity Prototypes

We had a graphic designer on our team who was responsible for branding and designing the course content. I incorporated his choices in colors and typography to design the UI of the website.

Course Landing Page LearnDash Course Design

WordPress Theme Customization

Taking my mockups, I customized the WordPress theme to reflect my design. In addition, I tested it on various mobile devices using a simulator and added media queries where necessary.

Quality Assurance Test

Design System

Below is what the final design system became.

UI Style Guide

User Testing

The stakeholder conducted two rounds of usability testing. We took their feedback and made changes to the course. One of the major changes was redesigning the homepage—not so much from a usability standpoint, but from a conversion one.

Design Iterations

Results

The course officially launched. It’s still relatively new, so it’s too early to measure performance. However, as feedback comes in, then we’ll continue to make improvements.

“It has been a pleasure working with Rachel. Her expertise in UX/UI design has been critical to the success of our project. She is extremely responsive and quickly solves problems, even those that go beyond the UX/UI scope.” - Marc Blake, CTO of RBME.