Timeline

3 months

My Role

Solo student project for Coursera Google UX Design Professional Class

Problem

Individuals want to adopt a pet, but can’t find a website that fulfills all their needs

Whenever people wanted to look for an animal to adopt, they had the issue of finding websites that didn’t look or feel legitimate. They couldn’t trust the site enough to fully invest in bringing a new pet into their lives. Another issues that people faced was, if they did find a site that they trusted, they wouldn’t know until later that an animal they were interested in was already taken.

As someone who doesn’t own any pets but would like to one day, I hadn’t even thought of any of these things before. And if these were some of the major issues, what were some other things I could be missing?

Solution

Access to what they need

Made with you in mind

  • Change accessibility features with ease

  • Have knowledge of when animals are available

  • Filter pets by specific preferences

Research

Finding, planning, and researching for the problem

User Forms & Competitive Audit

To figure out what the problem was that I was trying to solve, I set up a Google Forms page for users to anonymously provide their experience when looking to adopt a new pet. The results provided the three major pain points users were facing.

With step one finished, I completed a competitive audit to get an idea of what other websites were and weren’t doing for their users. The competitive audit focused on three local shelters and three non-local shelters.

The form consisted of personal questions that users had the option of answering. The information provided gave me a great picture of where I needed to go with this project and the pain points that I needed to address. The seven responses were taken from a broad group of both family and friends so that the data could be as diverse as possible for the beginning stages of the project.

From here, pain points were established that allowed me to create How Might We statements, Crazy 8’s, Personas, and Persona Journeys.

How Might We, Crazy 8’s, Personas, & Personas Journey’s

Personas and Persona Journey Map

Design

Basic design and many iterations

With the themes and insights discovered, it was now time to design the pet adoption website. I started with 5 different paper wireframe layouts and chose parts of each that I felt would work best together. Once a rough draft of the paper wireframe was complete, I made a digital version for a desktop, mobile device, and tablet.

I then moved on to a low-fidelity prototype for desktop and mobile versions. Focusing on the basic elements, I created the pages that the user would flow through the website to set up an interview for adoption of a pet. Usability Study #1 was done through UsabilityHub and contributed to the affinity map, themes, and insights that were created. Eight participants of any gender, occupation, and relationship status were recruited through the UsabilityHub website and were able to complete tasks and respond to how they felt each task was for them. The affinity map took participants responses and categorized them into themes. From those themes, insights about the next iteration of designs were nailed down.

Paper and Digital Wireframes

Version 1

  • Home Page

  • Pet Description Page

  • Schedule Interview Blank Page

  • Interview Scheduled Confirmation Page

  • Pet Success Stories Page

  • Schedule Interview Information Page

  • Mobile Home and List of Pets Page

Usability Study 1

Usability Study Script

Affinity Map, Themes, & Insights

Results from Usability Study #1 allowed me to iterate on my designs for both the desktop and mobile versions. Use of typography, iconography, and call to action buttons were just a few things that were added to Version 2 (aka the mockups). Based on the insights, a drop-down menu that includes a link to schedule an interview was added to the menu bar that can be found on all pages of the website. Also, call to action buttons were iterated on to stand out more and make it easier for users to move through the pages.

Once the mockup was completed, I turned that into a high-fidelity prototype, making sure to connect all the pages on both desktop and mobile. The high-fidelity prototype went through a Usability Study from UsabilityHub. Six participants of any gender, occupation, and relationship status gave their thoughts on the look and feel of the prototype for the pet adoption website. From the data collected from these participants, a final iteration of the prototype was completed.

Version 2

  • Mobile Adoption Agreement Page, Schedule Interview Pages, Interview Confirmation Page

  • Home Page

  • List of Pets Page

  • Schedule Interview Blank Page

  • Interview Confirmation Page

  • Success Pet Stories Page

  • Mobile Navigation Page, Home Page, Pet List Page, Pet Description Page

Usability Study 2

Overall Improvement Design

The many iterations that were done taught me a lot about the design process for websites and apps. For this project specifically, I focused on a few major changes to the design from the very first wireframe:

  • The look of the website still needed to be polished and looked too childish. The website was not professional enough and, because of that, users felt as though they couldn’t trust it.

  • The use of colors is very important because the look needs to match with the feel that users want from the websites that they use.

  • Allow users to access anything they need from the home page. For example, if users were confused about where to set up an interview for a pet adoption, a drop-down tab was provided with the page link to that specific feature.

Final Iteration

  • Mobile Pet Description Page, Schedule Interview Page, Confirmation Page

  • Home Page

  • Pet List Page

  • Schedule Interview Page

  • Confirmation Page

  • Mobile Navigation Tab, Home Page, Pet List Page

What I’d do differently next time

This is my second project in a series of three projects for my Coursera UX design course. The more projects that I create, the more I learn about the whole process of UX/UI design. I am immensely grateful that I am able to go through the entire process so that I can see what it’s actually like. I have learned a lot through this course, including these main points:

  1. You won’t be right all the time.

  2. Use the guides! When building the website, I was still learning Adobe XD. I tried to layout items in a way that looked good but once I got to the iteration part, I realized how aggravating it was to change things that weren't lined up well.

  3. Get outside of your comfort zone. I think I could have made a lot of better changes to this website if I wasn't so afraid to do more interviews, or even find people in real life to do video interviews.

  4. Don’t take it personal. I have to remember that I am building an app or a website for all users and that means they aren’t going to like all of the things that I feel are great ideas. It’s not about me; its about the product and the users and my ideas don’t always work for them.

Previous

Career App for Social Good