[Case 03]
Happy Hoppers
Non-profit Responsive Website
Adoption made simple and accessible
[Project Overview]
[Project Goals]
1. Create an intuitive interface that makes it easy for users to browse and filter bunnies by key characteristics such as breed, age, and personality with visual Hierarchy and card layout
2.Use storytelling, images, and videos to emotionally connect with users, encouraging them to adopt bunnies by highlighting each bunny’s unique personality, story and call to action buttons
3.Ensure the website is fully responsive across all devices, particularly mobile, with layouts and features like the form, filters, and bunny details optimized for various screen sizes
[Industry]
Non-Profit
[My Role]
UX Designer/ Front-end Developer
[Methods]
User Persona
Information Architecture
HTML & CSS
Wireframe
[Timeline]
August 2024- September 2024
[Process]
[01] Information Architecture
Identified and documented key features and organized content into logical groups
Designed clear information architectures by organizing content into clear navigation structures
Iterated IA based on feedbacks
[02] Wireframe
Created wireframes to define layout, information hierarchy, and core user flows.
Standardized visual elements.
Used wireframes to guide visual design and front-end implementation decisions throughout the project.
[03] Front-End Development
Translated wireframes and information architecture into user-friendly interfaces
Implemented reusable UI components and consistent layout patterns across screen sizes
Used Flexbox/Grid and media queries with accessibility-minded structure across breakpoints
[Persona]
Christine
Marketing Manager
Age: 29
Location: New York City
Tech Proficiency: Moderate
Gender: Female
[Goal]
Quickly learn about the organization without interruptions
Access accurate details and a seamless adoption process
Learn about bunny care before adopting
[Frustrations]
Find it difficult to go through adoption process with her limited time
Frustrated when adoption website lack of clear information
Website is not accessible on phone
[Information Architecture]
[Wireframe]
[Final Design]
[Key Learnings]
User-Centered Design is Crucial
Incorporating storytelling and high-quality visuals (e.g., bunny images and personal stories)can fosters emotional bonds, encouraging users to adopt.
Responsive Design Enhances Accessibility
Incorporating storytelling and high-quality visuals (e.g., bunny images and personal stories)can fosters emotional bonds, encouraging users to adopt.
Emotional Connection Drives Engagement
Incorporating storytelling and high-quality visuals (e.g., bunny images and personal stories)can fosters emotional bonds, encouraging users to adopt.
Select this text to see the highlight effect