IncluSim:
Accessible Electrical Engineering Simulator
Background: Introductory electrical engineering simulators are inaccessible to blind and low-vision (BLV) students, with drag-and-drop functions and highly visual schematics. IncluSim is a multimodal circuit design platform being developed by Aya Mouallem (Stanford Electrical Engineering PhD, expected 2025).
Team: Aya Mouallem, Mirelys Mendez-Pons, Trini Rogando, Sheri Sheppard (PI)
Timeline: 10 weeks
Skills: React (JavaScript) coding, CSS, VoiceOver, ARIA roles and tags, Universal Design for Learning framework, user study development and facilitation, Co-Design process, Ability-Based Design principles
Approach: Co-Design is a method of designing that directly involves members of the intended community audience (here, blind and low-vision co-designers). My approach began through evaluating their suggested design improvements, and implementing them—such as adding an interactive onboarding tutorial. I also made changes rooted in accessible design frameworks.
Background Research: Designing Nonvisually
Often UI/UX design centers around aesthetic presentation, and visually guiding the user to certain points of focus on the screen. In this case, UX refers to the multimodal (tactile, audial) experience of using the tool, and its ability to serve individuals with different needs equally well. Users might use screen-magnifiers or screen-readers.
The educational tool consists of two parts: a physical grid, where BLV students can place tactile blocks (each representing a circuit component), and a digital simulator, where the user can enter the placement of their blocks and receive an analysis of their circuit.
My design research was guided by two frameworks of accessible design:
UDL: Every part of the experience should be accessible to all. (CAST 2024).
Ability-Based Design: Experiences should be modifiable depending on the user’s needs. (Wobbrock et. al 2010).Digital Simulator Improvements
First, I created a Photoshop mockup of visual changes I suggested for my mentor. Through CSS, I implemented these changes into the app’s preexisting GitHub repository, improving the readability of the grid.
Final Look - (I also spearheaded the development of the logo!)Integrating Sound
This integration was difficult because the sounds required multiple file conversions to be compatible with the Electron app interface (blob type to dataURL to file reader for mp3s…). Through trial and error and research, like this medium post, it worked!
To support the value of accessible multimodality (information depicted both visually and nonvisually), I integrated sound into the simulator through integrating howler-js into the React app, and color, through additional CSS.
Onboarding Tutorial
After collaborating with the research team to write a ~2,500 word script, guiding the user to create a debug a circuit on the digital simulator.
I created a wireframe with the first initial draft and key interactions. From here, we iterated to put the tutorial in its own portion of the screen.
As recommended by multiple co-designers, I implemented an onboarding using the package React Joyride. This was to increase the accessibility of the app through lowering the learning curve.
I added custom components to the existing React Joyride package in order to make the tour more screen-reader friendly.
I also added a “toggle” function with JavaScript so that the user can switch between the tour and the main page easily through pressing T.
This video shows how the tutorial is screen-reader compatible, with keyboard navigation and easy toggling from the grid cells to the tutorial text.
Co-Design Session and Poster Presentation
In August 2024, I supported planning and co-lead a co-design session for IncluSim. We invited back members from the first user study so co-designers could see how their work was included and provide more recommendations.
I received positive feedback on the new UX changes, which will be outlined in an upcoming research paper.
I also presented my summer work at a Mechanical Engineering poster session!
UX includes much, much more than just visual interaction design
Users have different needs, positions, and abilities, and the UX design approach must reflect this - the same solution won’t exist for different groups. Interaction design is broad-scoped (sound, touch, learning curve).
What I learned
Combining theory with practice
Studying design frameworks guided my process and understanding of user needs. Taking a process from ideation (reading about theory) to realization (coding and testing in a user study) was very rewarding!
How to design something new for and with a community
Inclusivity doesn’t have to be an afterthought - it can be embedded into the design itself.
What’s Next?
We plan to open-source the tool for use in educational institutes everywhere with a Creative Commons license. The cost to produce IncluSim was kept low for accessibility. The research team will also continue writing and submitting papers to conferences like ACEE and CHI!