trader joes trader joes trader joes trader joes trader joes trader joes
trader joes trader joes trader joes trader joes trader joes trader joes
Vibe Coding
AI Integration
Open-Ended
User Flow
Project Type: Tablet Study TOol
Year: 2026
Software: Google AI Studio, Unicorn Studio, Figma, Photoshop
Loyola students often struggle with time management, which is a major source of their stress. While the library offers resources like study rooms and equipment, it doesn’t support students in planning their sessions or getting into a productive mindset. As a result, students don’t fully take advantage of their time there.
research
I designed Flowstate for my design capstone at Loyola University New Orleans. The project was intentionally open-ended, forcing me to be proactive in discovering an opportunity for my client. I chose to work with the Monroe Library to create a project that would somehow improve their services. Since the library posts mental health advice on social media, I saw an opportunity to further help students deal with stress while studying.
Interview
I conducted interviews with 30 students from the library and around campus to learn about their study habits. These were the main questions that I asked:
What kind of struggles do you face as a student?
How do you deal with stress?
How do you usually feel before starting a study session?
What keeps you from starting your schoolwork when you want to?
What distracts you while you are studying?
What do you do to study more efficiently?
data analysis
To make patterns from my research more apparent and easier to interpret, I created word clouds and a persona.
After reviewing the results, I found that poor time management was the main source of stress for students. Part of the reason is because students often procrastinated by checking their phones or thinking about other things they could be doing, and were easily distracted by noise and notifications. Although I was thinking to promoting stress-relief methods with my project, I realized that most students’ preferred activities were outside my scope. While I kept user stress in mind throughout the rest of my design process, I shifted my priority to directly improving time management.
Competitor analysis
I researched other time management tools and found several common features. Including them would strengthen my project while also meeting user expectations if they've used similar apps.
Moodboard
I based my site's theme off calming study imagery, which often often features warm colors, dim lighting, and nature. I found several images on Pinterest for inspiration, as well as asking AI to generate some with the theme of studying to see what's expected of this kind of image. These visuals can help students enter a focused mindset and reduce stress.
development
By this point, I had prioritized helping students with time management and saw the pomodoro timer as a great solution. It encouraged focus studying and taking breaks, great for making progress while caring for yourself. I also wanted time blocking and task breakdowns so students don't spend time thinking what to do next an lose focus. My sketches and wireframes focused heavily on the timer.
However, through reflection and discussions with my design professors, I realized that there were already a lot of other resources with this functionality. To make Flowstate a worthwhile investment that could really make a difference, I changed the core goal of the project. It wasn't just about helping students stay focused, but about getting them started. To avoid procrastination, getting started needed to be as easy and intuitive as possible.
My earlier wireframes had too much information on some screens, so I simplified them heavily to keep users focused. There was also the problem of the tool requiring too much initiative by having to type all the tasks and break them down yourself. Because of this, I moved development to Google AI Studio. AI could both create tasks and break them down, drastically shortening the length of this process and making sure users don't get stuck on it. By training the AI with course information, it could create fairly accurate study plans in seconds. This program would also allow me to demonstrate many complex logic features that a simple Figma prototype couldn't, giving the library a better sense of what the vision was.
final
reflection
Flowstate was presented at Loyola’s 2026 capstone showcase, Aspect Ratio, where it was well received by guests who tested it. Attendees noted its intuitive user flow, professional UI, and extensive functionality enabled by AI integration. Testing also revealed areas for improvement: some users overlooked the “AI Breakdown” feature, were unsure how to phrase tasks, and did not realize Flo could provide additional help. If I continued developing Flowstate, I would make these features more prominent and provide clearer guidance.
Working on Flowstate taught me the importance of keeping my design direction flexible and challenging my assumptions. I initially planned to focus on mental health support based on the library’s social media content, but interviews revealed that time management was a more significant concern for students. Competitor research then led me to redefine the project again, shifting its focus toward helping students start studying rather than simply manage their time. While major changes can make a project’s direction feel uncertain, they may lead to a more meaningful solution.
Google AI Studio also changed how I approach prototyping. AI sometimes interpreted my wireframes differently than intended, which was frustrating at times, but it also introduced ideas I had not considered. For example, it simplified my timeline design and added a section clearly stating how ahead or behind schedule users were. Working through these changes also forced me to think more deeply about the logic behind interactions, such as how extra time from a completed task should carry over to the next. Ultimately, AI helped me move beyond static screens and create a more realized prototype that demonstrated how Flowstate could function across different scenarios.