At VARLab – Virtual & Augmented Reality Lab, we created the Virtual Electrical Lab exclusively for Conestoga College professors and students in electrical courses. I played an integral role throughout the project’s design and development journey.
My role: UX Design, UI Design, Usability Testing
Team: I was the only designer in a team of ~15 developers, PM, and 3D artists
Tools: Figma, Jira, Confluence
Timeline: May 2023 – August 2023 (4 months)
Create a workbench-style virtual lab environment for students to hone their understanding of electrical circuits through interactive practice.
I conducted interviews with subject-matter experts to understand how students learn in class using the following 3 things:
🔌 Ohm’s Law & DC Circuits trainer
This device is used to teach common electrical system components and circuit operation.
〰️ Jumper Leads
To build a circuit, red and black jumper leads are inserted in different sockets.
📝 Instructions Sheet
Reading all the instructions first is crucial because they can alter the approach.
Constraints
Zach, student of the Heavy Duty Equipment Technician program.
Age: 23 years (ages of other students in the program range from 18-35)
Goal: Being able to repair electrical problems in Heavy Duty Equipment
Pain Point: In-class practice with college-owned training devices alone is insufficient to achieve the desired level of proficiency in electrical circuits.
The information above comes from two sources: 1. Interviews with subject-matter experts and 2. The project charter.
Zach, a Heavy Duty Equipment Technician program student, needs to practice his electrical circuit building and troubleshooting skills beyond class hours because in-class practice with college-owned physical training devices alone is insufficient to achieve the desired level of proficiency.
HMW design a simulation that provides Zach with hands-on practice building and troubleshooting electrical circuits beyond class hours?
HMW structure the ‘labs’ such that each of the 10 identified tasks can be completed independently while seamlessly integrating into the LMS?
HMW efficiently utilize available browser window space on various laptop screen sizes, especially compact 13-inch screens?
We chose this layout because:
As specified in the project charter, I designed 10 standalone simulations that integrated with the existing Learning Management System (LMS), eConestoga.
Below, is a diagram illustrating the Information Architecture for the first few labs.
(Click the image to zoom)
Unity developers & 3D artists helped build this prototype. The user testing participants were 2 students and 2 professors. While this is not ideal, it made sense for the time and resources we had available and helped us make crucial decisions.
Task 1: Connect a red and a black jumper lead to any of the sockets on the Circuits Trainer Board.
Task 2: Move the black lead to a different socket.
Task 3: Remove the red lead altogether.
Task 4: Set the voltage regulator to 10V.
Task 5: Set the digital multi-meter to 20V DC.
Aim: Identify the most intuitive interactions to connect, relocate and remove a jumper lead and to operate the knobs.
Observations:
PS – Omitting additional insights and feedback to keep the case study concise.
The instructions panel became the primary UI element for us to communicate with our user.
During user testing, no one could figure out how to use the knobs on the voltage regulator or the digital multi-meter. So, I designed new interactions using radial sliders.
Inclusive Visuals: We use colors and icons alongside text to ensure information is universally understandable.
Auditory Support: Enhancing accessibility, we’ve introduced a text-to-speech feature catering to those who prefer auditory instructions.
WCAG Compliance: Every text meets the AA level standard of Web Content Accessibility Guidelines (WCAG) for maximum inclusivity.
Highlighted Interaction Points: Trainer board sockets and jumper leads are highlighted to guide users effectively, signifying their affordances.
PS – These screenshots are from the developer build, so you’ll see some rough edges. In the final build, the jumper leads on the right are in full view.
In our pursuit of creating a workbench-style virtual lab to enhance students’ understanding of electrical circuits, we’ve established clear metrics to gauge the project’s success in the upcoming term. These indicators, summarized below, will guide our evaluation:
These learnings underscore the intricate nature of UX design and development, emphasizing the need for a harmonious synergy between the two and how strategic communication and data-driven decisions can lead to enhanced user experiences while efficiently managing resources.
Architectural Design Challenges: Think of it as hackathons for architects.
Social app encouraging climate action with fun challenges and incentives.
A smart goniometer for physiotherapists that makes patient assessment efficient.
