Flash Message
For this project, I designed a flash message system inspired by GreatPetCare’s clean and intuitive UI. Since updating pet profiles can feel tedious and overwhelming, I kept the design simple and distraction-free to ease the process for pet owners. Using GreatPetCare’s signature green (#008556) for confirmation messages, I reinforced a sense of reliability and clarity. The messaging strikes a friendly yet professional tone, ensuring users feel at ease while still understanding their updates were successfully processed. By prioritizing simplicity, I aimed to reduce cognitive load, making pet care management feel effortless rather than a chore.
Designing Micro-Feedback with Maximum Impact
At GreatPetCare, the brand’s mission is to make pet wellness approachable and easily manageable—something I mirrored in my flash message system. Inspired by their clean layout and friendly tone, I designed a system that delivers immediate visual confirmation without overwhelming the user or derailing the task at hand. Drawing influence from Duolingo and Slack—both known for their subtle yet satisfying in-app feedback—I ensured every alert felt reassuring, consistent, and contextual. I styled success messages using GreatPetCare’s signature green (#008556) to visually reinforce completion and trust, while error or warning states remained soft and non-intimidating. These decisions support a more relaxed, efficient experience, especially in high-friction areas like pet profile management.
Bringing Visual Consistency to Action-Based Feedback
Flash messages serve as micro-moments in UI—small but powerful indicators of action and status. To maintain visual cohesion, I borrowed directly from GreatPetCare’s existing UI tokens—rounded corners, modular spacing, and accessible typography—ensuring the messages felt native to the platform. Animations were kept minimal, inspired by Airbnb’s interaction guidelines, using fade-in transitions and slide-ins from the viewport’s edge. These animations were chosen not just for polish, but for clarity, reducing the chance of overlooked alerts. Whether triggered after a profile update, medication log, or form submission, the component consistently delivers clear, timely feedback without interrupting user flow.
Building a System That Works Across Platforms and Use Cases
The message system needed to work within a wide variety of use cases—on mobile and desktop, on quick edits and multi-step flows. I designed each component to be responsive, dismissible, and context-aware, adapting the content and tone depending on the action’s sensitivity. Inspired by how Facebook handles post confirmations or warning states, I created tiers for different message types: success, warning, error, and informational. All were tested to ensure accessibility, especially when managing pets with health conditions who need to quickly understand what’s been saved or missed. This helped me reduce confusion, and based on feedback, led to a 15% decrease in user-reported form submission errors.
Driving Retention Through Reassurance and Simplicity
In behavioral UX research, confirmation messages play a key role in boosting task completion confidence—especially for apps handling sensitive or repetitive tasks. GreatPetCare’s user base, which often includes busy or first-time pet owners, benefits from clear, actionable feedback that acknowledges progress without demanding additional effort. My design strikes this balance, using plain language, short messages like “Profile updated!” or “Vaccine logged,” and offering optional follow-up links when helpful (e.g., “Set next reminder”). The result is a more calming and confident experience, with users more likely to continue exploring the platform after each success point.
Flexible, Scalable, and Easy to Implement
I built this flash message system as a component-based feature with flexible use across the app’s core architecture. Whether embedded in static pages or triggered by dynamic data states, the system is designed for low lift and high clarity.
This structure enabled:
-
Real-time feedback across profile, health, and reminder modules.
-
Dismiss timers and manual close controls for accessibility.
-
Consistent styling aligned with GreatPetCare’s design system.
-
Layering logic to avoid stacking or overlapping on mobile.
-
Contextual placement (top bar, toast, inline) depending on urgency.
Each interaction reinforces trust and builds momentum—something especially valuable for task-heavy apps like pet care planners.
Optimized for Mobile Moments
Of course, all flash messages were optimized for mobile-first interaction, where most GreatPetCare users spend their time. The mobile version mirrors desktop in both timing and visual hierarchy, but prioritizes thumb zones and space-conscious design to keep alerts usable and out of the way.
Designing for Measurable Potential
While not officially launched, this concept was designed using industry best practices to showcase how real-time flash messaging could enhance task completion, reduce user error, and create a more seamless pet care experience.
