top of page

FETCH

A Responsive Pet Information Website

A ONE STOP SHOP FOR ALL
THINGS FURRY, CLAWED AND MORE!

Our team was assigned with the task of creating a responsive website for a niche market in the health care industry. After some brainstorming and mind mapping, it was concluded that a website focused on general pet health similar to a WebMD would be a great tool for all kinds of pet owners.

MAKE UP OF TEAM

Rose Ayala (Scrum Master)

Samantha Bonnet

Julie Barmotina

Stephan Chen (Web Development)

Amelia Zecker (Web Development)

Charles Korpics (Web Development)

TOOLS

  • Figma

  • Sketch

  • inVision

  • React

METHODS USED

  • Screener Survey

  • Initial User Interviews

  • Affinity Mapping

  • MoSCoW Mapping

  • Paper Prototyping

  • Mid-Fi Prototyping

  • Hi-Fi Prototyping

  • Usability Testing

Research

SCREENER SURVEY AND INTERVIEWS

At the discovery phase of our project, we conducted user interviews in order to get a better understanding of the health-related problems pet owners face on a regular basis. Approximately 27 individuals answered our screener survey and 8 were chosen for interviews based on eligibility. However, one initial insight that could be highlighted from the screener was that while the majority of pet owners preferred veterinary care over holistic care, the chances of the owner taking their pet to the vet were highly dependent on the severity of the illness.

Taking that into account, we proceeded with the interviewing process.
With our series of questions, our main objectives were to discover:

  • How users found their pet

  • If there was initial learning done in preparation before obtaining their pet

  • The owner's most recent experience having a sick pet 

  • What steps they had taken when they realized their pet was sick

  • Their accessibility to veterinarians

  • Thoughts on vet bill costs

  • Alternative ways pet owners sought animal care advice

During the interviews, we were able to gather that while the majority of the group only took their pet to the vet when it was sick (as opposed to taking it in for preventive care), the rate could be interpreted to be approximately 1 to 2 times a year, which is the recommended frequency for routine check-ups. However, all 8 had expressed frustrations over the cost of veterinary care and lack of access to reliable information about their pet, usually seeking out answer forums on Google.

Research
Image from iOS copy 2.jpg

AFFINITY MAP

 Having gathered all our key points from our interviews, we moved onto creating an affinity map in order to highlight the main themes that were trending across all 8 interviews.

We knew that this would ultimately shed light  onto what key features and proponents will be included in the website, so it was important for us to sort out any outliers that would distract from our ultimate MVP.

OUR KEY INSIGHTS

money.png

Expensive Costs

Though all interviewees expressed that they would take a pet to the vet in the case of serious illness, it was unanimous that vet costs were a struggle to pay, hence why vet visits were isolated for emergencies and vaccines only.


"I take her to the vet if I need to, but those vet bills can get crazy."

group.png

Community

Majority of participants shared that they relied on advice and information from other pet owners within their community or online in order to prepare themselves as pet owners.

"I go to the dog park a lot and the owners there usually have tons of advice."

search.png

Online References

Majority of interviewees shared that their first impulse whenever their pet seems to be ill was to check the internet for matching symptoms or home-made remedies

"The second I see something weird going on with my cat, I jump right onto Google."

vet-with-cat.png

Vet Approved

While our participants did trust the word of their friends and pet-owning peers when it came to pet-care, vet-approved or vet screened information was more likely to be trusted than seen otherwise.

"Of course, I need to trust what a vet has to say. They're the professional."

PERSONA

Based on our insights from our user interviews, we created a primary persona, Serena. We created her to be a young dog owner in her mid-20's whose main goal is to provide the best care for her new dog Luna. While she reads a lot online to ensure she knows what she is doing, she worries about accidents that may or may not require veterinary care as the bills can be extremely expensive, especially for a non-emergency.

U2E1_PERSONA.png

JOURNEY MAP

For Serena's journey map, we illustrated a scenario based on story-telling from a number of our interviews.

In this particular scenario, she:

1)   Comes home to find Luna eating facial cleanser and immediately panics thinking it may be poisonous

2)  Attempts to call to the vet clinic, but is alarmed to find out that the clinic is closed

3)  Calls an emergency pet line, but is frustrated from being forced to be screened through an automated system

4)   Attempts to find a solution online, though is unsure of what to google since her situation is so specific

5)   Finds an answer on a random forum and is relieved to find a solution

6)   Administers care to her dog and is relieved to know that it is okay. However, she is still unsure of whether or not a visit to the vet would be necessary

journey map.png

Design 

synthesize lofi wireframe.png

