Tiny Tails is a social platform designed for pet parents to manage their pets' health, track daily walks, celebrate milestones, and connect with a community of fellow pet lovers.
Instead of juggling separate apps for health records, activity tracking, and social sharing, Tiny Tails brings everything into one simple experience.
Industry
Pet Care Community Platform
Timeline
4 Months
Role
Product Designer
Key Focus
The main goal was not just to show movie information.
The website should make users feel like they are entering the world of the movie.
It should create curiosity, build emotion, and leave a memorable experience.
Delivered
Research
Information Architecture
Wireframes
Moodboard
Multiple UI Iterations
Final Figma Design
Responsive Framer Website
The Problem
Modern pet parents use multiple disconnected apps:
One for vaccination reminders
One for activity tracking
Instagram for sharing moments
Notes app for medical records
This creates fragmented experiences and lowers engagement.
User Pain Points
🐶 Hard to monitor daily pet activity
🐶 No motivation to maintain walking habits
🐶 Medical records scattered
🐶 No dedicated pet community
🐶 Difficult to celebrate pet achievements
Information Architecture and Wireframes
Once the research was completed, I planned the content structure. The goal was to tell the movie story step by step.
The sections were arranged in a simple flow.Header
Hero Section
About
World of Baracoa
Cast
Location
Music
Director & Crew
Gallery / movie stills
Director's note
Making of/BTS
Critics & media
Footer
Once the structure was ready, I created low fidelity wireframes to visualize the layout.
At this stage, I focused only on:
Section order
Content placement
Visual balance
Scrolling experience
I did not use any colors or visual styling. This helped me quickly test different layouts and improve the content flow before moving to the final UI design.
Moodboard
Before designing the interface, I created a moodboard.
It included
Movie frames
Lighting references
Typography inspiration
Color references
Texture ideas
Composition references
This moodboard became the visual guide for the entire project.
Whenever I designed a new section, I checked whether it matched the moodboard.
Moodboard
UI Exploration
This was the longest part of the project.
Instead of accepting the first design, I explored multiple ideas.
I created different layouts
I changed spacing.
I experimented with colors.
I tried different image compositions.
I refined every screen until it matched the emotion of the movie.
These design iterations helped me find the final visual language for the website.
Final UI Design
Once the visual direction became clear, I designed all the final screens in Figma.
The focus was on creating a cinematic experience.
Every section was connected with the next section so that the scrolling felt natural.
The typography, colors, spacing, and imagery followed the same visual language across the website.
Development in Framer
After completing the design, I developed the website in Framer.
The website was made fully responsive for
Desktop
Tablet
Mobile
Special attention was given to
Smooth scrolling
Page transitions
Responsive layouts
Loading experience
Background music
Performance
The goal was to make the live website feel as close as possible to the Figma design.
Final Outcome
The final website became more than a movie information page.
It created a cinematic experience where every section reflected the emotion of the film.
The project also helped me explore visual storytelling, mood based design, and turning a movie into an interactive web experience.