E-Learning Website Redesign
PROJECT TIMELINE: Sept'23 to present
How might we enhance the learning experience of the users through our simulations while optimising the current design process at the organization?
Overview
The Virtual and Augmented Reality Lab (VARLab) is an applied research innovation lab at Conestoga College, a leading Canadian Polytechnic Institute that builds simulation games for Trades Skills programs.
In this project, I tackled the challenge in creating a design system & improving our design process to both reduce development time and incorporate more effective user feedback mechanisms.
​
PROJECTS: Paramedicine, Public Health Inspection, Trades Electricals, Respiratory Therapy, Student E-learning dashboard
Copyright - Centre for Virtual Reality Innovation.
Voice by Katrina Fraser - Instructional Designer
UX/UI Designer- Sana Javeed
Our Approach
​As the UX/UI lead at the organization managing design activities across 3+ projects, we established a strategy to
​
-
Identify key challenges in the current design and development process.
-
Develop a ohesive design system to ensure consistency and streamline the developer handoff.
-
Understand user behavior patterns to create effective usage of UI components across projects
-
Involve users early and integrate feedback throughout the testing process, improving design iterations and reducing development revisions.
Keywords: Stakeholder interviews, Roadmaps, Strategic thinking, Prototypes, Storyboarding, Design System, Usability TestingDesign Handover, Design Syncs
Identifying the
problem space
​​Inconsistent Design Practices
An unstructured design system leading to design elements varying, causing inefficiencies.​
​Inefficient Handoff to Developers
Lack of clear guidelines and tools resulting in miscommunication across teams, thus delaying implementation.
​Late User Involvement
Users engaged too late in the process, leading to missed pain points and costly revisions.
Implement an iterative feedback mechanism to involve users early that create impactful designs
03
02
01
Goals
Translate key user needs and behavioral motivations into tangible and actionable UI patterns.
Develop a cohesive design system to ensure consistency & streamline the design handoff process
Roadmap
8 month
Discovery & Research
Define & Develop
Design System
Identify areas of improvement in user feedback
Implement User feedback mechanism
Month 1-2
-
Stakeholder interviews
-
User interviews
-
BenchmarK Analysis
Month 3-4-5-6
-
Establish Design guidelines
-
Create component library
Month 5-6
-
User Research Plan development
-
Cross-functional team collaboration
Month 7-8
-
Establish collaborative tools
-
Establish regular meetings for design syncs
-
Continuous feedback integration
Virtual reality Learning Experience
Areas of Improvement
Define & Develop Design system
Determine user behavior trends & motivation
Levels and tasks reduced cognitive overload and increased user retention​
Source: Ambulance Orientation
Source: Trades Electricals
Students actively competed to improve their completion times, boosting engagement and motivation.
Source: Ambulance Orientation
.png)
"I completed this less than a minute, I beat the time the second time" - user
Stakeholders
Lead Developers
Pain Points
​
-
Variations in designs across projects led to inconsistency and misalignment in the development frameworks
​​
-
Repeatedly creating UI components from scratch slowed down the process.
​​​​
-
Established Design Guidelines & created a Component Library of 20 components
Solution
​
-
Reduced development re-work by 1/3 in both effort and time
​​
-
Resuable Component library for the designers to across products
Impact
Stakeholders
Students (Users)
Pain Points
​​
-
Overwhelming task load execution for users to complete a simulation, causing frustration.
​​​
-
Lack of Motivation on task completion, reducing engagement.
​​
-
No Real-World Relevance impacting user immersion.
​​
-
Introduce game levels to scaffold their learning and cater to individual student learning experiences
​​
-
Track progress to encourage users and enhance time-based competition.
​​
-
Incorporate realistic scenarios to track user behavior,
Solution
Source: Public Health Inspection
Source: Ambulance Orientation
Incorporating realistic scenarios like 'Dispatch calls' & 'Supervisor feedback, enhanced relevance and immersion
"This is realistic" " I love it that I can practice" - user
Source: Trades Electricals
Impact
Recurring rate of usage
High Acquisition rate & User retention
Net Promoter Score
54
Time based tasks,
helps in recall
Implement User Feedback Mechanism & regular design check-ins
Initial Design phase
Storyboarding & Concept Testing with
Faculty (Client)
Developers
Development Phase N
3D environment play testing with
Faculty (Client)
Developers
Development Phase N+1
Faculty (Client)
Usability Testing with
Students (Users)
&
Developers
Learnings and Key takeaways
​​Early User Feedback Reduces Revisions
Involving users early helped identify and resolve issues, minimizing costly revisions.
​Inclusive Design Matters: Coupling user feedback with inclusive design ensured broader accessibility and relevance.
Design System Enhances Efficiency:A structured design system with reusable components improved consistency and sped up development.