Product Overview

Designed a responsive pet veterinarian website for any pet owners who are wanting a one stop site where they can find local vets, update/upload pet information and make quick purchases.

My Role: User Experience Research, Visual & Interaction Designer

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

Project Duration: November 2022 - January 2023

About Details

The Problem

Users are always having to fill out paper or digital forms all the time they take their pets to a vet and when deciding to change vets. As well as having hard time locating vet clinics that approve their pet insurance and large time consumption when shopping for pet products.

The Goal

The goal is to make a site where users can make an account have all the pet information in one place so that any veterinarian can access them regardless. And users are also able to find, schedule appointments, and shop products for their pets from one place.

Project Goal Statement

Target Audience

BravePets platform is designed for pet lovers of all kinds, whether you're a current pet owner, someone considering getting a pet, or a friend or family member trying to help a loved one care for theirs. For those who already have pets, we make it easier to manage vet visits, track medical records, and find trusted clinics without the hassle of multiple registrations. If you're thinking about bringing a pet into your life, our platform provides valuable resources, clinic options, and product recommendations to help you prepare. Even if you don't own a pet yourself but want to support a friend or family member in finding the best care, we offer a simple way to locate reputable veterinary services and high-quality pet products all in one place. With an intuitive pet profile system, seamless clinic access, and a well-curated online store, we make pet care effortless 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

Going into this research I started by taking some simple surveys of pet owners in order to pinpoint potential users. Afterward I followed a more moderated user research approach and asked them a series of questions to understand their experience going to veterinarians. From their I went into building the personas and user journey. In the beginning from doing the survey research I figured that users are mostly not wanting to fill forms. But after the initial design and some more usability research I found out that users can also benefit from not only having pet profiles (which includes forms/paperwork as well as other info), but a way to find local vets around them and be able to buy products geared towards their pets that are approved by their pet insurance if they have one.

Competitive Audit

The competitive audit provides a structured analysis of similar applications, evaluating their strengths, weaknesses, and key design patterns to identify opportunities for improvement. The spreadsheet includes a detailed comparison of competitors based on usability, navigation, checkout efficiency, and visual design, highlighting areas where the application can stand out. The report summarizes key insights, identifying gaps in user experience, common industry trends, and potential enhancements to refine the app's design and functionality.

Audit Data Spreadsheet

Audit Data Spreadsheet

Audit Report

Audit Report

Persona

Application

The application creation process begins with Information Architecture (Sitemap) to establish a structured hierarchy of content and navigation. This ensures a logical flow and intuitive user experience. Next, a User Flow is designed, mapping out how users will interact with the application to achieve their goals efficiently. Once the flow is clear, Paper Wireframes are sketched to quickly explore layout ideas and refine key screens before committing to digital design. After iterating on these rough drafts, the project moves into Digital Wireframing, where low-fidelity wireframes where created using Figma. These initial digital wireframes establish the foundation for visual design, prototyping, and usability research.

Information Architecture

Information Architecture

User-Flow

User-Flow

Paper Wireframe

Wireframe and Prototype

The Digital Wireframe & Prototype phase involved transforming initial sketches into structured wireframes using Figma/Adobe XD, focusing on usability and layout. These wireframes were then developed into an interactive prototype, allowing for seamless navigation and functionality testing. This prototype provides a realistic user experience, enabling feedback collection and refinement before moving to high-fidelity design and development, explore the prototype by clicking on the links below.

Link to Wireframed Desktop Prototype

Link to Wireframed Mobile Prototype

UX Research

For the UX Research phase, I developed a structured UX Research Study Plan to conduct a moderated usability study with 5-7 participants, capturing interaction data with the wireframed prototype. This research aimed to identify usability challenges and refine the user experience. After collecting the data, I created a Usability Study Report, utilizing Generative AI to analyze user feedback and uncover key patterns. Additionally, I created an affinity diagram to categorize insights, persona interview transcripts to document user perspectives, and persona empathy maps to visualize user emotions and needs.

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