E-learning Web App • Case Study

Master Managers

Project Overview

Background

Master Managers is a new e-learning course venture by parent company Goal Makers. This new course comes from a recent investment of intellectual property from a veteran consulting company.

Challenge

Research and design the learner’s journey under the constraints of a third party e-learning platform chosen by the client.

Design

Delivered a web app design for the Master Managers e-learning course that met constraints of the existing platform by creating content blocks that could be arranged in various configurations to deliver more engaging content to the learner.

Deliverables

  • User Research

  • User Persona + Flows

  • Sketches + Wireframes

  • Clickable Prototypes

  • Mood Board

Project Info

  • My Role: Lead UX Designer

  • Timeline: 2 weeks

  • Project Type: Web Application

  • Tools: Sketch, Figma

 Research & Synthesis

 

Survey

Surveyed 50 participants to better understand the e-learning process:

  • Methods used to learn new skills

  • User pain points during online courses

  • Most valuable learning experiences

Interviews

Interviewed 12 adult learners to gain insights about:

  • Online course likes and dislikes

  • Motivation through online courses

  • Importance of feedback

Research Discoveries

Affinity mapped our insights to identify patterns and common themes such as:

  • Clear course expectations

  • Opportunities for feedback

  • Content variation

Learner User Persona

Based upon our key research discoveries, we developed our user personas frustrations and needs to guide our design.

Design Framework

Redefined Problem Statement

When learners take an online course, they need varied content. Leah Learner typically feels disengaged in e-learning courses. How might we design Master Managers to keep her engaged and interested in the course?

Design Process

Research Driven Design Objectives

  • Design course content block types

  • Design varied content interactions

  • Set clear expectations for users

  • Create course certification

User Flow

We created Leah Learner’s user flow to establish her journey from the Goal Makers website to the completion of the Master Managers course. Here we implement types of lesson modules that can be arranged differently in each lesson to provide the learner with content variation and the client with a content strategy that can be implemented on their selected platform.

 Design Ideation

Evolution of a Content Block

The long-text content block underwent the most interactional change through the iterative process. When we tested our paper prototype, we received feedback about the structure of the content that we implemented in the mid-fi. After another round of usability testing for the mid-fi prototype, we received additional feedback on the lack of user interaction on the page, which we took action on in the high-fi prototype.

  • Paper Prototype.

    • Users want to know where they are in the lesson.
    • Users want key takeaways at the bottom of the page.

  • Mid-fi Wireframe.

    • Action: Implemented clear pagination and side bar navigation

    • Insight: Page lacked interaction aside from clicking through to the next page

  • Hi-fi Prototype.

    • Action: Implemented click to reveal feature for key insights

    • Action: Disabled next button until user reveals all key insights

“A-ha” Moment

We needed a comprehensive onboarding process. Through the iterative design process and usability testing we made a pivotal discovery about the importance of the on-boarding process. In our paper prototype, we overlooked the onboarding process. Through our mid-fi prototype, we received an increasing amount of user feedback about the on-boarding process and the users desire to have more in-depth information about the course structure prior to beginning the first unit.

Mid-Fi Onboarding • Iteration 1

We introduced a video as part of the on-boarding process in our paper prototype, but users still wanted the course objectives laid out more clearly so here we developed the first iteration of the course contents page.

 

Mid-Fi Onboarding • Iteration 2

In the second iteration we took user feedback from the first iteration to implement more specific information about how the course and content is structured throughout. We also received feedback that users wanted to know more about the community aspect of the course, and about what they would get to take away after the course. We then designed the Course Community + Takeaways page to continue to set clear expectations and to showcase the LinkedIn Master Managers community that gives learners the opportunity to connect with classmates and experts.

 

Hi-Fi Onboarding

Changed community platform to Slack and separated the Community and Takeaways pages. The client also asked us to change the Takeaways page to focus on the Master Manifesto, a custom book for the learner.

Design Deliverables

 

Mood Board

Goal Makers asked us to modernize the brand using the existing color scheme. I designed a mood board based on a few key ideas about the GM brand like, elite, clean, prestigious, streamline, and vibrant. I included both digital and physical inspiration.

“WE CAN VISUALIZE THIS BRANDING BEING SUCCESSFUL ACROSS ALL OF OUR PRODUCTS.”
— Goal Makers Team

Research Driven Design Guidelines

We took a creative approach to an annotated wireframe- using it as a design tool to communicate the relationship between the research insights we discovered and the design decisions that were ultimately made. The client can now use these screens as future reference when developing the content on their third-party platform.

 

Hi-fi Prototype

  • Onboarding Experience.

    The on-boarding experience introduces users to the Master Managers course by setting clear expectations about:

    • Introduction video led by the industry experts.

    • Content structure through Units, Lessons, Modules, Knowledge Checks, and Self- Assessments.

    • 6 types of content blocks throughout the course and explains that each lessons’ arrangement will change.

    • Introduces the custom Master Manifesto takeaway.

  • Long Text With Click-to-Reveal.

    This content block was our worst-case-scenario for the client, and the user. We made this long-text reading module more interactive by:

    • Breaking the text into short paragraphs.

    • Adding click to reveal feature on key takeaways.

    • Adding a stop so that users can’t move on to the next module until they complete the click to reveal activity.

  • Self Assessment & Lesson Summary.

    We designed a self assessment module that allows users to reflect on their learnings by:

    • Inputing free-form information about what they learned and how they could practically apply it.

    • Recording self assessment answers by adding it to their custom Master Manifesto that is given at course completion.

    • Providing users with encouraging success modals.

  • Next Steps

    Conduct usability test on hi-fi prototype for branding.

    Design Master Managers dashboard.

    Design digital Master Manifesto page.

    Conduct A/B testing for dark vs. light mode platform.

  • Lessons Learned

    We began this project by working in Sketch, which we quickly found to be inefficient from a collaborative standpoint. We pivoted after the first round of Mid-Fi testing and worked together to learn Figma in order to have a more effective team work flow. We ultimately were able to work more efficiently together in Figma and we were able to deliver the product on schedule.