code-institue-thumbnail (2).png

Code Institute

Code Institute provides a service with the coding skills that help people become software developers. With the demand for software developers constantly increasing this online programme gives learners the skills they need to pursue a career in software development.

My role: Designer

The Problem

The Problem

We identified that the usability of our learning management system (LMS) was unclear and proved to be difficult for users to navigate through.

With the expansion of the course content and additional programs being added we needed to ensure we improved both the UX and the UI of the LMS as a whole. This involved the looking at structure of the pages, navigation through these pages, UI elements, static imagery, video’s etc.

The Approach

The Approach

Taking the existing LMS we mapped out all if the user interactions at each stage throughout the course. This helped us understand the points where users found difficulty and helped us plan out the area’s that needed to be addressed.

New Navigation Flow

New Navigation Flow

Using wireframes we mapped out new flows to make navigating through the LMS more user friendly. From here prototypes were created and tested with old, new and existing users of our course to help validate improvements and highlight problem area’s that needed additional work.

code institute - 5 (2).png
Final Design & Implementation

Final Design & Implementation

The new design ensures that all lessons are easily accessible through the use collapsible accordions. We introduced a progress bar to help users to track their progress and included inks to handouts and an overview of important submission dates.

We created new template designs for blocks that can easily be configured and replicated to create new pages and reorder, add and remove content as required.

code institute - 7.png
code institute - 8 (2).png