Design a better Learning Management System that's easier to use than the current system that is provided by an outsourcing service provider.
UI/UX Designer
User Research, UI/UX Design, Prototyping, Interaction Design, User Testing

Date: September 2019 - current

Project Summary

One of the many projects that I've worked on at Applied Medical is the Learning Management System (LMS). The goal of this project is to design a learning management system that is easy to navigate and understand. The focus is to provide a more tailored platform that suits the needs of the learning team and also make learning easier for team members.

This project is divided into 2 phases. The first phase focuses only on one section which is the "Quality Document". This is the most important section on LMS where team members would complete their assigned quality documents before the deadline date. The second phase would comprise of the rest 9 sections (Training, Catalog, Course Assignment, Course Management, ILT, Curriculum Creation, Admin Creation, and Test Engine). In this case study, we will focus on the first phase - "Quality Document".

Project Constraints


Before we jump into designing, we did a competitive analysis between the current system and other existing learning management systems in the market. From there, we listed some of the pain points of the current system and list out functions that we find as "potentially useful" for our design. Using the list we made, we crosscheck this list with the team to see if they find it as "potentially useful" and if they're willing to give it a try.

Pain Points

Some of the pain points on the current learning management system:
  • Too many clicks are needed to complete an SOP (Around 6 clicks to mark an SOP as 'Completed').
  • SOP/training document PDF needs to be downloaded (Team members can't view it online).
  • It's not possible to check if a training PDF has or hasn't been read by team members. Once the PDF is downloaded, the option to complete the training will be visible right away.


While I was doing competitive analysis on the current platform, I made a couple of notes regarding what's nice to have and also do a couple of sketches of possible layouts for the "Quality Docs" section.

We are using a two-card system to save time and make it easier for team members to complete their quality documents. A couple of advantages from this two-card system:
Below is the sitemap of Applied Learning that applies to regular team members and managers. There will be a couple of extra sections that are only available to admins which I didn't include in the sitemap below as we'll only be covering a small part of the project in this case study (Quality Docs - Phase 1).


While keeping the main goal of this project on my mind which is reducing the number of steps to minimize time to completion, I mocked up some basic wireframes to gather initial feedback from Project Manager and Engineers.

Style Guide

Around the same time when I was working on this project, I was also assigned to start creating a design system for the UI/UX team. We compiled styles across other released projects and clean them up to create one concise style that the team could use. (More information on design system project - coming soon)

Usability Test

The phase 1 release of this project was due in November and it only focuses on the QS page which is a section of LMS where team members do their assigned quality documents. At first, this phase will only be released to a couple of selected team members selected from different departments and positions. The goal is to get more feedback as the developers are finishing things up so we can finish everything before the deadline. Based on these test users, there are no concerning problems that they encountered and so there are no big changes to the design other than a couple of small details (moving the description to a modal instead of including it as part of the card). The reason behind this is that description can be a lengthy one and team members don't need to pay attention to this detail as "description" is more useful for the admin.


I created my high fidelity mockups in Figma and share the file with engineers which allow them to inspect the file and export the HTML and CSS code. ‍ I worked closely with the Front-end team to ensure it was aligned with the designs before it went live.
It looks slightly different from the wireframes as I have made a few changes based on the usability test and new requirements that are being added later on during the project.

Some of the changes are:
  • Removing "Description" on the card details and placed it as an info button on the right card.
  • Adding "My Dashboard" button on the top right corner. This function was added later on as a requirement, which allows team members to access their transcripts on a temporary dashboard page. (Note: "Dashboard" needs to be pushed back for future updates due to time limitation.)
  • Adding "Reports" button on the top right corner which will only appear for managers. This is the point of access to Power BI where managers could view their team's transcript.

Results and Takeaways

We are so proud that we can finish phase 1 of this project on time. We have received lots of positive feedbacks that the new LMS is more user-friendly and effective compared to the old platform since its Phase 1 launch in May 2020. With the new LMS, we are able to cut down the time that team members spend when completing their training. From 6 clicks to 1 click with around 63.5% of time reduction for task completion. This assures us that we have addressed the majority of the pain points on the old system and provide a better solution. We do still keep an eye on this project as it's still being developed by our developers' team.
See prototype
↑  Back to Top