.png){kind=tracking}
Design & Prototypes
The visual design for Hoppin was created to feel clean, calm, and user-focused—allowing users to browse, book, and manage activities without distraction, inspired by feedback from users who preferred minimal, intuitive apps.
Visual Design Approach
I focused on clarity, contrast, and a consistent visual rhythm, with all visual elements built with accessibility in mind using WCAG-compliant color contrast ratios and mobile-first layouts.
1
White backgrounds
To reduce visual clutter and keep screens feeling open
2
Black text
For maximum readability and contrast
3
Deep plum
For primary call-to-action buttons, creating a strong but approachable focal point
4
Peach
For secondary and neutral actions, maintaining a soft and non-intrusive hierarchy
5
Clean sans-serif typography
With clear visual hierarchy for headings, labels, and body text
High-Fidelity Wireframes
I designed both the low-fidelity wireframes (to map out user flows and structure) and high-fidelity wireframes (to establish the final look and interaction intent) for key screens in the app. Each screen was designed using accessible UI kits and customized to reflect the tone and purpose of Hoppin's brand and user goals.
1
Home screen
Search-first layout, trending activities
2
Activity detail pages
Booking options, visuals, and event descriptions
3
Reschedule and cancellation flows
With confirmation states and clear policies
4
Invite a Friend flow
With sharing options via contacts, apps, or in-app connections
5
Unified sign-in/sign-up screen
To reduce user friction
6
Booking success and failure screens
To provide immediate, clear feedback
Interactive Prototype
To bring the experience to life, I developed a full interactive prototype in Figma. This prototype allows users to simulate key actions and understand the end-to-end user journey.
1
Personalized onboarding and guest access
Seamless entry point supporting both account creation and guest browsing
2
End-to-end search and booking flow
Complete user journey from discovery to confirmation
3
Flexible rescheduling and cancellation
User-friendly booking management with clear policies
4
Invite-a-friend functionality
Multiple sharing channels for social activity planning
5
Clear success and error states
Feedback systems that reflect real-world use cases
Prototype Walkthrough
Watch a quick walkthrough of the interactive prototype to see the user flow in action:
Try the Interactive Prototype
Want to explore the prototype yourself? Click through the full experience:
Learning Journey & Next Steps
Current Prototype Scope
This prototype represents my foundational understanding of interaction design and user flow mapping. As a beginner-level implementation, it focuses on core user journeys and essential interactions, allowing me to practice fundamental prototyping skills and design thinking processes.
Areas for Enhancement
I'm actively working to expand this prototype with more sophisticated interactions, including complex overlay systems and modal interactions, advanced micro-animations and transitions, multi-state components and dynamic content, more detailed error handling and edge cases, and enhanced accessibility features with keyboard navigation.
Continuous Learning Approach
Each project is an opportunity to push my prototyping skills further. I'm committed to iterative improvement, studying advanced interaction patterns, and implementing increasingly complex user experiences as I continue developing my expertise in UX design.
"This project represents where I am in my design journey—building solid foundations while actively working toward more sophisticated interaction design. I believe in transparent growth and continuous learning."