Arigami

Inspiration

Yassin, one of our group members, interacted with a family whose child has a motor-impairment disease, which made it hard for him to be independent; his disability limited him from completing any tasks or learning on his own, a story which inspired our team to create Arigami.

What it does

Arigami is a Chrome/Edge extension that replaces the webpage you're on with a redesign that fits your accessibility needs in 1 of 3 tracks: Focus, Motor impairment, or Screen reader. It maintains a given website's look and content, and and an optional AI redesign uses Apify and Claude to read the website and reorganize the page.

How we built it

We researched into existing products, seeing what gaze trackers and accessibility extensions already exist based on our initial idea. From there, we prototyped different designs in Figma and used Claude to code.

Challenges we ran into

Being unable to design a model that relies purely on one's eye movements within the Hackathon timeframe, leading us to create a model that tracks one's gaze instead
Using new tools for the first time, such as Figma and Apify
No way to test our model on actual motor impairment cases, having to work only with research and personal experiences with motor impaired individuals
Learning to create a Chrome extension for the first time

Accomplishments that we're proud of

One feature that we're proud of is having our product be able to remodel webpages based on one's specific accessibility needs while maintaining the integrity of the website. For motor impaired individuals, this includes enlarged buttons with more spacing, and buttons that group features on a website, allowing them to access different parts with ease.

Designing the scrolling gradient was also a part of our project we were proud of, at it immediately made the extension feel much more accessible. Before that, the user would look at the "Scroll down" and "Scroll up" buttons, which would only scroll at one set speed.

The head tracking design feels very seamless while your using it, and we were very proud of the ease of navigation it created during our own testing of the product.

What we learned

Firstly, we learned how to integrate different software into our design process to promote collaborative thought and efficiency, such as Figma. We learned that the most technically complex project may not always be the most helpful project, and that there are many meaningful ways an impact can be made. As such, we learned how to prioritize what we thought was most important to work on to reach our desired product. For example, we did not add a voice agent because it is likely someone who is blind already has one, which may cause more issues for them rather than less if Arigami also had one. Our team has never competed at CalHacks before, so managing the time pressure and intensity of the event was something we needed to work to adjust to, as well, figuring out what worked best for us in this new environment.

What's next for Arigami

Next, we want to build out Arigami further, validating its use in real world applications. We would want to test it and discuss with people who have accessibility needs to continue getting feedback and improving. We want to eventually make our product fully fit into Web Content Accessibility Guidelines (WCAG) and continuing to optimize our UI.