DeLP
Updating the user experience for 3C Institute’s dynamic e-learning platform
Project overview
3C Institute’s has utilized it’s proprietary Dynamic E-Learning Platform (DeLP) to build many engaging online courses using multimedia learning strategies that have been proven to be just as effective as in-person instruction. However, the interface and user experience were outdated and lacked responsive design, making it ineffective on mobile and tablet devices.
My role
My objectives for this project included:
- Designing mockups for the DeLP dashboard and course player across desktop, tablet, and mobile devices.
- Creating a new “Sidebar” course player UI for mobile devices.
- Ensuring 508 compliance for the out-of-the-box platform.
- Rework existing interactive activity and feedback designs.
- Designing the UI for the final text results page.
- Developing a new certificate design to accommodate system-generated inputs.
April 2019 - ongoing
Skills
Product Design
Interaction Design
Tools
Photoshop
Illustrator
Adobe XD
Team
3C Team
Grace Wickham – Project Manager
Steve Grothman – Director of Project Management
Kim Pifer – Head of Editorial/Content
Josh Smith – Editorial/Content
Wes Sommer – Video Director
Morgan Huegel – Developer
Kelly Fish – Art Director
Hailey Hammond – Graphic Design
CSR Team
Marleen Wong – CEO and Co-founder of CSR
Pamela Vona – Cofounder of CSR
Angela Krauss – Director of Operations at CSR
Development process
Dashboard
The DeLP dashboard is where learners land to navigate the course after logging into their account.
Initial mockups
My first exercise was pushing the bounds of all the features the team and I imagined for a DeLP2 dashboard.
Further mockup refinement
After the initial mockups exercise I took what I learned from the team’s feedback and from the existing DeLP dashboard interface (left hand navigation, main content to the right).
Optional and required modules/lessons
We determined the need to visually distinguish required and optional lessons and modules. Through this exercise I developed several versions of how these could be displayed.
508 compliance
In order to adhere with 508 compliance standards, I developed what would be known as the “out-of-the-box” dashboard to meet at least Web Content Accessibility Guidelines (WCAG) 2.0 AA.
Course progress
I designed several options for how we could indicate the user’s progression through a lesson.
Course player
The course player is where the user interacts with the video and interactive content. While developing the wireframes for the course player, we approached the UI with 2 presentation methods, modal view and full page view.
Breadcrumbs and modal
Implementing breadcrumbs was necessary for the full page view as that is how users would navigate back to the dashboard. For the modal view breadcrumbs weren’t necessary as the user could exit out of the modal to come back to the dashboard.
Outline view
The outline view of the course player would show the content that makes up a lesson in a left hand navigation.
Progress view
The progress view on the other hand would show the lesson content as a progress bar on the bottom of the player.
Sidebar player
I developed several mockups to show how the sidebar version of the course player would look on a mobile device.
Responsive design
For each course player design, I also developed mockups for how the UI would look on a mobile device.
Interactives
DeLP uses an array of interactive exercises to let users practice the skills they have been taught and enforce learning objectives. Redesigning these interactives for the new DeLP involved reimagining existing features such as personalized feedback as well as imagining new features that would provide course builders with more flexibility in displaying course content.
Drag and drops
List menu
Menus
<span data-metadata=""><span data-buffer="">Multiple choice
Final test results
After a user has completed the course and has taken the final test, we needed a page to show their results and have a change to review their answers.
Certificates
Once a user has passed the final test, they receive a certificate of completion. The DeLP system allows for some of this content to be filled in by the system such as the user name, pass date, and certificate ID, while other information is entered by a course builder, such has the course name and the amount of CE credits. We developed a certificate template that would leave space for these pieces of information to be filled, while “baking in” some content into the certificate, such as APA and NBCC statements, course logo, and other language that would remain static for all course certificates.
