NookOffice hosts hourly rotating Animal Crossing tracks for relaxing, studying, or working complete with timers & to-do lists.
Technologies Used
NookOffice is a relaxing productivity web app inspired by Animal Crossing: New Horizons. It hosts hourly rotating ACNH music, making it perfect for studying, working, or just creating a peaceful atmosphere. I built it using Astro, with styling handled in CSS and a bit of JavaScript for interactivity.
The app includes a set of simple, cozy tools:
- Hourly Animal Crossing music rotation
- Optional rain sound layering
- Locally saved to-do list so tasks persist between sessions
- 5, 10, and 15-minute timers for quick focus sessions
Most of the GIFs come from the official Animal Crossing movie/anime, and additional artwork is credited to Saino. The project is deployed on Netlify, and I use the YouTube Embed API to manage music playback.
User Interaction & Experiences
Goals and Challenges
During the design process, I focused on:
- Creating a Relaxing Environment: Incorporating hourly rotating ACNH tracks and optional rain sounds.
- Encouraging Productivity: Adding timers and a to-do list to support focus sessions.
- Simplicity & Accessibility: Ensuring features were easy to find and use, without overwhelming users. It must also be resizable to small windows for Notion Embedding.
Key challenges included balancing relaxation and functionality, keeping the UI small and simple yet playful, and ensuring local persistence of user tasks.
Wireframing Process
Tools: Figma
Approach:
- Low-fidelity wireframes to map the layout and core functionality.
- Mid-fidelity interactive prototype to simulate timers, music rotation, and to-do list behavior.
Layout & Navigation
- Music Rotation & Sound Options: Positioned prominently for immediate access.
- Timers: Quick 5, 10, 15-minute buttons visible without scrolling.
- To-Do List: Simple and persistent, with tasks saved locally for convenience.
Information Hierarchy
- Primary focus on music and timers, supporting a smooth workflow.
- Secondary features like optional rain sounds and task management are visible but unobtrusive.
Consistency
- Calm color palette and rounded UI elements to match the cozy Animal Crossing aesthetic.
- Fonts and buttons are consistent across all components for clarity and usability.
UX Rationale
- Immediate Access to Core Features: Users can start music, set timers, and check their to-do list in under two clicks.
- Optional Audio Layers: Rain sound layering is optional, preventing overload while adding customization.
- Visual Calmness: Soft colors, rounded edges, and minimal UI elements reinforce a relaxing experience while keeping it responsive for Notion embeds.
