ARK is a non-profit, non-governmental private organization with the aim of forming a network of people who love animals, believe in sharing their lives with them, and who work actively to rescue them from suffering. They help raise awareness and foster the discoverability of pets waiting for a home. Their current main concerns are:
- Current website is not responsive
- Online adoption process needs improvement
- Branding needs to be modernized
To start with the discovery phase, I performed research to understand how the existing animal shelters in Japan operate, identify the demographics of people who are involved in the adopting process, and determine these people's motivations and pain points.
- Out of 56,996,500 household owners across Japan, 12.55% (or 7,152,000 household owners) own a dog, and 9.69% (or 5,524,000 household owners) own a cat.
- For the household owners who don’t own a pet, 20.5% answered that they are thinking of getting a dog, and 15.5% answered that they are thinking of getting a cat.
- When pet owners were asked what their reasons for adopting a dog, top 3 answers were: Helps me de-stress and brings comfort. (35.9%), I had an experience with pets before and want to have one again. (29.2%), I thought it would help with the communication between family (or partners). (16.8%).
- When pet owners were asked what their reasons for adopting a cat, top 3 answers were: Helps me de-stress and brings comfort (31.8%), I had an experience with pets before and want to have one again (29%), I want to enhance my lifestyle (11.5%).
- When non-owners were asked what their reasons for not adopting (dogs) are, the top 3 answers are: It’s difficult when I’m traveling or out of the house for a long time (25.4%), It’s hard to leave them (23.6%), They are banned from my building.(23%).
- When non-owners were asked what their reasons for not adopting (cats) are, the top 3 answers are: They are banned from my building (32.7%), It’s difficult when I’m traveling or out of the house for a long time (22.1%), They are expensive (20%).
- Over the past 30 years, the rate of adoption in Japan has gone down, but the rate of euthanization has also gone down.
- This is because of the enforcement of Welfare and Management of Animals Act in Japan. This law enforces strict management and breeding practices of animals, and when deemed necessary, pets should be returned to animal shelters or respective associations to take custody of the animals.
I compared different animals shelters and pet shops based on their strengths and weaknesses to have an idea about how they go about their adoption processes. I focused on analyzing their UI, UX, User flow, IA and key features.
- Direct Competitors (Animal Shelters):
- Indirect Comepetitors (Pet Shops):
In order to gain qualitative data about users’ goals, needs, frustrations and motivations, I conducted user interviews on users that fit the demographics from market research. I completed interviews from 5 different interview participants. Two are male, and three are female, and fall between ages 24 to 45. Two of the participants have experienced adopting a pet in the past, and three are looking to adopt/buy in the future. Below are some of interesting findings from the interview:
- All participants mentioned that seeing and interacting with the pets is important before deciding to buy.
- For the experienced pet adopters, knowing the health condition of the pet(s) is most important before adopting.
- 3 out of 5 participants mentioned “helping with mental health” (of self or family member) as the reason to adopt.
- All participants thought that the application form of ARK was too long.
After completing the interviews I wrote down all of the responses on sticky notes and began to cluster them based on topic. From the responses, I have discovered their main motivations when going through the adoption process, and also their main concerns when using ARK's current website, especially with the current online adoption process. From these insights, I was able to determine their needs:
Pattern 1: Interaction
"It’s good to see how the pet interacts with other pets, or people - that gives me a clue about the personality of the pet."
Participants mentioned that they would want to meet and interact with pets first before deciding to adopt. Since adoption is a big responsibility, they want to feel safe and be sure that the pet is right for them - and one way is to interact with the pets.
Insight: Physically interacting with the pets helps people know if the pets’ personality matches with them.
Need: People need to interact with pets before deciding to adopt.
Pattern 2: Connection
"I think videos are good because you kinda see how the pet behaves."
Related to the previous pattern, participants think that seeing the pets' images/videos make the participants feel connected to the pets. Everyone also mentioned that having videos is always better, as they can get a clue about their personality through videos.
Insight: People feel like they are more connected with the pets when they see them on pictures/videos.
Need: People need visual representation(images/videos) of the pets.
Pattern 3: Application Form is Too Long
"I feel like you’ll be exhausted just answering the whole form. Basically, it’s too long."
Participants thought that the application form was too long, and felt like the amount of questions were not necessary for an initial phase of adoption. Some even mentioned that they would rather just talk (on phone) directly to the staff, just as to avoid filling out the whole form.
Insight: People think that the current application form of ARK is lengthy.
Need: People need to go through a simple process for the initial phase of adoption.
Pattern 4: Amount of Questions
"I think they should just put the most necessary information and ask the most important questions, then just have an interview if they think the applicant is a good match."
Related to the previous pattern, participants think that the current form has a lot of unnecessary questions for the initial phase of application, making the form longer.
Insight: People think that the current application form of ARK has a lot of unnecessary optional questions.
Need: People need questions that they feel are necessary for the initial phase of adoption.
Based on all of the gathered information, and responses from the interview participants, I created a persona that represents ARK's key audience segment.
After gaining insight on Anne's needs and frustrations, I created the POV statements that would allow me to empathize with her and focus on her, giving me the right framing on defining our problem statement. From these POVs I created HMW questions, which directly address Anne's needs, to help with brainstorming ideas.
Combining business goals from the design brief and user goals from the research, I created a diagram that represents the project goals necessary to identify necessary features to include on the website.
After generating ideas from our HMW questions. I created a feature roadmap that ranked website features by priority mainly based on business goals, competitors, and primary research.
Building from the product goals, and feature roadmap, I created a sitemap that included proposed pages to help visualize the structure of the website.
I generated complex scenarios that Anne could encounter in the website. This process ensures that all pages and features needed to complete the main task are accounted for, allowing a smooth flow to help Anne achieve her goals.
Before going digital, I sketched out the website's main pages for fulfilling the tasks in our task/user flow. The “sketch first, digital later” is a less overwhelming approach that allowed me to easily iterate on early designs, focusing on addressing Anne's goals, before taking it to digital wireframing.
Homepage
Adopt a Pet
Adopt a Cat
Pet Details
Adoption Form
Confirmation Page
After sketches have been finalized, I created mid fidelity wireframes to be used for a prototype that allows us to test the effectiveness of visual hierarchy, navigation, and general flow of the website before implementing more details, such as font and colors. Key pages are as follows:
Homepage
The hero section includes a short description of what ARK does, an emphasized "Adoption" CTA, and a less prominent "Donate" CTA beside it. Below the hero section are sections that promote adoption in different forms (dog or cat selection, and a list of pets that are in need of a new home - because of age, and other conditions). The last section provides event dates where prospective adopters can meet ARK's pets.
.png)
Adopt a Pet
Adopt a Pet section aims to give general information about adopting pets. It includes a simplified adoption process section, and information about fees that will be needed for the adoption. The last section is a "Contact Us" section where people can ask ARK directly about concerns that were not included in the page. This will help adopters get all the information they need about adoption in one page.
Pet Details
Pet details page puts emphasis on the image/videos of the pet. Basic information about the pet are included, and below that are the personality and health history. Just above the footer is a section where users can review adoption guidelines, and a quick "Contact Us" button to help whenever users encounter issues in the process.
Adoption Form
Last but not the least is the application form. Here, the page includes the picture and basic information of the pet which are visible throughout the whole process of filling out the form; this gives users proper feedback, and as we have realized from the user interviews, this will help users become motivated to move forward with the adoption. The form itself, instead of having everything displayed in a long scrollable page, has questions separated based on different categories. These categories also serve as "steps" in the included progress bar to give users feedback on where they are in the form; this also helps users stay motivated in filling out the form. The questions included in this form are based on the questions that most commonly appeared in the forms of other competitors (and ARK included).
Responsive design ensures a better user experience. I created responsive wireframes to account for the different devices a user may use to access the website—desktop, tablet, and mobile.
In order to test the overall quality and ease of navigation throughout the whole design, and to observe areas of errors/difficulties, I went out and had 5 peopl (3 male, 2 female) interact with my prototype. Participants were based on the demographics from research phase (ages 20 - 60) and people who have experience adopting a pet or are planning to adopt a pet.
The users were given the following scenarios and tasks to complete:
Scenario 1: You want to look for a cat that is older than 7 years, and check their personality and medical history.
- Task: Browse for a cat older than 7 years, and check its profile.
Scenario 2: After successfully finding the specific cat, you have decided to adopt and continue to fill out the online adoption application form for the cat.
- Task: Proceed to adopt the cat, and fill out the adoption application form.
Summary of findings from 5 participants (3 male, 2 female):
- Completion Rate: 100%
- Error-free Rate: 94%
- All participants generally had no major issues with performing the tasks and completing goals.
- Participants who have experience using the ARK website mentioned that the re-designed application form was better.
- All participants gave feedback about the UI, as being "easy to use", and "straightforward".
I created an affinity map to organize and synthesize the responses and observations I captured using testing. After grouping similar concerns/topics, I uncovered insights, and formed specific solutions for each:
Pattern 1: Copy
"I think that some of the sentences (copy) are confusing and are not clear about what are being described."
Insight: Participants think that some of the copy of the website was unclear/confusing.
Solution: Re-write the copy to match the tone and main objective of the section to avoid confusion.
Pattern 2: Information Simplification
"For some information, maybe you can make it easier to look at - like the gender put the gender symbols instead of text, because it looks a bit cramped especially when it's in a card."
Insight: Participants think that too much text makes it hard to process information fast.
Solution: Simplify the presentation of some data/information like using bullet points, icons, etc.
Pattern 3: Button Position
"I would want to place the ("Adopt Me!") button here (below the basic information) since it will be more visible on that spot. I almost missed it because I was too focused on the images."
Insight: Participants think that the “Adopt Me!” button could be placed in a better position on the page.
Solution: Place the “Adopt Me!” button on a more prominent position on the page.
After gaining insight from the usability testing, and prioritizing recommendations, I tweaked our mid fidelity wireframes to reflect the solutions.
Update 1: Copy (mostly on headers) were re-worded to match the tone of the whole website while being clear about its goal:
Update 2: Some text were replaced by icons just like the pet cards shown:
Update 3: "Adopt Me!" button which was previously below the image gallery was moved to a more visible area.
Before starting with the creation of high fidelity wireframes, I made sure that branding was clearly defined for a consistent visual identity for the whole project. ARK's main brand attributes are: Friendly, Warm, Adorable, Modern. I gathered pins in pinterest that suit ARK's brand attributes.
Focusing on ARK's brand attributes, Friendly, Warm, Adorable, Modern, I played around with different sketches while checking the existing logo of ARK. After spending a couple of hours, I moved to Adobe Illustrator, chose 3 styles that I like best and vectorized them, ending up with one that best represents ARK's brand.
To have a collection of visual elements for consistency, I used elements (components, color styles, and text styles that I defined in Figma) and put all in one page that makes up the UI Kit.
Using the UI Kit and occasionally referring to the mood board and style tile, I applied the visual elements to the modified Mid Fidelity wireframes making up the High Fidelity wireframes which will be later on used for the Prototype.
Homepage (Old)
Homepage (New)
Pet Details Page (Old)
Pet Details Page (New)
Adopt Page (Old)
Adopt Page (New)
Adopt a Cat (Old)
Adopt a Cat (New)
Adoption Form (Old)
It's actually longer than this. This is just 1/4 of the whole form.
Adoption Form (New)
.png)
.png)
