Interaction Design 2 Project

StudyRoom

A playful focus timer that turns completed study sessions into visible progress and encouraging mascot feedback.

Introduction

A productivity timer designed to make focus feel rewarding.

StudyRoom helps students stay motivated by pairing a clear timer with a reward system led by an expressive mascot. My goal was to keep the app useful first, then layer in personality where it could make studying feel more satisfying.

Problem

Focus apps often measure effort without making it feel meaningful.

Motivation was the missing interaction.

A timer can tell someone how long they studied, but it does not always help them feel proud of finishing. StudyRoom needed feedback that made completed sessions feel visible without distracting from the actual work.

The design challenges

Make completion feel rewarding without making the timer screen feel crowded.
Use customization as a reason to return, not as a distraction from studying.

Solutions

A clearer flow from setup to reward.

Reference Direction

Studying apps that make progress feel personal.

I studied Duolingo, Finch, Focus Friend, FocusPomo, Forest, and Focus Keeper to compare how playful products motivate users over time. Those references helped me shape StudyRoom as a focus tool first, with rewards and character feedback added only where they supported the study flow.

Onboarding Experience

The onboarding screens introduce the mascot and set the tone before users start a timer. I kept the flow lightweight so the app could feel personal without slowing down the first session.

Timer Completion Layout

The completion screen was one of the hardest layouts to resolve. I wanted it to feel celebratory without turning into clutter, so I kept testing arrangements until the mascot, timer result, and reward feedback felt balanced.

Timer complete page — Final completion screen

Mascot jumping after a completed timer — Mascot reward animation

Shop & Customization Layout

The shop needed to show what users could earn while keeping the mascot visible. I referenced Forest, Focus Friend, and FocusPomo while refining the layout so customization felt connected to studying instead of feeling like a separate feature.

Process

The process moved from character design to interaction polish.

Character Development

Sketching gave the mascot a clear personality before the interface was finalized.

I used concept sketches and color tests to find a character style that felt friendly without overpowering the productivity experience.

Character color process

Jump Animation

The jump animation became the clearest reward response.

I moved from a rough sketch test into a polished animation that could make timer completion feel more energetic and satisfying.

Mascot jump sketch animation — Jump sketch

Mascot jumping animation — Final jump animation

Animated Elements

Everything I animated for this project.

Greeting motion

Celebration transition

Waiting screen motion

Lessons Learned

Animation works best when it supports the reason people came to the app.

This project taught me to treat motion as feedback, not decoration. The strongest parts of StudyRoom came from connecting playful visuals back to the study loop users rely on.

Layout iteration matters most when a screen needs to feel both useful and rewarding.

Mascot animation works better when it responds to user progress instead of simply adding style.

References are most helpful when they guide decisions without making the product feel copied.