Rajkumar Singh | UX & Framer Designer

Back To Home

Designing an Intuitive and Streamlined LMS Experience for Administrators and Learners

COGNIGIX is a digital learning solution provider including custom learning, LMS, and learning Deliver app.

Type

Learning Management System

Role

UX/UI Designer

Timeline & Completion

(3 Months) April 2022

Team

1 Designer, 2 PMs, 1 Business Analyst

Platform

Desktop

Tools

Figma

Project Design Preview

I have worked on several designs but was mainly responsible for designing the CRUD operations, functionality flow, and renewed visualization experience of course creation.

Not interested in my design process? No worries at all.

Skip to final product

The Challenge

Since 2018, the cogngix lms application portal has remained the same. 5 years without any update, with outdated crud operation process, this has caused friction regarding in functionality, interface between learners and their managers due to usability difficulties, and wide in-consistencies in overall design.

To update Cogngix lms application for both admin & learners that align with standards like Frictionless primary tasks, Ease of use & Usability for all users.

The Users

The primary user type are educational & industry professionals and administrators. This user group typically includes university & industry administrators, teachers, and instructional designers who are responsible for managing and delivering online courses.

Administrator

Manage users account, permission & configurations.

To assign roles, control access to different parts of the system.

Instructors

Create & manage courses.

Upload content.

Track learners progress.

Learners

Access and complete training courses.

Assessments & other learning materials.

Old LMS Admin Design

Information Architecture Audit: Admin Side

During the information architecture audit of LMS, several key issues were identified, these include:

Font Inconsistency

Lack Guidance and Hierarchy: Titles associated with each section fail to provide the necessary guidance and hierarchy.

Offset Spacing: Subtitles within the sections exhibit offset spacing issues, resulting in a misalignment with the associated content.

Inconsistent Case: Parent text, in small case, is inconsistent with the title case subtitles, creating a jarring visual contrast.

Navigation Challenges

Tab and Icon Navigation: Similarity in tab structure & icons leads users struggled with the page navigation.

Incomplete naming terminology: of page menu system had made it hard for users to understand and predict the content.

Input-UI Misalignment Issue: Non Alignment of UI layout and interaction patterns with the expected input types.

Proximity Challenges: Absence of adequate spacing between different data groups making it challenging for users to distinguish between different sections and form fields.

Information Hierarchy

Decision Fatigue Navigation: Course creation, where the side navigation gives multiple options to go with like course, program, content, topics, etc. by default it must be not-collapse.

Decision Fatigue Form: The form list every data required for course creation that is overwhelming and time consuming. here there are many things that are not necessary to fill right now it can be easily filled out latter, so there is no prioritization of needed input right now & fill rest later to make course creation friction less.

Layout and Icon Inconsistency:

Low Contrast: Buttons on the interface suffer from inadequate background contrast.

Accessibility Concern: Low contrast between the button background and the text can make it difficult for users, especially those with visual impairments, to identify and interact with these critical interface elements.

UI Misalignment: Suboptimal spacing throughout the interface, affecting both visual aesthetics and user experience.

Substandard Contrast: Below the recommended accessibility standard contrast ratio standard make it difficult for users with visual impairments to distinguish between different cards and their content.

Updating Technology Structure

After audit the major problem the major problem discovered was the way old lms is designed to operate. Previous setup might be workable as per previous conditions, but for simultaneous learning & scalability it has tp be updated and that opens the gate to introduced solutions for improving experience.

Below is the comparison between old & improvised lms structure working structure mainly focusing on content management while creating & updating that plays key role in overall functionality of application.

Limited Editing Capabilities:

The LMS has a limited set of editing capabilities, meaning that if users edit content within a course, those edits only apply to that specific course.

Content Update Process:

If users need to update the content, they must do so in their local systems first.

After updating, they have to re-upload the modified content to the LMS.

Isolation of Uploaded Content:

The uploaded content is limited to the current course, making it difficult to reuse the same content across different courses without re-uploading.

Repetitive Uploads Multiple Course:

If a user creates multiple courses using the same set of content, any updates to the content require repetitive uploading for each course individually.

Inconsistency Across Courses:

Limited editing & sharing capabilities contribute to inconsistencies across courses. Edits in one course don't automatically reflect in other courses that share the same set of content.

