Vibe-coding student-centered tool for arts empowerment
Vibe-coding student-centered tool for arts empowerment
2 Months
2 Months
Timeline
Timeline
Product and UI/UX Designer
Product and UI/UX Designer
Role
Role
Me!
Me!
Team
Team
Framer
Framer
Figma
Figma
Claude
Claude
Tools
Tools
Overview
Overview
Designing for community
Designing for community
My thesis project focused on empowering the arts for under-resourced high schoolers at my former highschool. Through my own experience I knew how much the arts get cut in public low-income schools with underrepresented students.
My thesis project focused on empowering the arts for under-resourced high schoolers at my former highschool. Through my own experience I knew how much the arts get cut in public low-income schools with underrepresented students.
Research
Research
Data gathering and organization
Data gathering and organization
I collaborated with a former art teacher of mine to interview and assess what she felt was most important to her and the kids currently.
This is a process called needfinding, where a designer creates around what the users express or show what they struggle with rather than the designer creating what they believe is needed. This helps make sure there is no disconnect between the user and the design or product.
I collaborated with a former art teacher of mine to interview and assess what she felt was most important to her and the kids currently.
This is a process called needfinding, where a designer creates around what the users express or show what they struggle with rather than the designer creating what they believe is needed. This helps make sure there is no disconnect between the user and the design or product.
After many interviews I organized what gets put into the main feature, secondary, what coding considerations need to be made and what resources I wanted to use. Some of my ideas got cut out with their own reasonings attached.
After many interviews I organized what gets put into the main feature, secondary, what coding considerations need to be made and what resources I wanted to use. Some of my ideas got cut out with their own reasonings attached.
First Prototype
First Prototype
From static to interactive
From static to interactive
After sketching what I wanted the website to look like I created my first prototype. I started with creating my design system, the typography, colors, hierarchy and used that as a base for each page. I wanted the overall feel of the product to feel fun and inviting.
After designing the entire website, I used Claude AI to create the code for my components that will be able to rotate the prompts every week on Tuesday when the school has art club, and for my whiteboard component. This component keeps track of what is drawn on the screen and allows for users to submit what they draw to the gallery. This is stored and gathered with an API.
The homepage allows students to decide where they can start, and then navigate between the pages once they get inside the activities. There are seven activities ranging in complexity and prompts. The bigger activities, like the sketchbook require students to pull out their sketchbook that is required for class to work on it, and a journal activity to reflect and communicate with the teacher.
After sketching what I wanted the website to look like I created my first prototype. I started with creating my design system, the typography, colors, hierarchy and used that as a base for each page. I wanted the overall feel of the product to feel fun and inviting.
After designing the entire website, I used Claude AI to create the code for my components that will be able to rotate the prompts every week on Tuesday when the school has art club, and for my whiteboard component. This component keeps track of what is drawn on the screen and allows for users to submit what they draw to the gallery. This is stored and gathered with an API.
The homepage allows students to decide where they can start, and then navigate between the pages once they get inside the activities. There are seven activities ranging in complexity and prompts. The bigger activities, like the sketchbook require students to pull out their sketchbook that is required for class to work on it, and a journal activity to reflect and communicate with the teacher.
Demo of homepage and first activity
Demo of homepage and first activity
Considerations
Considerations
Pivots are not setbacks
Pivots are not setbacks
I wanted to consider the inaccessibility of making this a physically printed project. Printing for a large school with large class sizes while having a lack of paper for print would not make this feasible.
But I also want to acknowledge that while a website is more accessible because each student is provided a device, it may not be the best solution as students can get distracted and more screen time for youth can be looked down upon if it is not controlled.
This is where I pivoted…
and created an admin page to allow the teacher more control of the product, turning it into a hybrid where it becomes a tool for teachers as well.
I wanted to consider the inaccessibility of making this a physically printed project. Printing for a large school with large class sizes while having a lack of paper for print would not make this feasible.
But I also want to acknowledge that while a website is more accessible because each student is provided a device, it may not be the best solution as students can get distracted and more screen time for youth can be looked down upon if it is not controlled.
This is where I pivoted…
and created an admin page to allow the teacher more control of the product, turning it into a hybrid where it becomes a tool for teachers as well.
I vibe coded another page that can be accessed with a username and password by the teacher only. This admin page allows for the teacher to receive all of the journal entries and filter them, and the biggest feature is being able to add and customize their own prompts in addition to the pre-added ones sourced with AI.
The teacher would be able to add a week attached to it and a description and search in the database. They can delete any entries and also change which one is active whenever they please.
I vibe coded another page that can be accessed with a username and password by the teacher only. This admin page allows for the teacher to receive all of the journal entries and filter them, and the biggest feature is being able to add and customize their own prompts in addition to the pre-added ones sourced with AI.
The teacher would be able to add a week attached to it and a description and search in the database. They can delete any entries and also change which one is active whenever they please.
Exhibition day
Exhibition day
Real life interactions
Real life interactions
I set up the entire space mostly on my own and with the help of the gallery space curator for the tech and putting together of the table. My work stayed up in the Charles Addams Gallery for about a week where people were free to interact with it.
I set up the entire space mostly on my own and with the help of the gallery space curator for the tech and putting together of the table. My work stayed up in the Charles Addams Gallery for about a week where people were free to interact with it.
People interacting on opening day and some paper used by classes who came in during other times!
People interacting on opening day and some paper used by classes who came in during other times!
Next steps
Next steps
Constructive criticism builds
Constructive criticism builds
After the exhibit I received great feedback from my professors, director, and visiting artist critics on aspects of the project that I could develop further. I was also able to observe how people interact with the product in real time which gave me valuable perspective on how it is being used.
My next steps are to continue to strengthen this project and explore more ways to vibe code unique activities and experiences before launching to my high school's art club!
After the exhibit I received great feedback from my professors, director, and visiting artist critics on aspects of the project that I could develop further. I was also able to observe how people interact with the product in real time which gave me valuable perspective on how it is being used.
My next steps are to continue to strengthen this project and explore more ways to vibe code unique activities and experiences before launching to my high school's art club!
Testimonial
Testimonial
"…I saw your project in the design senior thesis exhibit while I was in the studio earlier and just wanted to reach out and tell u it was amazing! ! genuinely took so much out of it as im trying jump back into my passion for art and your project so beautifully highlighted the process im working through. Congrats to u for an amazing exhibition…"
"…I saw your project in the design senior thesis exhibit while I was in the studio earlier and just wanted to reach out and tell u it was amazing! ! genuinely took so much out of it as im trying jump back into my passion for art and your project so beautifully highlighted the process im working through. Congrats to u for an amazing exhibition…"