Kazarina Liao Portfolio

Back

[Case 03]

Happy Hoppers

Non-profit Responsive Website

Adoption made simple and accessible

[Project Overview]

Happy Hoppers 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.

[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

VIew in Github

[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

[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

[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.

[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.

[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

[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

[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]