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:
I also explored some additional icons which didn't end up getting used in this project:
Once I was happy with the logo, I began working on incorporating the logotype and tagline. I continued iterating in illustrator basing the design loosely on the winning logo concept. I presented the options below to the stakeholders to decide on the final logo. They went with slide #1.
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.
