OVERVIEW →
Reshaping Information Architecture to facilitate the application experience and easily get resources.
Hearts & Bones Rescue is a 501(c)(3) non-profit foster-based rescue with dual bases in New York City, NY, and Dallas, TX. Their goal is to bring people together across the country to save the lives of dogs in need and unite loving forever families. The new website is designed to provide valuable information such as adoption, foster, foster-to-adopt, volunteering, and events for different audiences to make better access for involving the organization and communities with the value that people want to help the lives of dogs. For this project, my role was to design all the pages with a new UI design system, with a focus on creating a cohesive look and feel that aligned with the organization's mission and branding guidelines. I also communicated with the internal marketing team during the project so that I had feedback on the overall design and prototype.
Project Goal →
Redesign the website with new navigations to help provide information for each user group and align the website identity with the new brand guideline.
The goal of this project is to rebuild the structure of the website that would enable each user group to easily find adoption, foster, and volunteering opportunities. The website includes features such as FAQs, application forms, and resources to assist users in getting clear information that they would like to know. It also has to be easy to use, visually appealing, and consistent with the brand image of the organization.
THE CHALLENGE →
The website is the main platform to apply for opportunities of various programs, but it’s challenging to use it.
Potential adopters, fosters, and volunteers are all important for the organization to achieve its mission with the community together. It makes it hard for them to take extra steps to get resources and apply for opportunities. It eventually causes users to be intimidated into getting involved to save the lives of dogs.
THE SOLUTION →
Minimizing steps for applications and providing available resources they need to make a decision for applying.
The solution is to reshape the overall website structure for different users so that they can take fewer steps to get the information or resources they need for getting involved with the organization or applying for adoption or foster programs. Ultimately, it is to redesign websites for better user experiences and the transparency of the organization.
INSPECT CURRENT WEBSITE →
The major problem with the current website is difficult to navigate each page and obscures application information.
In terms of redesigning the website, it was crucial to take time to observe the current website, which provides direct and critical challenges. As below, we identified major issues that we would first focus on when developing a new website for a better user experience.
USER RESEARCH →
Sorting and grouping cards for each need were able to give some insights into what resource has to be focused on on each key page for 3 different user groups.
As we identified in the goal and challenges, the organization has three major user groups for the website: adopters, fosters, and volunteers, but the current website has lots of room for improvement when it comes to information hierarchy for each target user group.
Since each group has a different purpose for visiting the website, I conducted user interviews with people who had experience with dog adoption, foster, or volunteering. Next, I sorted needs by each user group and defined the points that helped process further market research.
To better understand the landscape of animal rescue organizations, market research was conducted regarding other organizations that have similar target users and locations to Hearts and Bones Animal Rescue. Through this research, I was able to find out what we can bring to our website and how we can improve each page.
IA & DESIGN GUIDELINE →
Information architecture and design guidelines boost the productivity of managing entire wireframes.
Based on research and observation of the current website and research, I created a sitemap with some notable changes in the navigation including:
Divided "join us" tab into “Foster” and “Volunteer” pages as target users that were grouped to distinguish different needs.
Added “volunteer behind the scenes” to give more information regarding it.
Merged “Resources” pages into one single page with anchor points helping navigate a page.
Information Architecture
Design Guideline is crucial for consistency
SKETCHING & WIREFRAMING →
Visualizing insights through sketching and wireframing to find the best design solution.
After identifying design guidelines, I iterated over entire wireframes from sketch to low-fidelity, to high-fidelity and prototypes to efficiently communicate with the team and reflect feedback. One of the things that we focused on was making a consistent brand story and improving usability on mobile devices, as more than 50% of target users are using their phones to get information from the organization's website.
To consistent experience across all devices, It is crucial to create wireframes for desktop version and mobile version.
FINAL PRODUCT →
1. Landing Page : show the way how to engage with users
The landing page provides a comprehensive overview of overall website content, such as adopt, foster, volunteer, and donate. By adding visually appealing icons and layouts, users can easily understand the value that Hears and Bones Animal Rescue has.
2. Adoption Page : Users can easily find what they need for adoption process
Features, including an application for adoption and an adoptable dog list, are easy to use and organized for potential adopters. Adoption FAQs are available on the same page so that users can get the details of information regarding adoption right away instead of asking the organization.
3. Foster Page : Adding CTA and FAQs helps improve foster application
To encourage participation, we added a CTA button for applying for fostering at the top and brief FAQs that most potential fosters might ask. We also included some testimonials pitched by current fosters and resources that give users a better understanding of fostering.
4. Volunteering Page : Show the collection of various ways to participate in volunteering
For the core values of openness and inclusiveness, it is important to share volunteer methods and up-to-date information for users to be able to be involved in the organization.
Conclusion
We have completed the redesign of the website for Heart and Bones Animal Rescue by the deadline that we originally set. The launch of the new website was a great success, receiving 13,000+ page views within the first week. Building the design guideline when working on wireframes and prototypes was one way to boost iterating the entire layout, resulting in a reduction of design time.
Following the initial launch, we continued to optimize pages for ongoing improvements to the user experience. One of things that we want to update is “Dog profile”
🐶 Dog profile : Add details of the dog profile to the adoptable dog list! For example, adding a quick preview of information such as age groups, sex, size groups, and breed so that potential adopters don’t need to click each profile of the dog.
See More Of My Work:
Hudson Market Website
Food&Beverage • UX/UI Design • Catering Order Feature
Redesigning Website & Branding Design with catering ordering feature online for customers and better experience.
VI Group Website
B2B • Web Design • End-to-End • Marketing
Responsive Website Design for Vi Group helps the users get information about the company and their portfolios.