/ WEB DESIGN
HEARTS & BONES
Hearts & Bones is a non-profit dog rescue organization based in Dallas, TX and New York City. As part of the Wix Playground team, I worked on a project to rebuild the website for Hearts & Bones.
Final Landing Page on Desktop and Mobile
My Role
UX Design, UI Design, User Reasearch
Website Build (Wix Editor)
Team Members
Ari Kushmirak
Deliverables
Website
Duration
~3 weeks
PROBLEM
Hearts & Bones was receiving numerous feedback on the poor experience of using their website to navigate information. As a non-profit organization, Hearts & Bones have an extensive amount of information that needs to be stated on their website for different users of this platform.
Research
To better understand the problems current users are facing with the website, we decided to conduct primary research surveying actual users of the website.
ORIGINAL WEBSITE
We did some internal research with the staff from Hearts & Bones and devised a list of problems they've realised users were facing with the website. We also analysed the structure and content of the original website to try and figure out how to organize the information in a more effective way.
Original Landing Page
Original Website Content
“We commonly get a lot of emails asking about information that's already clearly listed on the website.”
— Hearts & Bones Staff
PRELIMINARY SURVEY
We did some user research at one of Hearts & Bones’ adoption events with users from the 4 main groups: Adopters, Volunteers, Fosters and Donors, to find out more about their basic user behaviours and general goals when visiting Hearts & Bones’ website.
Basic Statistics of Surveyed Users
“The information is very scattered. I have to really try and find the things I'm looking for sometimes.”
— Potential Adoptor
“It took me a while to figure out the process of adoption and even after that I'm not so sure if what I got was correct.”
— Potential Adoptor
INSIGHTS
From our survey and short interviews with the staff and users of the website, we summarized the most common needs and goals of them.
Users want the information to be more organized and structured.
Users want better user flow that clearly indicates the process.
Users want to focus on the information they need to know and worry about additional information later.
Users want to be able to access the website on a mobile as fluidly as they would on a desktop.
PERSONAS
Based on our research, we created personas to represent the 4 main groups of users with their needs and goals.
THE ADOPTER
LISA
Age: 41
Occupation: Full-time mom
Family: Husband and 2 kids
Pets: No pets
Lisa is a full-time mom living with her husband and 2 kids in New Jersey. Her two kids are now both in elementary school they want to adopt a dog as a new family member. This is the first time Lisa and her family is adopting a pet, so Lisa want to find a reputable and low fuss adopting centre.
GOALS
-
Wants find a dog suitable for a family with small kids
-
Find information on the adoption process
FRUSTRATIONS
-
A lot of animal rescues have very long and confusing instructions for the adoption process
-
Not able to see what dogs are adoptable
THE VOLUNTEER
GABRIEL
Age: 19
Occupation: College Student
Family: Live with 2 roommates
Pets: No pets
Gabriel is a sophomore studying at Columbia University. Gabriel loves dogs, but she lives with 2 other roommates in a small apartment in Harlem that does not allow pets. She does not have any experience owning or adopting pets other than hamsters and fish.
GOALS
-
Find a dog rescue in New York that does not require her to take care of the dogs
-
Find different volunteer opportunities
FRUSTRATIONS
-
Hard to find volunteering positions that don’t require prior experience
THE FOSTER
MATTY
Age: 28
Occupation: Freelance writer
Family: Lives alone
Pets: One dog
Matty is a freelance writer living in Brooklyn with his dog Chi Chi. Matty works from home most of the time and wants to use his spare time to help foster dogs that are waiting for adoption. Matty has experience taking care of pets for friends and family but does not have experience fostering.
GOALS
- Find information on how to foster dogs
- Find an animal rescue that constantly needs fosters
FRUSTRATIONS
-
Worried about the complicated process
THE DONER
SAMUEL
Age: 36
Occupation: Architect
Family: Lives with his wife
Pets: 1 dog
Samuel is a xxx and he lives in New York with his wife. Samuel has previously adopted his dog from Hearts & Bones and loved the adoption experience. He and his wife currently don't have time to take care of a new dog or to volunteer, but still wants to find ways to contribute to the organization.
GOALS
-
Find ways to contribute to Hearts & Bones without having to spend much spare time
FRUSTRATIONS
-
Find most non-profit websites very hard to navigate
Ideation
INFORMATION ARCHITECTURE
We’ve rearranged the website structure so the menu show where different user groups would navigate to. To create a more fluid user flow, pages in the same category are compiled onto a single page so users don’t have to keep referring back to the menu and being redirected to a new page.
Information Architecture
LO-FI WIREFRAME
We sketched out multiple lo-fi wireframes of the pages that have most dynamic contents to test out how to restructure the informations and flow so users won't constantly feel confused and overwhelmed. We've decided create a main page for each user group that introduces the general flow, so users get a better sense of the overall scope of each process.
For steps that require more explanation, we complied all of the additional information in each flow onto one continuous page. This way users who wish to read more into the details could find all the information they need on one single page without having to navigate back and forth to find them.
Lo-fi Wireframe
MID-FI WIREFRAME PROTOTYPE
After settling down on the overall layout of the website, we went on to create a mid-fi wireframe of all the pages as well as a protype.
The use of spaces and large images helps to break up long pieces of information and make the overall UI of the website more reader-friendly. Information is easier to view and process back and forth. CTA buttons that lead to the applications page are also included at the top and bottom of each page for a clearer purpose.
Prototype
Design
The final layout is kept simple as the photos are meant to be changed regularly featuring new adoptable dogs all the time, so choosing a layout that’s interchangeable with any photo composition was crucial.
Desktop Version Designs
MOBILE VERSION
We kept in mind the mobile users take up a huge percentage of Hearts & Bones’ demographic, so we implicated the desktop design into a mobile version as well.
Mobile Version Design
STYLE GUIDE
Style Guide
FINAL WEBSITE
As a part of the Wix Design Academy, we built the final website with the Wix Editor.
View the final live website here
Note: The website is updated by Hearts & Bones staff after completion of this project. Therefore, current website might vary from the designs shown in this presentation
