Litmos UX & More
Litmos, an award-winning learning management system, was my professional home for seven years. I wore many hats, primarily working as a UI/UX designer, creating seamless designs for their web, iOS, and Android applications. I also have worked on many motion design projects to create user training materials.
Mobile responsiveness was an important requirement for our users. Week view and day view configurations we're available in addition to the month view.
SESSION DETAIL MOBILE VIEW
Mobile responsiveness was an important requirement for our users. Week view and day view configurations we're available in addition to the month view. I designed this mobile version of the flyout session details:
Mobile Session Details View
The Updated Design:
The previous version of the calendar lacked filters and the ability to register for sessions directly from the screen. The updated experience answered these user concerns, and also revamped the UI to match our updated brand kit.
Session Flyout View
When a session is clicked, users have the option to register for it and download calendar reminders.
Project Overview:
I led redesign efforts for the LMS's Live Training Calendar. Users struggled with live sessions discovery and registration. We dug into user feedback to create a functional calendar that addressed their concerns.
Reimagining the Live Training Calendar
Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.
Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.
In the previous Live Session Calendar design, users voiced issues around the following:
-
The ability to register directly for a session from this page
-
Filtering options to help find sessions
-
Interactivity with session details
-
Accessibility and poor mobile Responsiveness
Research Notes
-
Qualitative interviews with key users, from end users to customer onboarding specialists who were very close to the users.
-
System usage data utilized for insights
-
I was tasked with finding an existing backend tool to host and manage the process. After thorough evaluation of multiple options, the team decided to use MobilScroll as the base for our calendar, which we could customize and build and address our user's needs.
After the Update
-
Live Sessions display on calendar, with clear indication if the user is registered, completed, or on a session's waitlist. This was a mission-critical user requirement that was previously missing.
-
Filters and search added to calendar view. This helped users find live training sessions specific to their needs and scheudles. This was unanimously requested by all users we interviewed.
-
We included a “list view” for live sessions, where users can see a large list of upcoming sessions and register.
-
Clicking a session opens a popover with all session details and a register button. Users were interviewed on what they thought was important to include in the session details.
-
On mobile experience, the session details show as a full screen takeover. This exposes the same data as desktop and a course image.
________________________________
Note: This was my final project before my departure from Litmos, we were evaluating adding more functionality after this initial MVP launch depending on additional user feedback. Some more ideas that we were considering, but didn't make the MVP.
-
Personal Calendar Sync Functionality
-
Google Maps embedded for locations, so users can see session locations on a map and get directions.
-
Team or group specific training calendar view
User Issues
“The calendar is clunky and outdated, only shows sessions that I’m already registered for. I can’t use it to find new events.”
“Filters don't show up in the Calendar view”
“I can’t register for sessions on the calendar or see my specific details directly from the calendar, it’s view only”
In brief: Outdated calendar UI lacked expected session registration, discovery + filter functionality. Furthermore, calendar did not adhere to the LennyKit Design System.
Requirements
-
Must adhere to LennyKit design system and follow brand standards
-
1-2 click ability register / unregister to Live Training Sessions
-
The ability to navigate and search the calendar with filters
-
The user should be able to see session details directly on calendar
-
A view for multi-day sessions
-
Must work with ReactJS + Bootstrap5
-
Must be keyboard and screenreader accessible, and also mobile responsive
Calendar redesign
Here are some specifics about the UX Research and thought process behind these designs.
We held qualitative interviews with product onboarding specialists who were in lock step with users, in addition to users under Admin, Team Admin, and Learner personas. Beyond this, we pulled data from system records to help design around existing feature usage.
UX Case Study:
Many admin users found themselves lost amongst the many features and functions of Litmos. I led redesign of a navigation that allowed 1-click access to almost everywhere in the platform.
UX Case Study:
The previous Live Training calendar lacked the basic needs of the "learner" user persona. I led the sourcing efforts for the base tool, and redesign of the Live Training sessions tool.
More Designs:
Beyond my UX / UI design at Litmos, I also did motion visual design with the marketing team and instructional design to train customers on the advanced platform functions.
UX Case Studies and Project Overviews:
Litmos - Learning Management System
Project Overview:
Solving the Navigation Issue
I was brought in to evaluate options around enhancing the navigation of Litmos. The Admin users had difficulty finding their way around the platform, due to many links being hidden in subnavigations. Admins had to undergo special training to be able to locate many deeper functionalities of the platform, and this was not an ideal experience. By exposing & categorizing the links, we significantly improved efficiency when using the updated meganav.
Everything at your fingertips
The previous version of the calendar lacked filters and the ability to register for sessions directly from the screen. The updated experience answered these user concerns, and also revamped the UI to match our updated brand kit.
Mobile navigation
Special considerations had to be made for the mobile experience. For admins, we placed the navigation links under a simple, 1-level drill down, to ensure you can get to any page with 2 taps (and maybe a little scrolling).
Updated for all users
While the main goal was to simplify navigation for the admin user, we absolutely had to consider the other users in the platform for this update.
With this complex update, we enhanced the Navigation across the following types of Litmos users, each with their own position:
-
Learners
-
Team Admins
-
Account Owners
-
Content Access Only Users
Next Case Study
After the Update
-
Introduced a unified "mega" navigation menu that provides seamless access to all Admin and Learner functionalities, without having to switch between "Learner View" and "Admin View"
-
Reduced the number of clicks required to access main features to 2. This enhanced user efficiency as the previous average number of clicks was 5, (if the user knew where to go).
-
Enhanced the visual hierarchy and added clear labels to reduce user confusion and improve discoverability of features.
-
Added personalized navigation shortcuts based on user roles and frequently accessed pages.
-
Ensured the new navigation is fully responsive and accessible, providing a consistent experience across all devices. I managed communications and check-ins with accessibility vendors.