Centralized Content Repository:

Implement a centralized content repository within the LMS where users can store and manage their content. This repository serves as a single source of truth for content.

Dynamic Content Linking:

Allow dynamic linking of content to courses. Instead of physically uploading content for each course, enable users to link courses to specific content stored in the centralized repository.

Global & Local Editing Capabilities:

Enhance editing capabilities to support global changes. If a user edits content in one course, those changes persist in locally or should dynamically reflect in all other courses linked to the same content.

Efficient Content Updates:

Users should be able to update content centrally in the repository.

Once updated, the changes should automatically propagate to all linked courses.

Streamlined Course Creation:

Enable users to create new courses more efficiently by linking to existing content in the repository.

This reduces redundancy and ensures consistency.

Logical User Flow

After streamlining the data-flow, re-structuring user flow became possible. It started with creating primary task first for Admin where primary work is manage content, permissions, users etc, the chronology starts with

Creating content -> User enrollment -> Managing Permissions

Same goes for Learners
My Courses -> Trainings -> Additional Courses & -> Profile

Admin Portal Design : Inspired by

Client had a very specific baseline requirement that the overall experience must be very similar to services that most of users are use to or use daily in their day-to-day work.

The data flow, layout are inspired from following services.

The Creation

The process of uploading content is similar to working with file-sharing services like Google Drive or Dropbox. Shifting from "form filling" approach to traditional "File Manager" approach from desktop environments.

Clicking on the “Upload File” button and select the files from your computer. "Creating Folders" to segregate content based on their type. "Selecting Materials" from content repository to destination folder.

The LMS recognizes ordinary PPT presentations, audio and video files, and text documents, as well as special SCORM courses. You can always combine them into a learning track to achieve a consistent flow – even with the most complex subjects – and set the required evaluation criteria.

With components, breaking creating & updating in several parts unlike old design with all option available at once.

Action Items

Components are formed by properties that can, and cannot be changed when using them in code. For example, a dialog can have a title, a body text, and an action button with text values that will change depending on the occasion. Everything else (background color, margins and separations) will invariable remain the same.

Course creation process works horizontally in tabs, from 2nd to last tab works on general settings, notifications & others.

Where the default state tab: outline - contains the primary information, with Add button that gives the action items to upload & create content either from lms pre-stored content or from user system.

User can see the type of contents uploaded with their icon type, name & description along with options to see the preview, edit & delete it.

Every actions items have their own set of settings, starting from Selecting Material

Course Settings

After adding course material, settings for how course will be accessed, the way learners should get notified, allocating points & rewards associated after completion & enrolling users.

This is approached as a form filling with every heading associated with description followed by action elements. Leveraged the placeholder text to guide users instead of just repeating the label & limited the wrong input source (eg media types) by using predefined types for common inputs.

Monitor your learner & team productivity

Manually selecting user & tracking it's progress is doable but doing for large group set with difference in the result type can be tedious task to track. For example

Check if users of a certain department have any overdue courses or how far learners have advanced through the content item.

Select employee studies their assigned courses.

To see all the enrollments assigned to this user, both current and canceled. etc

Check if users of a certain department have any overdue courses or how far learners have advanced through the content item.

Select employee studies their assigned courses.

To see all the enrollments assigned to this user, both current and canceled. etc

So in order to make this process easy and convenient Reports is used.

Learner Progress report is an easy and convenient way to find out how your employees study courses. With the report, you can easily check if users of a certain department have any overdue courses or how far learners have advanced through the content item.

A summary of the entire report will appear above the table with the results.

Filter action items:

Enrollment type filter to view report on materials by Administrator & Catalog.

Filter action items:

Enrollment type filter to view report on materials by Administrator & Catalog.

Learning Item Name filter you select a course/a training with no users enrolled.

Learning Item Name filter you select a course/a training with no users enrolled.

Primary action items:
1. Learning Item Name button generates a new Learner Results report on the same page. This represents the progress of a specific user.

Enrollment History will show all the enrollments assigned to this user, both current and canceled.

Enrollment History will show all the enrollments assigned to this user, both current and canceled.

Track by different type of elements, by clicking on one of these elements admin can see detailed reports of learners. To save time & improve usability admin can also generates reports from content sections selecting reports section within course & selecting learners & report type.

Learner Portal Design : Inspired by

The data flow, layout are inspired from following services.

Notifications

With LMS, you can combine uploaded courses, assessments, and other training materials into step-by-step learning tracks, such as a two-week program for trainees or a half-year learning track for sales managers.

User will get notifications like

Course review
Course completion status
Course curriculum update
Invitation for course
Assignment of New courses and Learning Track.

Course review
Course completion status
Course curriculum update
Invitation for course
Assignment of New courses and Learning Track.

Learning History

In the My Training History section, learners can view how they were progressing through the courses. The history can be sorted by the following parameters:

• Date/Time
• Content title
• Status
• View percentage
• Score
• Duration

Learning History consist of content view status along with score & duration.

Used table format to represent data.

Used different color codes to represent course journey status.
Used different icons to represent content types as: Quiz, Text, Video etc.

Learning History consist of content view status along with score & duration.

Used table format to represent data.

Used different color codes to represent course journey status.
Used different icons to represent content types as: Quiz, Text, Video etc.

This 4 variables have 2 states either fixed or flexible ex: fixed time, flexible duration vice-versa.

My Course

Learning History consist of content view status along with score & duration.

Used table format to represent data.

Used different color codes to represent course journey status.
Used different icons to represent content types as: Quiz, Text, Video etc.

Learning History consist of content view status along with score & duration.

Used table format to represent data.

Used different color codes to represent course journey status.
Used different icons to represent content types as: Quiz, Text, Video etc.

This 4 variables have 2 states either fixed or flexible ex: fixed time, flexible duration vice-versa.

When the administrator enrolls users into a course, the course appears under the Enrolled tab of the My Courses section of the User Portal.

Sorting

In the User Portal, courses and learning tracks are sorted as follows:

First, the course that the user viewed most recently.

First, the course that the user viewed most recently.

And last, courses from the Catalog that students added themselves.

And last, courses from the Catalog that students added themselves.

Then, the courses assigned by the instructor.

Then, the courses assigned by the instructor.

To search a course by the title, description, or tags, use the search bar at the top right corner of the My Courses page. Start typing text and the system will leave matching items on the page.

Color Independent Access

Here UI is shown in Greyscale, a view that user from color blindness has.

In order to make UI accessible color contrast is given priority, along with giving meaningful affordance to information-bearing elements, UI controls, decorative & disabled elements.

For example outline stroke to Enrolled-tab, using high contrast color for progress indicator, using an active bar at the bottom of navigation-tabs.

Taking Courses

In the My Courses section, users can view the list of the assigned content and start taking courses and content items.

On the opened page, you can view the content title, description, status, and due date if available.

Here different UI elements are used to state the difference in content status

Studying Learning Tracks

If you assign a learning track to a user, it will appear in the My Courses section of the user portal. To proceed to studying it:

On the opened page, you will see a list of stages and courses of the learning track. All the available to take courses have the Not Started status, not available content items have the Locked status.

On the opened page, you will see a list of stages and courses of the learning track. All the available to take courses have the Not Started status, not available content items have the Locked status.

All the passed courses of the learning track has changed their status to Completed.

All the passed courses of the learning track has changed their status to Completed.

Reflection

It was really interesting to reflect on the vast amount of variables and design considerations that need to be made even in common user experiences like filling out a form.

Keeping the Team & Client Posted

Being able to present my progress regularly during our meetings allowed the entire team to be in the same loop; and concerns could be raised earlier.

Collaboration with PM

By actively listening to each other’s ideas, PM and I were able to work together seamlessly and efficiently to ensure we were on schedule.

Lessons Learned:

Best Practice ≠ Best Solution

Choosing between a single vs. multi-page form taught me that design-thinking is contexually-based on target users and their desired objectives.

Ask Questions!

Speaking up and asking questions to familiarize myself with company card policies played a pivotal role in avoiding design incompatibilities later on.

What I could've done better:

Push for User Testing

Although this was an internal client project on a short timeline, user testing would have been extremely beneficial in supporting our design hypotheses.

Project Planning & Management from 0 to 1

landing page for cloud-consulting startup