Product Overview

I designed a responsive pet veterinarian website to help pet owners find local vets, update pet records, and make quick purchases—all in one place for easier pet care management.

My Role: User Experience Research, Visual & Interaction Designer

Responsibilities: User Research, Usability Testing, Wireframing, Mockup and Prototyping

Softwares & Tools Adobe XD, Illustrator, Photoshop

Project Duration: November 2022 - January 2023

About Details

The Problem

In my survey, users described their pet veterinarian experience as frustrating due to constant paper or digital form filling, especially when changing vets. They also struggled to find clinics that accept their pet insurance and face time-consuming shopping for pet products.

The Goal

My veterinarian website will let users find, schedule appointments, log information, and shop products all from one platform which will affect Users who are tired of jumping from one facility to another to find the proper care for their pets by skipping lines, quick appointments nearby, not having to fill out information and shop products from one place. We will measure effectiveness by tracking user registrations and website interaction data.

Target Audience

BravePets is designed for pet lovers, whether you're an existing pet owner, considering adopting, or helping a loved one care for their pet. For current owners, we simplify managing vet visits, tracking medical records, and finding trusted clinics without the hassle of multiple registrations. If you're thinking about getting a pet, we provide resources, clinic options, and product recommendations to help you prepare. And if you're supporting a friend or family member, our platform makes it easy to find reputable vets and quality pet products. With an intuitive pet profile system, seamless clinic access, and a curated online store, we make pet care easy and stress-free for everyone.

Painpoints and Challenges

People find it hard to fill-up forms all the time.
Finding trusting veterinarians can be a hard process.
Finding pet product and medicine is hard and can be frustrating for users.
Low confidence can hurt users and can deter them from visiting again.

Inital Solutions

So moving forward the design will implement pet profiles where users can enter or edit pet info or upload docs.
Moving forward I want to design a way for users to find local vet practice around them that the site approves.
When designing I want users to be able order/purchase whatever they need from the site in a easy checkout process.
I want to build user confidence by letting the users complete their whole journey in one place hence building a one stop easy process.

User Research Overview

For this research, I started by conducting simple surveys with pet owners to identify potential users. I then used a more moderated user research approach, asking participants a series of questions to understand their experiences with veterinarians. Based on these insights, I created personas and mapped out the user journey.

From the survey, I initially discovered that users disliked filling out forms. However, after further design iterations and usability testing, I learned that users could benefit from having pet profiles that include forms, medical records, and other relevant information. Additionally, they would appreciate a way to easily find local vets and buy pet products that are insurance-approved, if applicable.

In this process, I applied several UX principles to enhance the design:

Law of Continuity: I kept the design flow smooth and consistent, making sure related information, like medical records and forms, were organized logically to avoid user confusion.
Color Theory: I used warm color, like orange, to grab attention and create a sense of confidence, particularly around specific areas and important features.
Visual Hierarchy: I carefully structured the layout to prioritize important information, using size, contrast, and header placement to guide users through the website with ease.
WCAG Guidelines: I ensured the website followed accessibility standards, including high color contrast and alternative text for images, to make it usable for all.

By integrating these principles, the platform is designed to be intuitive and user-friendly, creating a seamless experience for pet owners.

Competitive Audit

My competitive audit offers a detailed analysis of similar websites, focusing on their strengths, weaknesses, opportunities, and threats to pinpoint areas for improvement. I compared competitors like AVMA, MyPet, and PetVet, evaluating factors such as usability, navigation, checkout efficiency, and visual design. The insights report highlights gaps in user experience, industry trends, and potential enhancements, guiding the refinement of my website's design and functionality to stand out.

Audit Data Spreadsheet

Audit Data Spreadsheet

Audit Report

Audit Report

Persona

Application

