Bucket of thoughts

Design Process

01 Define

02Ideate

03 Prototype

04 Testing

05 Iterate

01 Define

02 Validate

03 Prototype

04 Testing

05 Iterate

Define

The idea for this app came from my ongoing frustration with having scattered ideas stored all over the place, across multiple different apps and notebooks. Out of this frustration, I thought I could make something that would work better for me.

Yes, there are many apps you can use for this, but none of them really worked for me. I often have spuratic ideas and thoughts in random places and at random times and often just want a centralized place I can go to, upload the thought or idea and worry about it later.

And with the rise of AI tools, I decided why not try to build something of my own instead? After all I know myself better than any app.

Key values

Speed

Simplicity

Clarity

Innovative

Ideate

The ideation phase for this project was intentionally lean. Focused on taking the shortest path to solve my problems. Once the MVP features were identified and requirements for the MVP were clear, we began building in VSCode (eventually Anti-gravity).

My goal was to design something I could use immediately, learn from quickly, and iterate based on real-world experiences.
Some questions I asked myself as I considered the MVP requirements:
‍
• What slows me down when capturing thoughts?
• What makes ideas hard to find later?
• If I stripped everything down, what functions are absolutely essential?

Prototyping

The prototyping was simple, starting with a clear and concise prompt using Codex in the VSCode IDE to generate the first version in VanillaJS.

I started by sharing my idea with ChatGPT and asked it to help me to create the MVP code base. With this code, I migrated over to the VSCode editor, and installed Codex for the project. The results weren't anything special styling-wise, but it was exactly what I needed.
After some more prompting and ensuring that the core features were functional, next I hosted the webapp and implemented the backend structure so that it can start storing data through firebase. With all of this set up, I was able to start using it regularly.

Getting it hosted and linked on Firebase was new to me, but it seemed to work out without too much hassle due to the available resources and the help of AI.

Features of MVP

This is the primary interaction—the part that must feel effortless.

The goal: provide the quickest and most straightforward input experience.

Requirements:

Input field for the idea
Save button
Input field to create a new category
A Category Select dropdown
Access to review page

How it works: You had an idea! > Open the app > Type in your idea > Assign a category > Save

Screenshots shown are of the earliest MVP render.

Once an idea is captured, the next challenge is finding it again when needed. The review page was initially the page reviewing, filtering, and recalling ideas, designed to support:
• Quick scanning of all past ideas
• Filtering by category through a simple dropdown
• Instant visibility of recently logged thoughts
With these simple features, the app did what I wanted.
Next, was using the app as much as I can, observed my experience and began iterating and adding more features.

Testing + Refining

The most surprising and fun learning experience.

With the app now on my phone, I was able to use it to capture my ideas throughout my day; and every moment of friction became an insight for potential improvements, every “I wish I could…” became a potential feature idea (not every idea is good).

For two weeks, I used the app continuously wherever I was; if I had an idea, I would log it in the app.

This daily process turned my real behaviours into design requirements. The app evolved because I was using it constantly, and I started to notice patterns in how I recorded ideas, what slowed me down, and what made the experience feel delightful and seamless

Through this process, I let my lived experience guide the development of the app with the goal of making the experience feel natural and seamless.
‍
Below are some notable changes since the MVP (roughly v2).

1. Redesigned Note Feed

Originally, the main page only had the capture function. When an idea was saved, it would go straight to the review page. Until I realized all of the valuable space I was wasting. Naturally, I decided to fill the main page with an idea feed.

A chat-style feed displays all previous entries in chonological order. This made scanning past entries significantly easier and gave notes a more conversational feel and allowed me to see thoughts I had throughout the day.

2. Multiple Feeds for Better Organization

Next, I found myself needing a better way to access specific groups of ideas, instead of going to the review page and filtering each time. So I added new feeds on the main page.
‍
Category Feed - This feed allows the user to select one category to focus. This was useful to use when I just need to focus on one list. I would create a category for a project like this one, log all the ideas, and when the time comes to work on the project, I use this feed to see all of the ideas I had for the specific project.
‍
Hidden Feed - Everyone likes to have their own privacy, right? I found a need for this feature when I would take more personal or sensitive notes. Ideas can be hidden from the main feed and only visible in the hidden feed or if specifically filtered on the review page.

3. Category Studio Page

To make the app more customizable, I built the Category Studio. Sometimes I didn't like the colour of the category and wanted the option to change it so I created the Category Studio page where you can view, rename, and recolour categories to your liking. I also added the option to toggle visibility for each category. When toggled off all ideas with the tagged category will automatically be hidden, so they never show in the feeds but can be found in the review page.

4. Micro-interactions for Everyday Efficiency

Small UX enhancements made a huge difference in day-to-day use:

Pinned notes – Users can pin a single idea at a time that will be fixed at the top of the feed.
Archive posts – Added a checkbox option that lets users archive a post and have a checklist function.
Edit / Delete entries – Added a swipe gesture to reveal edit/delete options on the Review Page.
Auto apply active category – When on the category feed, I added auto tagging for efficiency and saving users time.
Multiple Categories – I added the option to add a second or third category, this allows ideas to be able to associate to other relevant ideas, improving the ability to recall old ideas.
Hiding categories – This option lets users hide entire categories from the main feed. This can be useful to apply to non-timely ideas.
Threads / Comment – Often times a single idea can be broken down into multiple components. The threads make it possible for users to keep adding to the idea without having to create individiual imputs, this helps group everything in one place.

These were some of the early interactions that were added early on in the build. It made the app more functional and very flexible.

Iterations

This build started in late Dec 2025. I spend the first 1-1.5 month regularly updating and tweaking it. Before taking a break for a couple of weeks. However, since Jan 2026, I have since made major improvements and changes as I came back to the app with fresh eyes and new ideas after having immersed myself even further in AI tools and development. Watch the demo of the latest version below!

What I learned

Exposed myself to new frameworks and libraries that showed everything that is involved and needed to create a fully working digital product like an app.

I learned about the importance of clearly being able to articulate your ideas to AI. Not only is it an essential skill as a designer to be able to communicate your idea, but it is also important to be able to explain clearly what you want do and how you want it to do done in order to get a better result.

I learned how to use Github effectively for version control and also creating branches when working on new features to keep versions organized and properly backed-up.

Reflections

This project was an eye-opener, it revealed how much the role of a UX/UI designer is evolving in an era of rapid AI advancements. With today’s tools, designers aren’t limited to just wireframes and simple prototypes—we now have the ability to build, test, and ship. Basically engineering the experiences on our own.
‍
Working on this app showed me how accessible product creation has become. Instead of being dependant on engineers and developers to start, designers can now assemble create and put together complete prototypes, with custom tech stacks, integrate frameworks, and create complex interactions without writing code. This shift empowers us to not only design but also build. Now we can design, prototype and build; validate ideas quickly, and bring concepts to life in ways that weren’t possible before. This also helps improve our ability to work with developers as we are able to provide them with a baseline set of code that they can review and improve.
‍
Most importantly, this project helped me see a future where designers can move fluidly between strategy, design, and lightweight development. It reinforced the idea that the more we understand these emerging tools, the more ownership and creative freedom we gain in shaping meaningful digital experiences. This gets me excited!