UX / UI Designer • UX Researcher • Digital Design
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.
​
​
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
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."
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."
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 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.
​
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
Design
​
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
​
​
​
​
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.
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.
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.
​
​
​
Desktop Wireframes
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.
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.
​
​
​
Mobile Wireframes
Desktop Wireframes
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
​