Web Design | MArch, 2020

PEAK LMS

Learning Management System Website Design

Orange County Superior Court | Case Study

My Role
UX Designer,
Web Designer / Developer
Tools
Cornerstone UI, Sublime Text, Adobe XD, Illustrator
Timeframe
4-5 Weeks
The Superior Court of Orange County decided to update the Learning Management System (LMS) they used to administer performance reviews and training courses. Prior to my involvement with the project, the Court decided to use the Cornerstone system for its LMS platform. I was asked to help implement an update to the Performance and Learning sections.

Problem

The Superior Court of Orange County needed a way to administer employee performance reviews and provide access to training programs for court employees across several court locations. The existing platform was limited in functionality and the design was outdated and not engaging.

Solution

Create modern, engaging landing page designs for the Performance and Learning (Training) modules on the existing Learning Management System (LMS) while implementing new baked-in tools and widgets improving usability of the new LMS platform by employees and managers.
The final website design can be seen above. The live website is hosted on an internal Court server, so I'm not able to share a public link to the project.

The image below is what the homepage looked like originally. A very stark layout that had not been customized much at all from the default settings that came with the Cornerstone LMS platform itself.
Project stakeholders had the preconception that LMS users had grown accustomed to this design and were afraid that drastic changes to the layout would disorient users. I assured them that proper web design principles would be followed, making the interface as easy to use as possible while at the same time updating the design.
I was given a timeframe of three weeks for this project which included designing the new page layouts, creating a new logo, and developing / implementing the HTML code onto the LMS platform once the design was approved.

Given this short timeframe, I was unable to perform user testing or do much research, but I tried to adhere to the design thinking process as much as possible.

Logo Development:
This project was for the Human Resources department, specifically the "Organizational Development" department that handled court-wide training, and the "Information Management" department in charge of performance reviews.

These departments decided to have a contest within HR to come with a new name and logo idea for the new LMS platform. The winning name was "PEAK - Performance, Engagement, Achievement, Knowledge" and the winning logo concept was:
After confirming I had the option to modify the image I began designing a new logo for use on the website based on the 'PEAK', mountaintop theme. Here is the initial sketch then some additional explorations in illustrator:
final logo:
Hero Illustration:
With the final logo and lockup complete, I began to design the webpage mockups in Adobe XD. To give the design a custom touch, I created the illustrated background also using XD. I would normally use Illustrator for something like this, but since I was using XD for the mockups, I wanted to try it there and see if I could keep everything in one program. I'm very pleased with the result:
What it looked like in XD:

Proposed Sitemap:
After sitting in on several kickoff meetings with the Organizational Development and Information Management teams I had a good idea of the changes they wanted to implement on the existing LMS platform. Below is the proposed sitemap:
Ultimately, the 'Landing Page' was removed as it was deemed unnecessary. Separate 'Welcome' pages were built as the first screen a user sees when they logon. One for the 'Employee' view and one for the 'Supervisor' view - each with different access to different modules. The layout was identical to the main home page shown above, except the links on some of the cards went to modules specific to Supervisors.

The 'Home' page and 'Welcome' page were combined as well as the 'Learning' and 'Learner Home' since they were essentially the same.
Above is a snapshot of what the backend of the LMS Admin platform looked like. I had to develop each section in custom HTML then paste the code into a custom HTML widget in the builder to generate the desired output. This was a tedious process as the system required two separate 'Saves' before changes were committed and could be seen on the live page.

Also, there was no media manager at all where you could view and manage images that had been uploaded into the system. You had to add an image widget to the builder in order to upload an image. To see which images had been uploaded, you had to add the image widget again and look at a dropdown list of previously uploaded images. As you can imagine, this made referencing image URLs quite tedious.

Conclusion

This project had a large scope and a very short timeline for one person, coupled with the constraints of using a limiting, third-party, LMS software system. The deadline and specific requirements were met however, and the stakeholders were very happy with my deliverables.