The team held a design studio and sketched ideas for our site’s layout and features. We referred to our MoSCoW map to come up with our MVP focusing on search filter options, articles and forum capabilities.

We created paper sketches for both mobile and desktop and then, contrasted and compared our unique designs, highlighting features we wanted to include before synthesizing it into one pivotal design.

 

​W

1_-vjY1o9vkCk8j-MeeBi_VQ.png

M.o.S.C.o.W MAP

Based on Serena's needs and wants, we compiled
a list of desired features for the website that would be effective in solving her problem. From there, we
re-organized the list within a MoSCoW map in order to prioritize which features would be the most important for our MVP and which can be pushed for future iterations.

Ultimately, we decided that including vet approved articles and advice, search functions and  user-generated forums would be in the MVP based on
high user impact.

Design
1_c5r3Oq9eCWCkTieuV4U1Pg.jpeg

REFINING WEBSITE CAPABILITIES

At this point, we began to discuss smaller features we believed
would be useful in terms of usability and general user delight

Capabilities such as a featured article carousel, the inclusion of tags for searchability and a "Pet of the Month" show-case to reflect user enthusiasm for their pets were just a few that were considered.

iphone-png-transparent-10.png

MID-FIDELITY WIREFRAMES

After finalizing our design on paper, we then moved on to creating mid-fidelity

wireframes. We knew that we wanted the most pivotal features to be shared between desktop and mobile designs and for the aesthetic of the site to feel intact between screens.

While we included a collapsible menu for animal search under the "Article" nav selection on the mobile screen, we expanded this into a full search filter checklist on the desktop version.

We also expanded the desktop version to include a scrolling showcase of popular tags on forums and articles and popular forum groups.

Seeing as our main focus was to create a flow between the home page, article pages, and forum, we created a simple user flow map to keep track of the current architecture of the site as we have designed it thus far.

user flow chart.png
Artboard fetch midfi mobile .png

Desktop Wireframes

Artboard midfi desktop fetch.png

Mobile Wireframes

When we finished designing our wireframes, we ran it through 6 rounds of usability testing. We gave our users 2 key tasks:

  • As someone who is contemplating owning a rabbit, find a "Bunny" related article that will help inform your decision

  • Your dog has swallowed facial cleanser and you don't know what to do. Make a forum post asking the Fetch community for help
     

MID - FI POST - TEST SURVEY

SUCCESS

6/6 users were successful in completing the assigned tasks

5/6 users graded the test as a 1 (very easy) on the difficulty scale
mobile only*

MINOR ISSUE

Usability Findings


2/6 users were confused as to where to type in information due to the search field looking like a page title.

Proposed Solution


Explore other coloring options to communicate to the user that it is the input field.

midfi 4.png

HIGH FIDELITY PROTOTYPE

When we moved on to high fidelity wireframes, we decided to address some of the issues reflected in our usability test results by differentiating article links and forum posts by color, with articles being displayed in blue and forum related links and buttons being displayed in aqua green.

Due to the intended health-related nature of the site, we choose an overall cool color scheme which is usually commonplace among medical websites. However, due to the focus being pet health, we wanted to add a fun youthfulness to the site, hence why we included cartoon graphics on the logo and a welcome card.

iphone-png-transparent-10.png

Mobile Wireframes

Artboard hifi mobile fetch.png

Desktop Wireframes

Artboard hifi desktop.png
HOME.jpg

REDESIGN AND DEVELOPMENT

After our second iteration, we teamed up with a development team of 3 to discuss the possibility of website development for Fetch. We had agreed and decided to run a second design studio including the development team in the process, simplifying the desktop and mobile designs, balancing user needs with the building capabilities of the development team.

The design team decided to pull a full overhaul of the website's aesthetic design, using circles and pops of bright orange to reflect a fun and youthful appeal to the website. We also altered the animal search filter from a checklist to visual links using colorful animal imagery to further appeal to users and add to their delight.

Within the time frame of a week, the development team was able to recreate the website with limited functionality, including newsletter confirmations, a functioning search bar, and forum posting.

Click Here to View Functional Prototype

We hope in the future to continue to add and 
refine this design and bring it to full development.

NEXT STEPS

While the total length of this project was approximately 3 weeks in total, we were mindful of the additional features and tests needed in order to truly enhance this website to its most optimal version.
For our next steps, we wish to:​

  • Refine new design

  • Conduct usability testing for both mobile and desktop screens

  • Do additional research in order to add a veterinarian insurance search feature 

  • Interview veterinarians in order to design a portal for them to interact with users

 

LIKE WHAT YOU SEE? LET'S CHAT!

646-546-8664

Thanks for submitting!

bottom of page