A DesignLab project that challenged me to create a responsive website and branding for a dog adoption website.

01. Introduction Millions of animals enter animal shelters every year. Breeders don’t help on this, puppy mills contribute to animal overpopulation, and every time someone purchases a puppy or kitten from a breeder instead of adopting them, it increases the chances of animals being euthanized. Rovermatch wants to change this. They partner with shelters all over the country, to raise awareness and foster the discoverability of pets waiting for a home. They are in need of a responsive website design to cover this purpose. Awareness and discoverability are the primary things Rovermatch wants to address. PROJECT GOALS The goals of this project were to: Define Rovermatch’s branding and visual identity comprising of a logo, color palette, and typography. Launch a responsive website that covers core functionality: search for pets, information about specific pets, and information about Rovermatch and the shelters it partners with. 02. Research OBJECTIVES Understand participants' approach to dog adoption, and what their experience has been like. Identity whether there are any specific considerations participants have, or any aspects they find compelling when looking to adopt a dog. Uncover the strengths and weaknesses of direct and indirect competitors’ websites. Understand pain points and concerns potential adopters encounter through the adoption process. A competitive analysis was performed to understand strengths and weaknesses of existing shelters, and common practices in the dog adoption space.

One on one interviews with potential dog adopters, or those who have experience with dog adoption were conducted to understand attitudes, motivations, and pain points surrounding the dog adoption process.



  • People are often Influenced by friends in terms of which agencies to look at, for advice or information on the adoption process.


  • People want informative descriptions about the dog that include the dog’s story and medical history.


  • People are often unaware about the adoption process specifics, though they may have a rough idea. They would prefer to know what to expect in the processes at the time of application.


  • Some people may be more interested in the breed of the dog, whereas others may be searching based on size, activity level, suitability for first-time dog owners, or connection with the animal. Most people would approach shelters or agency websites by browsing to see what’s available rather than immediately filtering on criteria.


  • Living arrangements, lifestyle, experience, and work schedule are taken into consideration when deciding on a suitable dog.


  • For adoption, people may be less adamant on finding a particular breed because they understand that the selection is based on what is available.


  • Some may prefer or be open to a ‘matchmaking’ system, where the agency does the work to find suitable dogs for them based on their application and adopter profile.


  • Success stories, credibility, and ethical practices of the organization are considered important background information.


  • Some areas of frustration may include uncertainty, lengthiness, lack of flexibility in the process, as well as unanswered questions and poor communication with the adoption organization.


Goals and motivations


  • adopting from a credible organization
  • finding a dog that is a good fit in terms of preference, lifestyle, experience, and connection
  • having access to detailed description and medical history

Pain points


  • dealing with unorganized shelters with poor communication
  • the challenge of finding a dog that was a good match
  • lack of flexibility with timing/schedule
  • lengthy adoption process
  • uncertainty with adoption process
03. Define PERSONA DEVELOPMENT Based on the data gathered, the following persona was created:



An Empathy Map was constructed to visualize user needs and inform product strategy.



A sitemap was constructed to outline the relationship between the content on the Rovermatch website, and to give us an idea of the pages needed on the site.

04. Design WIREFRAMES & LOW FIDELITY PROTOTYPE Based on the site map and research, product prioritization on a list of proposed features were performed prior to the ideation phase. 4 key pages were sketched out before producing the digital wireframes and low fidelity prototype.

Home page, Search, Pet profile page, Shelter page


Responsive wireframes for the Home Page



Rovermatch is all about helping dogs find safe and suitable permanent homes through adoption, advocacy, and education. The following brand attributes were considered when designing Rovermatch’s visual language:


  • Calm and Nurturing
  • Friendly and Approachable
  • Credible and Reliable


For Rovermatch’s visual identity, a simple, clear sans serif font was paired with a logo depicting a dog in a creative way to represent the business while expressing originality.





Branding elements were applied to responsive wireframes to yield a mid-fidelity prototype for testing.

06. Next Steps This project was done within a short time frame, so the focus was mainly on building out the key pages - in particular, the home page and search flow. The next steps would be to build out further pages and capabilities to the InVision prototype and reiterate as needed. In addition, further functionality such as the ability for shelters to sign up and upload information about pets can be built out, along with any additional functionality that research suggests would be valuable to users.

Back to projects