top of page


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.

H&B HeroImage.jpg

Final Landing Page on Desktop and Mobile

My Role

UX Design, UI Design, User Reasearch

Website Build (Wix Editor)

Team Members

Ari Kushmirak




~3 weeks


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.


To better understand the problems current users are facing with the website, we decided to conduct primary research surveying actual users of the 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

Screen Shot 2021-11-02 at 3.41.59 PM.png

Original Website Content

“We commonly get a lot of emails asking about information that's already clearly listed on the website.”

— Hearts & Bones Staff


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.

Screen Shot 2021-11-02 at 4.33.39 PM.png

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


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.


Based on our research, we created personas to represent the 4 main groups of users with their needs and goals.


Smiling Portrait


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.



  • Wants find a dog suitable for a family with small kids

  • Find information on the adoption process


  • A lot of animal rescues have very long and confusing instructions for the adoption process

  • Not able to see what dogs are adoptable


Young Businesswoman


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.


  • Find a dog rescue in New York that does not require her to take care of the dogs

  • Find different volunteer opportunities



  • Hard to find volunteering positions that don’t require prior experience


Portrait of a Man


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.


  • Find information on how to foster dogs
  • Find an animal rescue that constantly needs fosters


  • Worried about the complicated process


Happy Man


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.


  • Find ways to contribute to Hearts & Bones without having to spend much spare time



  • Find most non-profit websites very hard to navigate



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


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.

H&B LofiWirefram

Lo-fi Wireframe


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.

Link to prototype

H&B MidfiWireframe



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.

H&B DesktopCompile.jpg

Desktop Version Designs


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.

H&B Mobile

Mobile Version Design


Style Guide.jpg

Style Guide


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

H&B HeroImage.jpg

Final Designs

bottom of page