My Jar is Too Full
Interactive game to help young adults assess their current life priorities and how they want their lives to look in the future
Play Project
ROLE
Solo Designer & Developer
DURATION
1 month (May 2026 - June 2026)
TOOLS
Figma, Visual Studio Code (HTML, CSS, JavaScript)
Overview
Below are some initial ideas that helped me shape the project
Concept
My topic originated from this graphic below called the college triangle. This triangle says to "choose two" of "good grades" "social life" and "enough sleep" which helps illustrate the idea that everything you choose to do in your life always has a trade-off, even if it's not completely obvious. My topic will be about these trade-offs and the idea of how your priorities can shape your future. I really want to illustrate the idea of how your smallest decisions now can compound and affect what your future looks like.
Audience
My target audience will be low-income college seniors in California. I want to focus on college seniors due to them being on the brink of graduating which puts them in a unique position of thinking a lot about their future. I also want to focus on lower-income students because these students also tend to worry more about their future, stability, and even their impact on future generations. Lastly, I want to focus on people who live in California so I can directly impact the people in my community.
Purpose
The purpose of this project is to help young adults reevaluate the priorities in their life and think about their future. A lot of young adults tend to sacrifice parts of their life and don't necessary think about how it may impact them long-term. This project will help visualize their future so they can reassess if they're happy with how they currently prioritize their life.
Goal
Similarly to my purpose, my goal is to help young adults reassess their future and possibly make changes to help improve their future.
Mind Map Brainstorming
Feature Brainstorm
A "quiz" section where it gives you situations and asks how you would respond to each situation
A way to visualize your choices and how each choice prioritized different aspects of your life
A projection to what your future would look like depending on your percentages
Possibly including a rewind feature to allow you to tweak your end goal or see what changes you could make to create a more desirable future
UX Research
I conducted both competitive analysis and litearture review to help shape the ideas for my concept.
Competitive Analysis
I reviewed 2 pieces of competitive analysis to help define my concept.
1. GoalSim
GoalSim is an AI life simulation tool where the user is shown different situations and decisions, and they help shape their lives with these decisions. The unique part of this website is that unlike other static quizes, the implementation of AI makes it dynamic and allows each story ot be unique. Essentially, it delivers different situations with different options based on your past decisions. These decisions then affect long-term outcomes like stats, goals, and story progression. Instead of just giving advice, it lets users simulate their future through paving their path with various smaller decisions.
This is very similar to my project because it focuses on compounding decisions over time and how small choices shape different futures. It also reflects my idea of projecting the future, where the user is able to see different outcomes based on their behavior patterns. The main limitation is that it’s more narrative/game-like and less grounded in real-world metrics like sleep, grades, or social life balance. But, it still strongly supports my speculative design direction by showing how decision trees can represent life outcomes.
website link
2. DecidApp
DecidApp is a detailed decision-making tool that allows users to input decisions they're stuck on, and assess the best option with detailed decisions trees and weighted factors attached to each choice. Users can assign importance values, compare options, and visualize outcomes through branching logic. It's particularly efective for really important or complex decisions where you need to consider a lot of moving parts.
This is very relevant to my project because it mirrors my idea of how different decisions innately have different prorities and factors attached to them, thus ones' decisions can be a window into their values and priorities as a person. DecidApp also mirrors my idea because it multiple life variables (like grades, sleep, social life, etc.). It helps translate subjective choices into more quantifiable trade-offs. Unlike my idea, it stops after one single decision rather than projecting a future world, thus the storytelling is limited. However, the tree structure is very similar to how I would like to map out the logic in my own project.
website link
Literature Review
I reviewed 5 pieces of literature to help define my concept.
1. Opportunity cost | Marginal Cost, Scarcity, & Trade-Offs
This article explains the economic concept of opportunity cost, which is the idea that choosing one option always means giving up another. The article discusses more in-depth about how every decision that you make in life has a trade-off, whether that be losing time, money, energy, or future opportunities. This source is really important for defining my project because my project will surround itself around not only the good benefits of prioritizing things in your life, but also the negative trade-offs that you need to sacrifice as well. I want my project to prioritize key facts in your life such as sleep, academics, finances, and social life. The article concludes that opportunity cost affects both large and small decisions in life. My conclusion is that the idea of opportunity cost is not only important in economics, but it's also important in thinking about the decisions you make in everyday life, both big and small.
2. Exploring the Distribution and Correlates of Future Self-Continuity in a Large, Nationally Representative Sample
This article focuses on the concept of “future self-continuity,” which analyzes the connection between people and their own thoughts about their future selves. The researchers explain that people who strongly identify or feel connected with their future selves are more likely to make long-term beneficial decisions (such as saving money, maintaining healthy habits, and planning responsibly). This source is really useful for my capstone because it helps me hone down on my target audience and the type of people that my project can really impact. I want to be focused on people who strongly identify with their future selves and are more future-thinking. But, this also brings up the idea that this project can help people who are not future-thinking to "wake-up" in a way and realize their affects on their future. The article supports the idea that people make different trade-offs depending on how much they value their future selves. The authors conclude that stronger future self-continuity leads to more future-oriented behavior. I conclude that this idea could become a major mechanic in my project, especially through the “future projection” feature that visualizes the consequences of current choices.
3. Sleep Quality, Duration, and Consistency Are Associated with Better Academic Performance in College Students
This study examines the relationship between sleep habits and academic success among college students using sleep-tracking data. The researchers found that students who maintained consistent sleep schedules and higher-quality sleep generally earned better grades. This source is extremely useful for my project because it provides scientific evidence that sacrificing sleep can negatively affect academic performance, reinforcing the trade-offs my project aims to uncover and visualize for the user. This is important because in my project, I need to think about how some aspects measured (such as sleep and academics) can both be increased by one decision and intertwined in a way. This article makes me think more about what aspects I want to measure and how certain decisions can impact multiple of these aspects. The authors conclude that sleep consistency matters just as much as sleep duration. My conclusion is that the effect of decisions can be multifaceted so I need to start thinking more in depth about the logic of my project and how choices will impact multiple aspects in different ways.
4. The Effect of Future Self-Continuity on Intertemporal Decision Making: A Mediated Moderating Model
This article studies how people make decisions between short-term rewards and long-term benefits. In the article, the researchers explore how a person’s connection to their future self influences their willingness to delay gratification and prioritize future outcomes. This source is very relevant to my capstone because my project centers around trade-offs and the idea that students constantly choose between immediate satisfaction and long-term success. This difference of prioritizing immediate fun (such as going out) versus prioritizing future happiness (such as studying to achieve stability in the future) is something that I really want to focus on in my project. The article goes on to explain why different people may prioritize social life, grades, sleep, financial stability, or personal fulfillment differently which connects a lot with my capstone project idea. The authors conclude that people with stronger future self-awareness are more likely to make decisions that benefit them in the long run. I conclude that this research could help shape the logic behind my project’s quiz system and also help project someones future by boiling down their statistics to show how much someone values immediate gratification versus delayed gratification.
5. Future You: A Conversation with an AI-Generated Future Self Reduces Anxiety, Negative Emotions, and Increases Future Self-Continuity
This research paper introduces an AI system that allows users to interact with a simulated version of their future selves. The study found that speaking with a future version of oneself increased future self-continuity while also reducing anxiety and negative emotions. This source is highly useful for my capstone because it reasons why this project will be impactful and can have positive change in people's lives. By projecting someones future in a realistic way, their anxiety may be reduced and they might feel a stronger sense of control and connection with their future. Another feature I was considering in my project was a "rewind" feature that might help with reducing this anxiety by helping people feel in control. The article demonstrates how visualizing or interacting with future outcomes can emotionally impact decision-making in the present, which can in-turn help benefit one's future. The authors conclude that personalized future simulations can encourage healthier and more future-oriented thinking. My conclusion is that this research heavily validates my project and its impact, and also gives me insight into how to make it more compelling with possibly including a feature like the “rewind” feature to allow people to feel more in control and experiment with different life choices to see how outcomes change.
Visual Design
Below are some initial ideas that helped me shape the project
Low-fi Sketches
My Low-fi Sketches focused a lot on layout. Many of these ideas ended up getting scrapped because at the time, my main visual element (the jar) was not defined. However, these sketches were a great way to brainstorm how I would visualize my idea in the interface and helped with the general layout of the answer options in relation to the question.
Initial UI Iterations
When initially iterating on my idea, I wanted a way to visually represent the data of the user choosing different priorities. My initial idea was that each color would represent a priority, and depending on what the user chooses the color would become brighter or take up more of the background space to represent that it is taking up more space in that person's life. However, this idea was later scrapped because it was too visually distracting and hard to create a cleaner UI with so much color.
Iteration 1
Iteration 2
Iteration 3
New UI
My new idea was a lot more sleek and still stuck with the initial idea of having the colors represented in the concept but not be revealed until the end.
Home screen
Quiz Screen
Color System
I used a relatively simple gray and white for the background and text. I wanted the background elements to be plain to allow the orb colors to pop! For each orb color, I researched and thought about what each color people associated each color with.
career: blue (represents professionalism and success)
money: green (represents physical money color)
health: red (represents the physical heart)
relationships: pink (represents pink love heart)
freedom: yellow (represents sunshine and enlightenment)
User Interface
2
1
3
4
Progress bar
The progress was really important for the user interface, as the quiz is quite long and the progress bar keeps the user motivated to finish because they know how far along they are
Answer Options
The answer options glow and pop up a little bit when hovered on, so the user knows that they're clickable. This is really important for making them distinctly different from the question, so that the user knows they're interactive elements.
Confirm button
The confirm button originally stays in a "deactivated" state where the user can't click it and it is visually gray to indicate it is unclickable. After selecting an option, the confirm button lights up with red so the user can click on it to continue. The confirm button is important so that user doesn't accidentally click an option. It is also important because it directly triggers in the orbs falling, so the user knows that submitting their choice directly causes the orb animation.
Falling Orbs
The falling orbs not only tie the concept in visually, but also provide the user with a little bit of delight every time they answer a question. This helps motivate the user to complete the quiz and keep going.
Revisions
I conducted user testing with 3 other students to receive feedback about my project
User Testing
After having the main building blocks of my user test, I conducted user testing. I did this by watching 3 peers play through my project, taking notes about their experience. I also asked questions after about their experience. Here are the questions I asked below:
1. Was it clear what you were supposed to do throughout the experience?
2. Did any part of the app feel confusing or difficult to use? If so, where?
Did the quiz questions feel realistic or relatable to your own experiences?
Did the connection between your choices and the final outcome make sense to you?
Which part of the experience felt the most meaningful or memorable?
Did the five priorities (Career, Money, Health, Relationships, and Freedom) feel balanced and understandable?
Did the experience make you think differently about your own priorities or future?
What is one thing you would improve or change about this experience?
Feedback
Positives:
1. Concept is really strong
2. All of the questions were hard (which is a good thing!)
3. The ending felt like it matched their choices
4. The project felt relatable
5. The orbs were a really good touch
Negatives:
1. In the beginning, one of the users took a second to realize that the quiz portion already started
2. The way the orbs calculated at the end was not too clear
3. There should be more questions about well-being and freedom (it felt very career and relationship heavy)
4. The end was not obvious that it was scrollable
5. Maybe include an easy way to see all the other options at the end!
Revisions Implemented
1. Rewrote half of the questions to have it more balanced between the 5 different priorities
2. Made the font of the question options larger for easier reading and improved accessibility
3. Made the ending separate boxes so that it was obvious that it was scrollable
4. Limited the amount of orbs someone can end with, so it wouldn't clip at the end
5. Included labels under the orbs so the visual made more sense at the end
What I would do if I had more time
Summary
I conducted user testing with 3 other students to receive feedback about my project
Learnings
Feasibility: I had a lot of big ideas at the beginning of the project, but considering that we only had a little over a month to go from 0 to 1, I needed to hone down on a more feasible idea so I would be able to complete on time. It was hard to let go of a lot of amazing ideas, but at the end, it was worth it so that I could end up with a complete project
Javascript: This project was surprisingly complicated despite it being essentially a quiz! It was important for me to draw out all the logic before starting the code, and making sure things made sense to me as I was building it.
What I'm Proud Of
0->1: I am so proud of being able to complete this project! In the beginning, it was hard to get started due to how much was involved in getting this concept running, but I'm so very proud of getting it all completed. It's a concept that hits home for me and a lot of peers around me, so I believe it's really impactful too!
Challenging & Rewarding
Challenges
Something challenging about this project was the JavaScript. Sometimes when editing, I would forget what past code did and would edit something that completely broke my project. (Like, when I changed all the h3's to h2's and then the "Continue" button stopped working). It was really frustrating trying to troubleshoot these small issues and feeling like I might have lost a lot of progress (especially if I forgot to git push recently!)
Rewards
What was most rewarding about this project was seeing it all come to life.