Learning Management System
Year
2023
Role
UX DESIGNER / PROJECT LEAD
Brief
A simple, intuitive web platform for organizing and administering employee training programs for large organizations
Overview
The Challenge
This product was designed for a company that develops employee training programs for large organizations, using a licensed methodology that helps employees reach target proficiencies faster than other programs. Speed and is a company hallmark.
The company wanted to increase the efficiency of its training programs by building a custom learning management system (LMS) that would offer clients a streamlined platform for organizing and deploying training materials.
Parameters
The company had outlined necessary functionalities for three key user types.
Learners
Employees undergoing training
LMS Functionalities
see progress toward overall completion
access training activities and mark complete
send questions to managers/coaches
send feedback about technical difficulties
Managers and Coaches
Employees supervising learners
LMS Functionalities
see learners’ progress toward completion
sign off on important training activities
answer learners’ questions or send updates
Learning Administrators
Employees overseeing the LMS
LMS Functionalities
upload and customize training materials
add new users to the LMS
assign users to roles and programs
read feedback about technical difficulties
Deliverables
The company had an aggressive development timeline, and because engineers had already been scheduled to start building the LMS immediately after we handed off design materials, there was no room to negotiate. Fortunately, expectations for deliverables had been scaled to better fit the timeline.
Requested Materials for Hand-off
Wireframes for the entire LMS
High-fidelity mock-ups for the learner user type
A style guide
My Role
I led a team of two other UX/UI designers and was responsible for:
Serving as liaison to the company CEO
Presenting the team’s work for feedback
Translating company specifications and feedback into sketches and wireframes
I was grateful to work with a team that had a diversity of talents. Quenton Juma headed research and documentation, and Nurcan Gumus headed UI design.
Process
We were working on a complex project under a major time constraint. And because of privacy restrictions, we had no access to the company’s user data or its users themselves. Following a full UX process wasn’t going to be possible.
To deliver materials on time without compromising the objectivity of our design choices, we had to adapt the process to the realities of the project with a compressed research phase and many rounds of client feedback.
Research
Building Upon Assumptions
The company’s white papers offered some user insights, and given that everyone on the design team had undergone training in past jobs, we also had our own assumptions about users. These insights and assumptions formed the basis for rough user personas.
Learner
Pain Points
Afraid of asking questions
Afraid of making mistakes
Afraid of not meeting expectations
Feeling overwhelmed
Not receiving enough guidance
Needs a simple, intuitive platform to facilitate their gaining proficiency in the skills they need for the job
Manager/Coach
Pain Points
Having to answer lots of questions
Having to correct lots of errors
Afraid of training employees insufficiently
Afraid of making mistakes that impact training
Frustrated by the time needed for training
Needs a simple, intuitive platform for managing and tracking learners that requires minimal hand-holding
Learning Administrator
Pain Points
Having to answer lots of questions
Having to correct lots of errors
Concerned about maintaining quality of service
Frustrated by the time needed for training
Needs a simple, intuitive platform for implementing training that requires minimal hand-holding
Validating Assumptions
To see if our user personas were accurate enough to guide design, we consulted training literature and surveyed people about their experiences with training.
Findings
All pain points we had identified were cited across sources as critical
We also noted a strong tension between two desires in trainees and trainers:
Trainees wanted both to be independent and to have ample guidance
Trainers wanted trainees to be independent but also wanted to actively ensure their success
To resolve this tension, an LMS should not only house training programs but facilitate completion of them by:
having an uncomplicated, intuitive interface
giving a full, clear view of the current training program
showing progress toward completion
showing activities that remain to be done
Competitor Analysis
To design an LMS in such a short time, we’d have to borrow existing patterns, so we sought out tried-and-true patterns from prominent learning and training platforms. We consulted many, but three platforms in particular gave us inspiration.
Features
Course overview
Course map with time estimates
Section where users can ask questions
Section where users can make notes
Interface
Minimalist aesthetic reliant on text, white space, and small icons to direct the user
Generally light color palette, using bold colors only for headers and major actions
Screen divided into two areas, a narrow one for navigation and a wider one for action
Design
Moodboard and Style Guide
The company already had a style guide for its website, consisting of bold purples and blues and legible sans-serif fonts. It seemed usable for the LMS. To confirm this, we gathered imagery reflecting important ideas for the LMS to convey to users.
Ideas
Trust
Teamwork
Achievement
Simplicity
Modernity
Key Takeaways
The existing style guide was well suited to the LMS, needing only minor tweaks
Uncomplicated imagery emphasized the need for a minimalist interface
First Ideation
Our initial sketches proposed a basic calendar-centered interface for all user types. These gave us something to share with CEO to start gathering feedback.
Feedback from the CEO
Learner Interface
Default view should show the current day’s activities
Calendar view should be optional
Managers/Coach Interface
Remove calendar view entirely
Refine and convey hierarchy of functionalities
First: monitoring learners’ progress
Second: signing off on activities
Third: seeing messages from learners
Learning Administrator Interface
Remove calendar view entirely
Refine and convey hierarchy of functionalities
First: adding and editing training programs
Second: adding users and assigning them to programs
Third: seeing feedback about technical difficulties
Refinement
Multiple rounds of CEO feedback on sketches and rough early wireframes resulted in fuller sketches capturing almost all needed functionalities, allowing us to move forward with design in Figma.
Wireframes and High-fidelity Mock-ups
Based on the final sketches, we built wireframes for all three user types, giving us our first complete view of the LMS. We also made rough high-fidelity mock-ups of key screens with color variations to begin gathering feedback about the aesthetic.
Validation
Round 1
Although we had no access to users for in-depth one-on-one usability tests, we were able to present to stakeholders in a group meeting for feedback.
Stakeholders
Company CEO
Program designer from the company
Representative from one of the company’s major clients
Representative from the engineering team contracted to build the LMS
Key Feedback on Wireframes
Stakeholders requested no major changes to the existing interfaces, validating the direction of design
Stakeholders praised the design’s simplicity and made suggestions for further simplification at a granular level
Stakeholders requested two additional interfaces to complete the LMS:
One for team members (employees who simply monitor training programs)
One for company administrators (who add client organizations, give learning administrators access, and change seat counts in programs)
“It’s a lot of work to make something simple … It’s very tempting to add and add.”
— CEO
Key Feedback on High-fidelity Mock-ups
Stakeholders praised the energy of the color palette, validating the aesthetic
Stakeholders preferred the variations with the lightest colors and requested that the overall feel of the app be as light as possible
“I really like that this is simple … Most LMS’s are a nightmare.”
— Program Designer
Round 2
After incorporating feedback from the previous round, plus further input from the CEO, we presented one last time to a group of stakeholders.
Stakeholders
Company CEO
Entire engineering team contracted to build the LMS
Feedback on Wireframes
Stakeholders requested no major changes, validating the revisions
Stakeholders requested that the team member interface be discarded for being too similar to the manager/coach interface
Stakeholders made a number of minor suggestions for further streamlining
Final Design
After final revisions, the wireframes and high-fidelity mock-ups addressed all user needs as simply as possible. The company was satisfied, and we handed off our designs on schedule for the engineering team to begin building the LMS.
“You really pulled it together and comprehensively captured our UX needs ... I really appreciate how quickly you responded to updates and changes and turning these around for our clients, consultant, and dev team to have the highest quality.”
— CEO
Final Prototype
Insights
The design process must be adaptable
Despite not being able to follow a full UX process, we had to find a way to deliver a thoughtfully designed product that met client specifications and user needs.
Challenging assumptions is essential
In the absence of one-on-one contact with users, stakeholder feedback can still anchor designers’ decision-making by repeatedly challenging assumptions.
Make use of viable existing materials
If a client asks for a refresh of something that may still work, validate it before discarding. Using old materials that meet user needs is still good design.
Design is often about refining solutions
There are many successful LMS models, so there’s no need to reinvent the wheel when designing a new one. Adapt and improve upon existing patterns.