Learning Management System
A web platform for employee training programs in large organizations
Overview
The Challenge
This project was completed for a company that creates employee training programs. The company wanted to increase the efficiency of its programs by developing a custom learning management system (LMS) that would streamline the delivery and administration of training materials.
Deliverables
The company had an aggressive development timeline, and there was no room to negotiate. Fortunately, expected deliverables were scaled appropriately:
Wireframes for three distinct user types
High-fidelity mock-ups for one user type
My Role
I led a team of two UX/UI designers. Quenton Juma headed research, and Nurcan Gumus headed UI design. I took responsibility for gathering feedback from the CEO and stakeholders and translating it into sketches and wireframes.
Process
In addition to working under a time constraint, we had no direct access to the company’s user data or to its users themselves. Following a full UX process wasn’t possible. Therefore, we adapted the process to the realities of the project.
Research
Building Upon Assumptions
The company shared user insights from its white papers. We also had assumptions about users, based on our own experiences with employee training. These insights and assumptions formed the basis of three user personas.
The Learner
Pain points:
Afraid of asking questions
Afraid of making mistakes
Feels overwhelmed
Doesn’t receive enough guidance
Needs a platform to facilitate their gaining proficiency in the skills they need for the job
The Manager/Coach
Pain points:
Has to answer lots of questions
Has to correct lots of errors
Afraid of making mistakes that impact training
Frustrated by the time needed for training
Needs a platform for managing and tracking learners that requires minimal hand-holding
The Administrator
Pain points:
Has to answer lots of questions
Has to correct lots of errors
Frustrated by the time needed for training
Needs a platform for implementing training programs that requires minimal hand-holding
Validating Assumptions
To see if our personas were accurate enough to guide design, we consulted training literature and surveyed professionals about their training experiences.
Findings:
All persona pain points were emphasized by all sources
We noted a strong tension between two desires in trainees and trainers:
Trainees wanted both to be independent and to have guidance
Trainers wanted trainees to be independent but also wanted to guide them
To resolve this tension, an LMS should facilitate learning through:
an uncomplicated, intuitive interface
a full, clear view of the training program
an indicator of the user’s progress toward completion
Competitive Analysis
In order to meet our deadline, we’d have to borrow patterns from existing LMS models, so we consulted prominent platforms. Three in particular inspired us.
Features:
Course overview and map with time estimates
Enables users to ask questions and make notes
Interface:
Minimalist aesthetic reliant on text, white space, and small icons to direct the user’s attention
Generally light color palette, reserving darker shades for headers and major actions
Screen divided into a narrow left-hand navigation and a wider right-hand area for action
Design
Moodboard
The company already had a style guide for its website. Consisting of bold purples and blues and legible sans-serif fonts, it seemed suitable to the LMS. To confirm this, we gathered imagery reflecting important ideas for the LMS to convey to users:
Trust
Teamwork
Achievement
Simplicity
Modernity
Key Takeaways
The existing style guide did, in fact, suit the LMS.
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.
Refinement
Multiple rounds of feedback on sketches and rough early wireframes resulted in fuller sketches capturing most needed functionalities, allowing us to move forward with designing in Figma.
Wireframes and High-fidelity Mock-ups
Based on our 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.
Validation
Round 1
Although we had no access to users for one-on-one usability tests, we presented our work to key stakeholders, including a representative from one of the company’s major clients.
Feedback:
Stakeholders requested no major changes, validating our design direction
Stakeholders requested two additional interfaces to complete the LMS, one for team members and one for one for company administrators
“I really like that this is simple … Most LMS’s are a nightmare.”
— Program Designer
Round 2
After making revisions, we presented one last time to stakeholders.
Feedback:
Stakeholders requested no major changes, validating our revisions
Stakeholders requested that the team member interface be discarded because it was too similar to the manager/coach interface
“It’s a lot of work to make something simple … It’s very tempting to add and add.”
— CEO
Final Design
The wireframes and high-fidelity mock-ups now addressed user needs as simply as possible. The company was satisfied, and we handed off designs on schedule.
“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
Prototype
Insights
The design process must be adaptable.
Even if factors make following the full UX process impossible, the designer still has to find ways of meeting users’ needs as much as possible.
Challenging assumptions is essential.
In the absence of direct interaction with users, thoughtfully gathered stakeholder feedback can still anchor a designer’s decisions.
Make use of viable existing materials.
If a client asks for a refresh of old materials, validate them before discarding. Using old materials that still meet users’ needs is good design.
Good design is about refining solutions.
There’s no need to reinvent the wheel in designing a new product. Instead, adapt and improve upon patterns from successful existing models.