OVERVIEW
OVERVIEW
Happy Hopper is a bunny adoption website that helps bunny finds their forever home. This project combines thoughtful UI/UX design with front-end development, focusing on responsive layouts, intuitive navigation, and consistent visual alignment across devices.
Happy Hopper is a bunny adoption website that helps bunny finds their forever home. This project combines thoughtful UI/UX design with front-end development, focusing on responsive layouts, intuitive navigation, and consistent visual alignment across devices.
MY ROLE/ DURATION
MY ROLE/ DURATION
UX/ UI Designer
Front-End Developer
August 2024 (5 weeks)
UX/ UI Designer
Front-End Developer
August 2024 (5 weeks)
TOOLS
TOOLS
Figma
Visual Studio Code 2
Figma
Visual Studio Code 2
METHODS
METHODS
User Persona
Information Architecture
HTML & CSS
Wireframe & Prototype
User Persona
Information Architecture
HTML & CSS
Wireframe & Prototype
PROJECT GOALS
PROJECT GOALS
The project aims to enhance user experience by creating an intuitive interface with effective visual hierarchy and card layouts, foster emotional engagement through storytelling and media, and ensure seamless responsiveness across all devices for an optimized browsing experience.
The project aims to enhance user experience by creating an intuitive interface with effective visual hierarchy and card layouts, foster emotional engagement through storytelling and media, and ensure seamless responsiveness across all devices for an optimized browsing experience.
Enhance User Experience
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
Enhance User Experience
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
Emotional Engagement
Emotional Engagement
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.
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.
Responsive Design
Responsive Design
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.
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.
USER PERSONAS
By creating user personas, I was able to understand real-world users' needs, goals, and challenges, which helped me create more tailored and effective design.
USER PERSONAS
By creating user personas, I was able to understand real-world users' needs, goals, and challenges, which helped me create more tailored and effective design.
SOLUTIONS
Increase the visibility of hidden functions by integrating it into the main dashboard.
Include a calendar interface for selecting specific dates and time slots.
Provide the ability to sort out messages such as unread, read, group chats, individuals.
Introduce announcement setting: start and end date, edit or delete announcement.
INFORMATION ARCHITECTURE
In order to build a website, I would need to develop a clear information architecture. This involves organizing and structuring the content so that users can easily navigate and find the information they need. By defining the hierarchy, labeling, and relationships between content, I ensure that the website provides a seamless and intuitive experience.
INFORMATION ARCHITECTURE
In order to build a website, I would need to develop a clear information architecture. This involves organizing and structuring the content so that users can easily navigate and find the information they need. By defining the hierarchy, labeling, and relationships between content, I ensure that the website provides a seamless and intuitive experience.
WIREFRAME
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN View Code in Github
FINAL DESIGN
CHALLENGES
CHALLENGES
Maintaining Consistent Layout Across Devices
Maintaining Consistent Layout Across Devices
Ensuring that elements like the filter options, bunny cards, and forms are visually aligned and functional across various screen sizes required significant design adjustments.
Ensuring that elements like the filter options, bunny cards, and forms are visually aligned and functional across various screen sizes required significant design adjustments.
Learning HTML & CSS
Learning HTML & CSS
Making sure there’s no bugs and repetition throughout was difficult with limited time.
Making sure there’s no bugs and repetition throughout was difficult with limited time.
Balancing Information and Simplicity
Balancing Information and Simplicity
Providing detailed bunny information without overwhelming the user, especially on smaller screens, was a key challenge in maintaining a clean and user-friendly design.
Providing detailed bunny information without overwhelming the user, especially on smaller screens, was a key challenge in maintaining a clean and user-friendly design.
KEY LEARNINGS
KEY LEARNINGS
User-Centered Design is Crucial
User-Centered Design is Crucial
Designing with the end user in mind ensures the website is intuitive and engaging, improving adoption rates by making the search and application process smoother.
Designing with the end user in mind ensures the website is intuitive and engaging, improving adoption rates by making the search and application process smoother.
Responsive Design Enhances Accessibility
Responsive Design Enhances Accessibility
Ensuring that the website adapts well across devices, particularly mobile, significantly improves user engagement and ease of navigation.
Ensuring that the website adapts well across devices, particularly mobile, significantly improves user engagement and ease of navigation.
Emotional Connection Drives Engagement
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.
Incorporating storytelling and high-quality visuals (e.g., bunny images and personal stories)can fosters emotional bonds, encouraging users to adopt.