computer screen logo

Nicole Peery

Front-end web developer known for strong design skills and creative problem solving

Instant Pet Finder

Instant Pet Finder Wireframes

Project Overview


This project was created for the UX Techdegree program at Treehouse.

Instant Pet Finder is an organization that helps shelters connect pet lovers with adoptable pets. My role was to determine the audience and goals for the project and create mid-fidelity wireframes for web and mobile layouts using Adobe XD.

Process


After getting to know the client, their mission, and working to understand their needs for this project, I determined that the audience for this project were pet lovers interested in homing adoptable pets and shelters/rescues who need an easy way to build interest lists.

The main goal of the project was to create a platform for shelters, rescues, and pet lovers to come together on to find homes for adoptable pets.

An additional goal of this project was to provide education and resources for those interested in pet adoption. Information such as the adoption process, spaying and neutering, supply donations, and volunteer opportunities with rescues and shelters.

Instant Pet Finder sketches

I decided to go with mid-fidelity wireframes for this project so the client could test photos of adoptable pets to determine which ones would result in more users signing up.

I chose to use a hamburger menu on the mobile layout because it allows for an organized way to display a larger menu on a smaller screen. Also, it’s a familiar pattern to anyone who’s ever used a mobile device.

I used a home link UI pattern to give users an easy way to get back to the main content of the site without having to click a back button multiple times.

Because this form will likely be connected to a pet matching database with its own data processing algorithms, I chose to use a forgiving format for the form fields. This will reduce user time and frustration when completing the form by allowing them flexibility in the format of information they choose to provide.

I used the persuasive UI pattern of curiosity on the buttons to make users want to learn more about the client’s adoption programs. The phrase “tell me more” leads the user to believe there’s more information on the site, and encourages them to click over to the about page to get the information.

Lessons Learned


I learned about understanding client business goals and aligning design elements and strategies with expected outcomes.

As a pet lover, it was easy for me to have empathy for the user of this website. However, because of this at times I did find myself struggling to remember that I am not the user. In the initial stages of determining the site's goals, I was focused internally.

Thankfully, with feedback and encouragement from a team of designers I was able to re-direct my focus outward and design two wireframes based on client requirements and user needs.

The Result


The final grade I received on this project was exceeds expectations. To obtain the "above and beyond" grade, I:

  • Created an explained an additional project goal.
  • Included the website name and home, about, pets, and login/signup links in the navigation.
  • Provided a wireframe for a desktop design.
  • Included homepage, about, pets, and social icons in the desktop wireframe footer.

Here are some comments from my project reviewer on my work:

"Great use of design elements to add a touch of your own creativity to the navigation bar! The navigation follows popular design trends and patterns that the users would be familiar with."

"Being able to explain why you choose to create a project the way you did will make you a better designer. It is also helpful for the client if they are reviewing your work without you there to explain it in person. Also, great idea to add links to prove your ideas and decisions. This will allow a skeptical client to view the patterns and best practices themselves to see how they will benefit."