SiteSee

Karan accessing a website through the URL
Prakit using webgazer's live demo
A sample of a heatmap that was generated by SightSee
Team hard at work
Team hard at work

Inspiration

From our own collective experiences we have found that companies often do not cater to their customers true wants and needs. With this project we aimed to provide a developer-centric tool that a company could use to gather analytics. Whether a large company,a single developer, or a startup we created a resource that anyone could access in order to provide a superior customer satisfaction.

What it does

SightSee leverages iris tracking to recognize user patterns on where their attention is drawn to. As a company this information is vital and easily readible through our heatmap representation of the tracking. The heatmap gives insights on where the customer may be more likely to interact with. It has capabilities to overlay on websites that the company may be associated with.

How we built it

We utilized an open source javascript library called webgazer.js, that allows you to track your iris movements using regression models. In combination, we were able to use the heatmap.js library that is usually used to track cursor movements and create a heatmap based on how often the coordinates was visited. For the frontend applications we used javascript and react + vite and found ourselves using alot of components and useStates for various parts of the program.

Challenges we ran into

A challenge we ran into while developing SiteSee was properly calibrating the eye tracking software. We spent a lot of time redesigning the UI and the program for the calibration to fit with our format. Workflow was another issue we had during this hackathon. We were initially very disorganized working on similar aspects of the projects individually instead of coordinating tasks as a group. We wasted time creating separate versions of the same features or components. It was the first time one of our members had ever programmed with React and so there was an initial learning curve for them that slowed down their progress. It was initially a challenge for them to understand React and how it interacted with external libraries.

Accomplishments that we're proud of

We were successful in integrating two completely unrelated libraries (webgazer.js and heatmap.js) into one seamless end product: SiteSee. We also managed to apply brand new skills that we learned just hours prior (React) and create a useful and intuitive project by working together as a team and sharing our unique perspectives.

What we learned

During this project, we learned how to integrate real-time applications directly in the browser using WebGazer.js, and how to transform raw eye tracking data into meaningful visualizations with Heatmap.js which is normally meant for cursor tracking. We also gained experience combining multiple APIs, WebGazer for eye tracking, public CORS proxies for loading external websites, and Heatmap.js for rendering heat maps which corresponds to user interactions on the page, into a seamless, web app. Building this project taught us how to manage performance, collaborating with one another, and develop workflow that provides a meaningful output.

What's next for SiteSee

We believe that SiteSee has great potential which is why we want to focus on expansion. We would like for the heatmap data to be stored in which we can use a database. Along with this we would need something to deal with authentication for log in and sign up. This would allow each company to have access to their own data. We can accomplish this by using a backend as a service (BaaS) such as firebase or supabase. For features we were looking into advancing our insight sectinon by integrating AI. This would enhance the way that companies could leverage our service to increase their own profits by being able to intepret the data in a way they may have not before.