In order to come up with ideas for our hackathon project, we decided to go with the tried and true strategy of writing down ideas on a ton of sticky notes and then displaying them all out to pick which ones we like best. The process of grouping ideas based on certain themes or features helped us generate a ton of ideas in a short amount of time, and we realized that this process could be super useful for future projects, regardless of the subject at hand.

What it does

Ideate has a whiteboard canvas where users can place their sticky notes with ideas anywhere they want. By visually displaying all of the ideas on one canvas, users can look for themes, think of ways to merge ideas, or even draw inspiration for completely new ideas. Ideate draws from design thinking philosophy, and by relying on this visual brainstorming process, it enables users to quickly generate creative new ideas.

How we built it

We started off by making Ideate's wireframe using Powerpoint, and then we began converting it to actual code. Ideate was entirely built using HTML, CSS, and Javascript. In order to save time, we also used JQuery to help select different elements. It was built with a few responsive elements in mind and will respond to adjustments in screen size as needed, but the application is best used on a desktop computer.

Challenges we ran into

The hardest part about creating Ideate was making our sticky notes draggable. Initially, we tried using HTML canvases to act as the whiteboard/sticky note bulletin board. However, canvases are really terrible if you want to move elements around. Therefore, we had to throw out our previous work and come up with a way to utilize HTML's draggable attribute mixed with Javascript to get the results we were looking for.

Accomplishments that we're proud of

We created a working product! Always something to be proud of :)

What we learned

Overall, we gained a lot more in-depth knowledge about different HTML elements, CSS styling, and Javascript syntax. In particular, we learned a lot about how HTML canvases work and how to use Javascript to create a more interactive experience for the user on our website.

What's next for Ideate

Ideally, Ideate would move towards becoming an online application where multiple users can collaborate in real time, like in Google Docs. Furthermore, Ideate would offer a more dynamic and interactive workspace to create the optimal environment for the ideation process itself. This would involve giving users the ability to draw shapes, lines, add text, images, or any other objects into the workspace that would help inspire creativity or organize their ideas. We'd also love to be able to further refine the website's design and create a better experience for the user.

Share this project: