Design Documentation Process

1. Brainstorm

The problems this project will solve is improving time management, decreasing procrastination, avoiding distractions, and improving focus with no feeling or burn out by using a simple study technique.

My solution for this idea is to develop a website with the pomodoro method so user can try the technique for themselves while they study or work. I plan to add features such as notes, custom timers, etc.

I chose this project because it’s something I’ve personally used for years now and know to be effective. I wanted to build my own version of the site to create something useful for others as well as personalized to keep myself motivated throughout the project.

I don’t think I would have chosen any other idea. I have been thinking about developing this project for a long time and felt the urge to begin it as a senior project to show off what I have learned thus far.

2. Identity

The idea that was the most viable to me was the pomodoro method project. I felt that my other option, (a website redesign) was fine as well but the pomodoro project would bring me more of a challenge and longevity.

I realized in this phase that I may not have the scope to complete every feature I want, so I focused on creating an MVP. When I get peer feedback I will continue to make changes according to advice I get as well as changes to my scope for the project.

3. Define

Definining my project plan. The project plan is to build a pomodoro site. My plan is divided into two tracks:

Development (In Scope) -> Code and deploy a functioning Pomodoro timer website with it’s core features. (Countdown timer, session tracking, customized timer)
Prototyping (Extended Scope) -> Use Figma to prototype advanced features that currently fall out of my development and project scope. (Streaks, analytics, etc) to demonstrate the future vision of the project.

Goals:

- Deliver a working, usable Pomodoro site (MVP)

- Document full process from concept to code

- Use Figma to visualize features for planned future iterations

Define the project milestones

In 2 weeks, drafting stages, moodboards, a final wireframe color palette for the site will be complete.

In 5 weeks, a working Figma prototype to give an idea of how the site should function when coding.

Define a viable timeline

March 18th – Foundation.

Finalized wireframes and Figma prototype for the core features,
Have the coded site set up with the base timer functionality, and
Documenting design decisions (CSS)
Be ⅓ or ½ complete

April - Development

Building out other remaining coding features (custom timer, session tracking, etc),
Begin Figma prototyping of out of scope features, and
Ongoing documentation of code and process.

May - Finalization

Polish and testing site,
Complete Figma prototype for future features, and
Finalize all documentation

Define points of inspiration

Pomodoro literally means tomato in Italian. The Pomodoro method gets its name from the popular tomato kitchen timer. My points of inspiration are very literal. Using greens, reds, and yellow tones as the color palette to signify the tomato ripening as you complete your session.

Reflection

How closely did you follow the project brief?

I would say I followed the project brief as closely as I could. I remained focus on the key requirements of the site and made sure that the scope I made for myself was realistic with the deadline.

How closely did you follow the timeline?

I followed the timeline intently, scheduling out my days to make sure the base was functional and working. I broke the timeline down into daily goals which helped me stay on track and gave me a sense of accomplishment.

What went well with the plan?

I think what went well with the plan were my goals were attainable for this draft. Again, setting realistic milestones kept me going rather than overpromising and not being productive.

Did you run into any obstacles that you didn't plan for in the project brief? If so, what were they?

Yes. Initially, I said I can do some simple JavaScript code, but after taking an intro to JS course, I feel motivated to learn and attempt to build out my features if possible. This decision ended up being a positive experience for me as I decided not to limit myself to what feels safe and shifted my mindset. However, I also felt lost at times and needed to find help from outside sources to complete my goals.

4. Ideate

Sketch/storyboard the obvious and the “unexpected”

Generate ideas for project layout.

Reflection

Did you have more than one set of sketches/storyboards? If so, talk about each. What made you choose the ones you did?

I had two options. One that included a navigation and another option that had no navigation bar at the top, rather had the ability to scroll down to see an about section. I decided to choose the one that had a navigation bar at the top and would lead you to an about section due to peer feedback.
When creating the wireframe, my thought process was to create a very minimalistic look to simplify the site while helping the user to get straight into working. My thought process was that if there were nav buttons at the top, the user would be more inclined to look through it rather than there being no nav.

How closely did you follow your chosen sketches/storyboards?

Very close, I did make some changes to the design such as making custom buttons as I wanted to add more of a personal touch. Any other changes were to improve the flow of the site.

Did you make changes based on peer feedback? If so, what did you change and why?

Of course. I changed some HTML tags that I had on my wireframe that were not semantically correct as well as took note of what features were important to have on my live site.

5. Prototype

Define development stages for the project and begin development in stages (prototypes/versions).

Stage 1 – Basic Timer Functionality (v1)

Built the foundational Pomodoro timer with a basic countdown, start/pause/resume controls, and the two session modes (Focus, Short Break). The goal was to have a working timer before anything else.

Stage 2 – Logic and Reliability Improvements (v2)

Rewrote the countdown logic using timestamped-based calculations to fix accuracy issues with the original interval-based approach. Also implemented a session counter to track completed Pomodoro cycles.