My website creation process begins with Information Architecture (Sitemap) to establish a clear content hierarchy and intuitive navigation, ensuring a smooth user journey. I then map out the User Flow to streamline interactions and help users easily achieve their goals. Next, I sketch Paper Wireframes to experiment with layout ideas and refine key screens before transitioning to digital. Using the Visual Hierarchy Model, I prioritize design elements for clarity and usability. Once the structure is in place, I create low-fidelity Digital Wireframes in Adobe XD, setting the foundation for visual design, prototyping, and usability testing.

Information Architecture

Information Architecture

User-Flow

User-Flow

Paper Wireframe

Wireframe and Prototype

In the Digital Wireframe & Prototype phase, I converted my sketches into structured wireframes using Adobe XD, focusing on usability and layout. I then built an interactive prototype to test navigation and functionality, ensuring a seamless user experience. This allowed me to gather valuable feedback and refine the design before moving on to high-fidelity visuals and development. Explore the prototype by clicking the link below.

Link to Wireframed Desktop Prototype

Link to Wireframed Mobile Prototype

UX Research

For the UX Research phase of the responsive website, I developed a structured Usability Study Plan to conduct a moderated usability study with 5 plus participants, guiding them through interactions with the wireframed prototype. This allowed me to identify pain points in the user experience, particularly around finding services, managing information, and completing forms. Using Generative AI, I analyzed user feedback to uncover key patterns and metrics.

I documented the findings in a Usability Study Report, created user transcripts and empathy maps then organized the insights into an Affinity Diagram, to pin-point recurring pattern. Based on these insights, I made targeted design updates to improve usability, ensuring a more intuitive experience in the next iteration.

Key patterns and metrics data are displayed below.

Study

Diagram

Affinity Diagram

Extras

Participants struggled with the map navigation feature.

Participants requested a clearer remove button for cart items.

Participants found the checkout process simple and straightforward.

Participants wanted personal info and pet registration separated.

Round 1 of Findings

Users when entering form information didn't want to enter personal data every time they added a new pet.
Improve product filtering options for a more refined shopping experience.
Remove unnecessary descriptions and improve navigation layout.

Round 2 of Findings

Allow removing items from the cart before checkout.
Users suggested an option to log pet symptoms during registration.
Add clear titles and labels (e.g., Profile page before the map feature).

Improvements Made

Made a different form page for profile.
Reduced some sections of the UI in order to help with better usability.
Made sure to include functionality for users by adding ways to add images.
Allow item removal from cart, without too many steps.
Now users are able to log pet symptoms when registering pets.
A more refined and simple filter option for easier product search.
User and pet information form has been seperated.

Mockup and Prototype

After analyzing the usability study results, I refined the design by implementing key improvements to address user pain points. These updates were integrated into high-fidelity mockups, enhancing visual hierarchy, accessibility, and overall usability. With the revised mockups in place, I developed an interactive prototype, incorporating the updated design elements and improved user flows. This version provides a more seamless and intuitive experience, ensuring a more user-centered final product, explore the new mockup designs using the links provided below.

Link to Mockup Desktop Prototype

Link to Mockup Mobile Prototype

Accessibility Considerations

Made sure to use color contrast and correct font sizing according to WCAG (Web Content Accessibility Guidelines) to see the WCAG design guideline for this website design please click here.

Use of correct icons and visual element placement for easier user experience.

Added links in the ordering process to let users stay on the right track or if lost they can go back to previous steps.

Impact

I would definitely use this website for my pet as it has very useful features like finding veterinarians, having pet profiles, store, etc. all in one.

One quote from peer feedback:

“Design was easy to grasp and I really enjoyed the experience”.

Learning Outcome

What I really learned from this project is how to really implement design change by listening to users. Also, I really learned to add simple animations to my design in order to add more realism.

Next Steps

For the next step I would like to add more accessibility features.

Start developing some of the UI kits and functionality of the website.

Finally, I would like to start developing the UI, database and implement the functionality features to make it into a working site.

Thank You

Thank you so much for reviewing my work for the BravePet website! If you like to to see more or get in touch my contact info is down below. To see the slider version of the case study please click the link here.

Email: adisiddque6@gmail.com

Website: adilasami.com