echo

Inspiration

We wanted to create an experience where people could experience and remember how it feels to be told something that changed their lives. That is something that we wanted to achieve - the idea of "you never know how impactful someone's advice could be". We were inspired by "The Unsent Project" where people could post text messages to their first loves that they never sent out. We thought the idea of being able to create a community where people could anonymously share words that either hurt them, healed them or changed their lives would build a vast network of connections. Sometimes all you need is to let out words that hurt you, listen to words that healed other people and heal by helping other people heal.

What it does

Echo is a digitized wall that allows users to anonymously post audio clips of quotes/phrases that either healed them, hurt them or changed their lives. Users anonymously upload audio recordings of the phrase they wanted to share, as well as the text of the quote/phrase. Once it gets posted, other users can view the audio recording of the quote on the echo wall. Each echo wall has a different mood to it-healed, hurt and changed life- and using this users can navigate between the pages. The goal is for all the audios on the page to play at the same time until a user hovers over a certain audio clip in which case the quote is displayed and the audio of that clip plays out loud. When the user selects the quote, they can view the quote and play it again. They also have the option to save the quote or share it with people.

How we built it

We built the prototype using Figma. We used ChatGPT and Claude to brainstorm ideas. We used https://www.krumzi.com/tools/animated-background-generator for generating gradient backgrounds for the pages. We also used https://www.figma.com/community/file/1177354491329002534 for the CD/casette design on the pages.

Challenges we ran into

We initially started by using Framer. However, we ran into some challenges with the design and we were not able to get it to work as we'd hoped. So, we switched to Figma because it was something we were more familiar with.

Accomplishments that we're proud of

• Being able to switch to Figma and start all over
• Not giving up when things got challenging while designing the UI
• The interface itself looks super cool and appealing, and captures most of what we want it to

What we learned

• We learned about Framer
• We learned how to brainstorm ideas and plan things out since this was our first design hackathon
• We learned how to order layouts better, and use auto layout effectively.

What's next for echo

• To potentially develop it into a web-application in the future and implement the functionalities!

Built With

• figma