Stage 3 – Settings & Customization (v3)

Added a settings panel, allowing users to input custom durations for each mode, ability to toggle the session counter on/off, ability to change the volume of the alarm, user ability to add their own alarm sound by file upload, and custom colors.

Stage 4 – Visual & UX Clean Up (v4)

Implemented dark mode toggle in settings panel, refined UI by replacing the icon images with inline SVGs for color control, added alarm sound for session focus/break.

Stage 5 – Final Refinements (v5)

Fixed certain bugs and cleaned up the code. Began working on Figma prototype for future feature implementations.

How did you progress through each stage?

I progressed through each stage by prioritizing on the necessary/required features first. I needed to be assured that the base of my project was steady and reliable before adding any additional features. I broke down each stage into doable blocks of work as to not overwhelm myself.

Did you run into any obstacles as you progressed through development? If so, how did you overcome or work around them?

Yes, as I used my own website to test and look for mistakes, I realized I made a lot of mistakes when initially developing my project and had to redevelop the logic. Basically, I had to rewrite the code I thought I could keep. Moreso, I even forgot about an important core aspect of the pomodoro timer which was a long break of 15 minutes after 4 focus sessions.
I overcame this by thinking about the end goal and why I needed to rewrite the code, otherwise it would be unusable and not the best for user experience. I thought back to WHY I decided to work on this project. I wanted to create something I could be proud of.

Did your chosen development process work for the project? If so, how? If not, what would have been a better alternative?

Overall yes, however I would have wished I planned for more time. Some of my initial ideas had to change priority and I scrapped some ideas due to time. However, I think it was a good lesson learned for future projects.

6. Test

I presented my latest prototype of tomate.lol to my peers for feedback during a peer review session. At the time of the presentation, the project was early in development with the core functions complete but additional features still being refined and implemented.

What feedback did your peers offer on your draft project?

The feedback my peers offered on my draft project were:

Adding a clear main heading so users will know this is a pomodoro website for studying,
Incorporate a toggle for dark mode,
Background color change indicating if the user is in focus mode or on break mode,
Web Notifications API
and positive feedback on features I was in the midst of working on. (Customizable timer, break options, alarm sound when timer ends, favicon, etc.)

Were you able to show members of your target audience? If so, what feedback did you receive?

I did receive more feedback, however the feedback I received were mainly additional different features. Such as custom colors (user able to change the site’s color to their own palette), custom alarm sound by file upload, ability to add more sticky notes on screen, and the ability to drag the sticky note around the screen.

7. Refine

Refine the project based on critiques and feedback received.

Based on feedback and advice I received from my peers, I revisited my project and prioritized features that would improve the project. I focused on feedback that I knew I could implement before the due date before moving on to more complicated features.

What changes did you make based on classmate feedback? Why did you make those changes?

The changes I made sure to incorporate on my project were adding a dark mode as well as a background color change to indicate whether the user is in a focus mode or break mode.

If you were able to show your target audience, did you make any changes based on that feedback?

I didn’t make any changes based on this feedback yet, but I do like the ideas given to me and I plan to prototype them first using Figma and add them progressively.

If you didn't make any changes after feedback, why?

At the time, I wanted to focus on the structure of base before diving into fun, yet not so necessary features. Additionally, I did not want to spend too much time learning how to implement a feature such as an API due to time constraints.

8. Implementation

To complete the implementation phase, I deployed the project through GitHub and purchased a domain to make it publicly accessible. I then shared it to my friends and family as well as my classmates using Slack and plan to extend its reach using platforms such as Reddit.

Overall, how do you feel your project turned out?

I’m really proud of how the project came together. There were a few bumps along the way, such as things that needed to be redone and fixed, but every challenge gave me a learning experience that made me feel more confident in my project.

What went well?

The biggest win for me was implementing JavaScript. I started this course alongside an intro to JS class, and by the end I felt motivated to push beyond the basics of what I learned to integrate Js more into this project. Originally, the scope of this project was to design the front-end only, mostly HTML, CSS, and minimal JS. But, it evolved into something a lot more interactive and functional. I learned a lot from independent research.

What didn't go well?

I learned the hard way that prototyping before coding is essential for me. I skipped that step for some features, which ended up taking more time when things didn’t work/look as expected. In the future, I’d prototype visually before coding.

What did you learn about yourself as a designer? as a developer? as a project manager?

As a project manager, I learned that I thrive when I have a clear itinerary, whether that be daily or weekly breakdown of what needs to be done in order to stay on track. Without this structure, I feel lost and uncertain about whether I’ll meet the deadlines.
As a developer, I learned I needed to be honest about my current limits of my current knowledge. Some features I had envisioned had to be postponed because I didn’t have the skills to implement them, and the timeline didn’t allow for unfamiliar territory.
As a designer, I value prioritization knowing what to keep, cut, organize, and what to save for a future version.

View my live site https://tomate.lol.com.

tomate.lol