Bubble

Home Screen and Physical Product Page
Audio Mixer Demo
Visual Curator Demo

Inspiration

With our ever growing information density and exposure, users are finding it harder and harder to focus on everyday tasks. Rather than expand on the list of sensory inputs, our group opted to provide the user with mental clarity and focus through enabling optimization for the two most demanding senses humanity has to offer: auditory and visual. When online, users have the option to curate their exposure through softwares such as volume mixers, tab managers, and ad blockers. For the development of Bubble, we sought to capture that same feeling and bring it to the physical world. An unmatched form of sensory curation. We are dominated by members with neurodivergence, this fact helped us tremendously in the pursuit of tailoring our product to similar individuals.

What it does

The Bubble Set is a pair of headgear combining AR glasses and earbuds (or the user’s own compatible headphones/earbuds) that works to filter the audio and visual clutter of everyday life. As an example shown in our demo, the set separates all incoming sound into different channels and allows the users to adjust their volumes accordingly with the app on their mobile device. On the visual side, the AR glasses enables physical advert filtering from large intrusive billboards to minor logos and blurbs that give unnecessary information; all of which are customizable from the mobile app. For users with light sensitivity, we also have an additional feature to reduce brightness from individual bright sources.

How we built it

We built Bubble using Figma to make the loading/intro screen and home page from scratch. We used Figma to design the layout of out project/website, the flow, transitions, color palette, and UI. We then exported the frames we made and put it into Figma Make to give us a base demo that included a separate visual demo page and audio demo page. Several different iterations of the project were made using both Figma and Figma Make until we got a smooth and fully functional website for Bubble.

Challenges we ran into

We struggled with the initial design of Bubble and had to go through several iterations of it until we ended with something we were satisfied with and with the time constraint we felt a bit rushed and stressed at times. It was also a struggle to integrate what we had made on Figma into Figma Make, until we had to just download the frames and prompt Figma Make in a very detailed manner.

Accomplishments that we're proud of

The demo we built using the support of Figma Make and our own designers is very representative of the vision we had for the app the Bubble Set would use.

What we learned

From making Bubble, we learned how to use Figma Make for the first time and how to prompt with it and make a project with it. We also expanded our knowledge and experience with Figma as we used the prototype features more and really got to explore the usage of different interactions, flows, effects, and behaviors.

What's next for Bubble

We hope to expand Bubble into a tangible project through collaborating with potential sponsors to start development for the adequate hardware. For a future physical world that is easier to process and navigate for everyone.