Week 5 Midterm Project: Idea & Progress Documentation

My concept

For my midterm project, I plan to build an experience called “productive portals.” Basically, it’s a work/study with me experience where the user and choose a portal to transport to, and the program will have creative interactions (explained below).

The home screen provides a brief description of the experience and a button that says “choose portal”. When clicked on, 4 portal options pop up, and the user gets to choose 1 of 4 portals.

This takes the user to the study location they chose. A “drinks menu” pop up, where the user can choose from a variety of drinks. The fancier the drink is, the longer the work timer is (for example, if they choose a strawberry matcha, they will work for 90 minutes).

After this, they will enter the main working screen. The main working screen contains an illustration of the drink they chose, a timer counting down, and a to-do list where the user can add the tasks they need to complete. There will also be 3 buttons on the side:

  • End session: the study session will end and takes the user back to the home screen
  • Pause: timer will pause
  • Music: choose 1 of 4 or 5 ambience background music
a wireframe design on Canva…

Structure and Implementation

I also plan to use OOP and create classes for Drinks, Portals, and Tasks. I’m not entirely sure yet…!

The user will mainly use mouse-press for interaction that requires decision making, and they will need to type with keyboard to enter tasks into the to-do list.

The most intimidating portions for me are the to-do list and the menu, I also found some resources that I think would be helpful to look at:

Demo version

I created a demo version which contains the structure of the first 3 screens (including the menu): see code; see full screen.
Note: since this is the demo version, my only focus was the structure and functionality. In other words, please disregard the aesthetics :))

Leave a Reply