Product Redesign - January 2020 to April 2021
Learning Management System Redesign
Product Redesign - January 2020 to April 2021
Role:
Lead UX UI Designer
User Researcher
Marine Learning Systems gives marine companies worldwide a more sophisticated, streamlined, and custom training and assessment management experience. They have been primarily marketing to the maritime industry but are quickly expanding. Since the start of 2019, I have been the lead designer on an ambitious project to redesign their mobile and desktop experience and create a scalable design system.
Team:
Alastair Izzard
Debbie Eager
Jeannie Tse
Craig Smith
Marine Learning Systems created a Learning Management System primarily for the Maritime Industry to deliver training and assessments to their employees. The application is a great tool for keeping records of compliance and employee safety up to date. At the moment, each enterprise that uses the system can configure anything they like. This allows for great flexibility in the product but has also created a difficult site to manage and change.
The Learning Management System was configurable for each customer. As a new feature was needed, it would be created and implemented for that customer. If we wanted to redesign the product, we would have to come up with a different approach.
Introducing a user-centered approach was the first task in this redesign. The team already had extensive knowledge of their users from 10 years of closely working with their customers. We just needed to document their knowledge. I introduced persona building, and we worked together to create 6 different personas.
By starting with Personas, we were able to begin empathizing with our users. This would be the foundation for making design decisions when redesigning the platform. I used Miro as a collaboration tool to facilitate the building of our primary personas. Then I translated this work onto our Figma master document. We had initially thought that there were three types of users; Students, Instructors, and Administrators. We separated 6 different personas with distinct needs and goals, pains, and frustrations upon deeper discussion. By first empathizing with our users, we were able to identify the main pain points and goals.
01.
Users need a mobile friendly design to complete courses efficiently
02.
Users need more intuitive navigation through the LMS
03.
Users need clear explanation of system processes
These are our two student personas that are differentiated by their tech literacy.
I created the first wireframes with a mobile-first approach. We had to look at all interactions to make sure that they would focus on the mobile experience. In the beginning, flows like this exam flow were optimized for a desktop experience. Navigation was hidden or confusing for the user, and exam processes were not transparent.
We created user stories for parts of the product, such as the exam flow. I was able to prototype solutions, test them with users, and then iterate. As part of my process, I detailed every flow and weighed out the pros and cons with my team.
The final design features a diagram of the process of an exam being sent to a mainland server before a grade can be updated. Areas that show passing grades and other numerical values have been represented with visual elements for quicker understanding. When an exam is processing, there is an indication of this beside the exam name in the table of contents.
This redesign's central theme was allowing the user to navigate around the site with as little interruption as possible. We wanted the content to be the focus. The newly designed Learning Management features easily configurable areas for each customer to add their own photos. Customers can change colours and font sizes to tailor the site to their brand needs, but now the template incorporates all of the current designs' best aspects.
Dashboards can have several different components depending on the customers needs. Students can view required courses, begin an onboarding walk through, and keep up with news and events from their organization.
Items in the catalogue are now separated into types of content. An icon beside each title indicates to any user what they are about to view. This reduces confusion when searching for a specific type of content.
Students can now view course due dates and assessments directly on the course page. Hidden processes such as an exam processing is now shown and easy to understand.
This was a great project for me to work on as it allowed me to take on a leadership role. The project provides value to the company, involved much learning and detailed design system creation. However, pandemic delays and technical constraints have delayed the launch of this redesign. Still, I learned some important takeaways from this project related to product and business processes.
I explored all of the best possible designs before bringing it back to a feasible product. In the end, stringent technical restraints limited what is possible, but I still advocated for what I believe is essential to a good user experience.
I learned how to set project timelines and recognize that I'm still learning. Defining a true MVP is crucial not to create something that isn't shippable.
New feature requests, changing CSS systems, and the pandemic meant that the project's scope was constantly changing. I had to find a balance between designing in the future and creating something that could be implemented in the present.
.svg){kind=icon}