I was approached by Edith Cowan University (ECU) to create an eLearning platform for General Practitioners (GPs) wishing to gain RACGP accreditation in suicide prevention. The client requested an engaging web application incorporating interactive learning processes, allowing for seamless user experience.
My business partner Phuong Huynh and I worked directly with Associate Professor Owen Carter, the director of the project.
The eLearning content consisted of three scenarios or health “problems” focusing on one patient. General information, videos, questions, and resources were also included.
My role as freelance UI/UX Designer and Front-end Developer was to create an eLearning web application suitable for GPs, and present this information in an engaging, consistent and accessible way.
I worked through five phases:
- Plan and research: After meeting with the client, I began researching the market and the potential users of the web application.
- Sketch and ideate: I formulated a design approach informed by my research.
- Prototype and design: I designed the web application, including user interface and site flow.
- Feedback and iteration: I presented the prototype to client and considered any feedback they had.
- Build: I adjusted application and delivered.
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.
Clear hierarchy, seamless interaction flow, and feedback and reassurance (e.g. confirmation message, visual cues for errors and notifications or call-to-actions).
Clear and accessible. Everything would be centralised so users would know exactly what to do next.
Application would guide users through platform and track progress. Doctors would know how long each module would take before they began. They could also save the eLearning course and return to it later.
Less static content, more interactive.
Easy to find ‘help’ points so users could contact course advisors if required.
Prototype and design
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.
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.
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.
- 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.
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!
Research Director, Edith Cowan University