Vibe-coding student-centered tool for arts empowerment

Timeline

2 Months

Role

Product and UI/UX Designer

Team

Me!

Tools

Framer

Figma

Claude

Overview

Designing for community

My thesis project focused on empowering the arts for under-resourced high schoolers at my former highschool inspired by activities and projects from our art club. The goal is to achieve this through mini warm-up activities and encouragement to engage with sketchbook challenges. Finally there is a community aspect where everyone can share what they've created to gallery and see what everyone else is doing.

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.


My thesis project focused on empowering the arts for under-resourced high schoolers at my former highschool inspired by activities and projects from our art club. The goal is to achieve this through mini warm-up activities and encouragement to engage with sketchbook challenges. Finally there is a community aspect where everyone can share what they've created to gallery and see what everyone else is doing.

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.


Compiling research and assets

Compiling research and assets

I then clustered the ideas on Figjam. With these clusters, I determined primary and secondary features, alongside coding considerations. After creating my clusters I sketched out drafts of how I wanted it to look, created an asset library of colors, typography, and components. One of my main components is one I pulled off of Framer market and then vibe-coded to be able to capture whats drawn on it and then submit it to my gallery page.

I then clustered the ideas on Figjam. With these clusters, I determined primary and secondary features, alongside coding considerations. After creating my clusters I sketched out drafts of how I wanted it to look, created an asset library of colors, typography, and components. One of my main components is one I pulled off of Framer market and then vibe-coded to be able to capture whats drawn on it and then submit it to my gallery page.

Interviews

In my interviews I was able to flesh out what this will be and how it will work. Throughout my iterations I would get feedback to make sure I was on track.

←

→

Interviews

In my interviews I was able to flesh out what this will be and how it will work. Throughout my iterations I would get feedback to make sure I was on track.

←

→

Interviews

In my interviews I was able to flesh out what this will be and how it will work. Throughout my iterations I would get feedback to make sure I was on track.

←

→

First Prototype

From static to interactive with AI

With everything laid out I was able to feed what I wanted to make interactive to Claude and it create code and components within my design system. This left me with my first fully functional prototype. All seven activities worked and were able to be submitted into a functional gallery system every time someone created something

With everything laid out I was able to feed what I wanted to make interactive to Claude and it create code and components within my design system. This left me with my first fully functional prototype. All seven activities worked and were able to be submitted into a functional gallery system every time someone created something

Design

I designed the entire website, making sure the colors, type, and layout were consistent throughout and ready for the components and coding

←

→

Demo of homepage and first activity

Demo of homepage and first activity

Considerations

Pivots are not setbacks

After a mid way review with a visiting critic I discussed my accessibility challenges with low resources, and was presented another idea of making this a teacher tool instead. I was torn between my original idea and this, and landed on a hybrid solution.

Accessibility

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.


Pivot

This is where I pivoted and vibe-coded 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.

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.


Accessibility

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.

←

→

Admin page screen

Admin page screen

Admin Access

Only the teacher can access this customization panel with a log in

←

→

Admin page becomes its own resource

The biggest feature is adding and customizing their own prompts in addition to the pre-added ones sourced with AI. Allowing for the teacher to be as involved as they want to be, but also be able to fall back on presets when they get busy.


Allowing for the teacher to be as involved as they want to be, but also be able to fall back on presets when they get busy.


Student monitoring

The teacher is able to receive both public and private journal entries, and the ability to filter through them

Admin Access

Only the teacher can access this customization panel with a log in

Customization

They can also add a week and description to their prompts, search, and delete or change which prompt is active

Exhibition day

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.

I set up the 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

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!

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…"

Page

Work

About

Explore