Inspiration

we're university students. studying with friends can be really motivating in times of tough courses. we wanted to create something to make studying together easier, more collaborative, and productive.

What it does

weve is a chrome extension that allows you and your friends to annotate directly onto the website. add stickers, move the boxes around, and see what each friend added to the page. simply register and login with your email, create "rooms" of different friend groups or study groups, and get productive.

  • choose which groups you'd like to view/write for simultaneously.
  • move notes around the screen if they're blocking your view, and simply refresh to move everything back to where they originally were.
  • add an exclamation mark or a question mark sticker for whatever is important.

How we built it

first, we brainstormed visual ideas and details by doodling on Procreate, then moved onto creating our ideas (textbox design, stickers, buttons, etc.) on Figma. second, we'd take our ideas and program them using HTML and CSS, and FireBase as the server. the smiley face animations were also drawn using Procreate's animation feature.

Challenges we ran into

we wanted to be very careful during the design process to pay attention to detail and ensure user-friendliness. not only would its visual designs captivate users, but we wanted to create something we would want to use as students ourselves. overall, our project came along quite well!

Accomplishments that we're proud of

we're especially proud of the UI/UX design of weve, but we're really proud of everything.

What we learned

because this hackathon project, it was some of our first attempts at using HTML, CSS, and Figma. although HTML/CSS can't be learned in just two days, we learned a lot playing around with Figma in the design process. we've definitely discovered a new favourite tool and a new passion for creative design!

What's next for weve - weve been here before.

here are some of the features to be added to weve:

  • a quick tour/tutorial on how to get started
  • more smiley face icons and stickers!
  • embedding youtube videos and more.

Built With

Share this project:

Updates