Knowly
A learning management system for students and teachers to easily navigate courses, grades, messages, and other features. The dashboard design pattern makes detailed information visible in a delightful, and unobtrusive way.
While working as a UX Designer with an online yoga certification business, we utilized a learning management system (LMS) to provide courses to students. This is where we discovered limitations of their current platform. I designed a new product that would streamline the process of online education, from application to finishing a course and uploading graduation requirements. I wanted to provide users with a product that contains these features without being overwhelming.
THE CHALLENGE
Designed wireframes, interactive components and interactive prototypes
Created user and task flows, site map, affinity maps, and user personas
Completed usability testing, user and competitive research
DELIVERABLES PROVIDED
DISCOVERING THE PROBLEM
This was an important step to ensure that I was preforming relevant research and asking the right questions to participants. I contemplated which questions would lead me to the problem at hand.
Research Objectives
Learn user’s pain points are in locating information or navigating through dashboard screens
Determine design patterns and navigation styles to easily help users find information
Understand what users want and need from their current learning platform
Understand the most used and valuable features for users to organize the main screens accordingly
I used the Business Canvas Model template created by Alexander Osterwalder in order to visualize and focus on the most strategically important aspects of the product and to highlight key areas.
Developing a Product Strategy
I interviewed 5 participants who are students using the current LMS platform. Below are the most valuable insights gained from user research, followed by proposed solutions:
User Interviews
Users were frustrated by having to navigate between separate accounts for registration and accessing courses
Solution- combine these features avoiding the need for separate accounts
Users wanted to access the individual course pages in less clicks
Solution- provide “quick look” cards on dashboard that will take you to course in 1 click
60% of users stated their interface was crowded, felt overwhelming, and difficult to navigate
Solution- use distinct “sections” of dashboard to differentiate between features and use simple navigation pattern
Most users stated that the labels for various links were confusing and difficult to remember
Solution- employ icons and clear, simple labels. Do not use only icons or use labels that do not resemble the real-world
Affinity mapping allowed me to discover themes and common patterns within user feedback. It helped me organize their statements and gain insights from their commonalities.
User Statements and Affinity Mapping
Analyzing competitors allowed me to discover what was missing in the current market, design patterns that were successful, and areas of opportunity.
Competitive Analysis
Zoom and collaboration tool integration
KEY STRENGTH
KEY WEAKNESS
Outdated, more complex UI
Over 400 integrations & over 40 languages supported
KEY STRENGTH
Less support options than competitors (chat, 24/7 support, tutors)
KEY WEAKNESS
KEY STRENGTH
Robust mobile learning platform
KEY WEAKNESS
No phone or chat support on weekends
Success Measures
Determining objective success measures gave me a basis on which to evaluate the success of the design.
The product will be rated at over 68% by users on the system usability scale (SUS)
Task completion rate will be at least 95% for all users and tasks
User misclick rate will be under 30% for each task
IDEATING POSSIBLE DESIGNS
User Flow Mapping
Upload Graduation Requirements
Click to enlarge!
Login/Signup
Click to enlarge!
Site Map
Key
Click to enlarge!
Low-Fidelity Sketches
Using pencil and paper for the first round of designs allowed me to explore ideas without getting too far into a digitized design. I was able to quickly explore several ideas using this method.
DESIGNING USING DATA
Mid-Fidelity Wireframes
Dashboard is clean with a clear distinction of each section, allowing robust amount of content without overwhelming the user.
Navigation bar allows users to quickly jump to different pages while keeping all content visible on the screen.
Users can send messages to instructors, see grades, upcoming assignments, and relevant course documents.
Users can access everything about a course on each individual course page.
Reports give detailed information on performance, attendance, grades, and degree progress.
Users can get even more detail by clicking on individual cards in each section.
Users can access school information on the same platform.
This includes relevant school files, events, graduation requirements, and department information.
Component Library
Typography
Color Palettes
Primary Palette
Accent Palette
Cards
Icons
Hi-fidelity Wireframes
ORIGINAL COURSE PAGE
NEW DESIGN
ORIGINAL DASHBOARD
NEW DESIGN
TESTING MY DESIGN
A usability test was performed once the high-fidelity prototype was completed. This allowed me to identify any areas of opportunity or areas of user confusion. I was also able to check if success measures were met for the prototype. Below are the insights I gained:
Usability Testing
All tasks were efficiently and quickly completed. Average time spent to message an instructor went from 22.9 seconds to 14.7 seconds, a decrease of 35.8%.
Users rated the app at 72% on the system usability scale (SUS). Industry standard for a desired score is at least 68%.
Task completion rate was 98% for all tasks assigned. Some users took indirect paths, but till completed each task.
Users mentioned wanting a button to add a new course on the course page. This would allow already registered course to be added
Users mentioned wanting to see a registration tab within the navigation bar
The resulting takeaways from usability testing were utilized to make revisions to my design. The final design was created with user feedback, needs, and pain points from research in mind.
Making Revisions
Created a registration module on the school dashboard for quicker access to register for new courses
Before
After
Added a button for users to add a course number for courses they’ve already registered for
Before
After
The Knowly LMS platform provides efficient solutions to user pain points, wants and needs. Below are some of the key ways in which the product makes a positive impact for users and stakeholders:
Key Takeaways
Knowly was successful in providing a useful and usable product that delighted users. The product increased task completion, average time to task completion, and received higher ratings on the system usability scale. This will increase user retention and conversion, as well as allow me to objectively explain design decisions to stakeholders.
Product
Testing revealed several ways in which small changes allowed faster task completion and way-finding. Usability testing was key in ensuring the product met user expectations. By continuously measuring key performance indicators, user actions, and feedback, I was able to quickly identify areas of opportunity.
Testing
Thank you!
More projects to check out
Addition of an eCommerce feature to the Apple Music app that follows brand design system guidelines.
An end-to-end mobile app designed to allow healthcare workers to search for and access quick, reliable clinical information.