IncluSim:
Accessible Electrical Engineering Simulator
Background: Introductory electrical engineering simulators are largely inaccessible to blind and low-vision (BLV) students due to drag-and-drop interfaces and highly visual schematics. IncluSim is a multimodal circuit design platform being developed by Aya Mouallem (Stanford EE PhD, expected 2025) to address this gap.
Team: Aya Mouallem, Mirelys Mendez-Pons, Trini Rogando, Sheri Sheppard (PI)
Timeline: 10 weeks
Skills: React (JavaScript) coding, CSS, VoiceOver, WCAG, ARIA roles and tags, Universal Design for Learning framework, user study development and facilitation, Co-Design process, Ability-Based Design principles
Approach: We used Co-Design with BLV participants to guide development. My contributions included evaluating participant feedback, implementing accessible features like an interactive onboarding tutorial, and making adjustments based on accessibility frameworks to improve usability for all users.
Empathetic Research: Designing Nonvisually
UI/UX design often emphasizes visual aesthetics and guiding users’ attention on-screen. In this project, UX focused on the multimodal experience—tactile and auditory interactions—to ensure the tool serves users with diverse needs, including those using screen magnifiers or screen readers.
The educational tool has two components: a physical grid, where BLV students place tactile blocks representing circuit elements, and a digital simulator, where users input block placements to analyze their circuits:
My design research was guided by two accessible design frameworks:
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).Ideating and Rapid Protoyping
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 Test Session; 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
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.