Classical LMS
Product Design, Motion Design, Branding
The brief: improve on the university’s learning management system for the student-side.
There is a lot of LMS software out there—what more can be improved and iterated on? UX; that was the goal of this project. After a cyclical process of interviewing, prototyping, testing, and animating, Classical LMS is my approach to the huge problem of making education as frictionless as possible between web, mobile, and the classroom. With a brand and multi-breakpoint interface flexible and scalable enough to make learning just a little bit more accessible, Classical targets the pain points of the current solution to prioritize seamless and efficient digital interaction.
The following animation presents the bespoke Classical LMS brand—emphasizing the variability of student strengths and priorities—the customizability of the mobile and web interfaces, as well as an introduction to "Plato", the GenAI assistant designed to be there when you need him.
One important thing to consider was which features would carry over from the flagship desktop version into tablet and mobile. I learned from interviewing that students felt that the mobile app for the current LMS was disjointed and useless in some ways; I needed to make the Classical mobile app an integrated, functional part of the ecosystem without becoming clunky with too many features.
The mobile app condenses the desktop version's modular home dashboard with three separate pages, "Courses" (bringing all the same elements from the desktop's sidebar navigation), "Announcements," and "Calendar." Plato finds his home in the fixed header, blending in with the other icons.
Combining an in-depth competitive analysis of similar software and interviewing students to pinpoint the main frustrations yielded a clearer path forward for what to iterate on, how to structure the experience, who I'm designing for, and why.
Mind mapping not only gives some direction to brand expression, but also to how to structure information with the user in mind; I like to exhaustively sketch wireframes in low-to-mid fidelity to get familiar with how the interface will work before moving into software. Experimenting with how high-fidelity UI components will look gives me a better idea of how sizing, colors, and typography will come across in the finished design, allowing me to adjust as needed for prototyping and testing.
Always document thoughts and notes before even beginning research, even if it doesn't all make it into the final designs.
Prototype test of Plato usability
The interviewing revealed that the current LMS system had confusing and sometimes inaccessible flows, clunky interactions, and redundant patterns, making everyday tasks and crucial moments frustrating (even maddening, especially in the stressful lives of college students).
Based on the surveys and research, the three primary goals for the interface became:
To have open and easy navigation to be able to get almost anywhere the student needs to go at any time;
To have a customizable experience, to be able to hide or show, rearrange, or label things as the student wishes;
And not to overwhelm the student with a needless and unnecessary quantity of information that communicates a false sense of urgency.
With the addition of marketing material like animations to the project, I also considered the goals, motivations, and frustrations of a secondary kind of user—educators and professors—who also need to interact with the software to provide students with material, and administrators, or, the "customer" of the product, who may may have very different needs and motivations than students or educators.
The full desktop interface:
