Improving eLearning User Experience for Better Engagement

Plan and research

ECU’s research indicated doctors were short on time, and preferred simple computer programs. They didn’t want to waste time fiddling around. The client also conveyed the belief that students learned more effectively when they’re actively engaged, which meant we needed to create an immersive application.

I conducted a competitor analysis to review design features I may want to incorporate into the ECU project. I decided to take a similar approach to the Open2Study website, which uses well-recognised UI patterns, and presents course information in an easy and accessible way.

Sketch and ideate

In response to the central question of how to present the content in A Practical Guide to Suicide Prevention for GPs most effectively, we decided ECU’s course structure would be divided into three modules. Each module would present the student with case studies to be worked through by engaging in interactive learning activities.

Prototype and design

I established the site structure, flow and functionality by creating an interactive low-fidelity wireframe using InVision. The low-fi screenflow shows a high-level view of the site, and how the pages link to each other.

After the user has either logged in or created an account, they’re welcomed to the eLearning course and directed to the dashboard. This is where the course begins, starting at module one.

Dashboard

The dashboard is like a user map. It’s a single page that links to each module. It shows the user where they are, what progress they have made and directs them towards their next step.

Each module presents:

• Introduction: Information on module
• Connect: Pre-quiz to test user knowledge
• Apply: Case Study Video + Question
• Appraise: Summary of content and references to further reading

The user cannot progress to next module unless they get 80% or more on the final question on the ‘Apply’ page. If they score below 80%, they will be directed to the beginning of the module to start again.

Prototype and usability test

The Usability Phase is to determine:

• User’s satisfaction with the application
• Usability issues
• How elements are arranged on the application and their functionality

We used Sketch and InVision to create clickable prototypes for testing. Stakeholders were then able to provide feedback.

User interface

I started by designing the elements of the UI design – buttons, cards, lists, forms and components. I find designing these elements first allows me to create page layouts to fit them instead of the other way around, resulting in a more consistent application. I can also identify incompatibilities with UI components and page layouts immediately.

The application needed to meet the Web Content Accessibility Guidelines (WCAG) AA standards, which meant accessible content (headings, links and tables) and colour contrast. ECU’s research suggested the users of this interface would be 40+ in age.

Design

• Try to minimise clutter and keep it simple.
• Use white space. Ensure there was enough white space between text, images, columns and margins. I believe this makes information easier to digest.
• Use larger font and design bigger buttons.
• Avoid using too many colours. I picked blue as the primary colour because it represents intelligence, integrity, loyalty, confidence, reliability and expertise. It’s also a colour synonymous with trust, as technology brands like IBM, PayPal, LinkedIn, Facebook and Intel use blue.
• I used the 8pt grid system to place the UI components and ensure the scaling was consistent for different devices.

Interactions

Our focus on creating an engaging learning experience meant one of our main concerns was to move away from static content and make the learning guide as interactive as possible. We also wanted to avoid it becoming too confusing. We decided to create different ways of answering the questions. We chose multiple choice, free text, drag-and-drop, slider (left and right) and puzzle (reorder/prioritise). We chose these depending on the questions provided.

Joe and Phuong are a "Magic" team when delivering e-learning solutions. We collaborated on a complex, multi-module learning system for general practitioners. Their work was always spot on to our needs, effective execution, and technically excellent. Highly recommended for anyone seeking e-learning development!