Overview
The product:
Lori’s Pet Clinic is a website designed for a veterinary clinic that allows users to register their pets ahead of their first appointment. The average user is between 19 and 65 years old.
Duration:
June - July 2023
My role:
Lead UX/UI Designer and Researcher
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
The problem:
​Pet owners coming in for their first visit have a difficult time handling their pet along with filling out paperwork, such as registering their pet for the visit. Veterinary clinics that allow their clients to register their pet online before their appointment usually don’t have an easy way to register more than one pet.
The goal:
Design a website for Lori’s Animal Clinic that provides clear navigation and user flow for registering a pet ahead of their first appointment. The website will allow users to register more than one pet at a time.
Understand in the user
User research:
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users have more than one animal they want to register online. However, many veterinary websites only allowed for one registration, which frustrated many target users. This caused challenges for people who prefer to limit paperwork when dealing with their pet(s) at their appointment time.
Pain points:
1. Multiple pets - Most websites that allow for online registration don’t take multiple pets into consideration. This is frustrating for those who want to register more than one pet at a time.
​
2. Frustration at visit - Many websites don’t allow for online registration. This creates challenges when arriving at their appointment, due to taking care of their pet(s) while also having to fill out paperwork.
​
3. Navigation - Many veterinary websites are confusing. It’s not always clear where to go to register a pet(s).
The product:
Lori’s Animal Clinic is a website designed for a veterinary clinic that allows users to register their pets ahead of their first appointment.
Duration:
June - July 2023
My role:
Lead UX/UI Designer and Researcher
Responsibilities:
User research, wireframing, prototyping, user research, and UI design
User journey map:
I created a user journey map of Shilo’s experience using Lori’s Animal Clinic site to help identify possible pain points and improvement opportunities.
Starting the design
Sitemap:
Many veterinary clinics do not offer a way to register pets online. This creates frustration for pet owners when arriving at their appointments. I used this knowledge to make a sitemap that helps users clearly identify a way to register online.
My goal here was to make strategic information architecture decisions that would improve the overall registration process. The structure I chose was designed to make things simple and streamlined for a good user experience.
Paper wireframes:
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and pet registration flow in mind.
The home screen paper wireframe variations (right) focus on optimizing the browsing experience for users. The stars indicate elements that will be included in the initial digital wireframes.
Paper wireframe
screen size variation(s)
Because Lori’s Animal Clinic customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes:
Moving from paper to digital wireframes made it easy to understand how the design could help address user pain points and improve the user experience.
Utilizing hierarchical design along with adding element placements on the home page was a key part of my strategy.
Digital wireframe screen size variation(s)
Low-fidelity prototype:
I connected all of the screens involved in the primary user flow of registering a pet online before the pet’s first veterinary appointment at Lori’s Animal Clinic.
At this point, I had received feedback on my designs from members of my team at Google’s Coursera. I listened to their feedback, and I implemented several suggestions in places that addressed user pain points.
Usability study:
parameters
Usability study:
findings
Study type:
Moderated usability study
​
Location:
United States, remote
​
Participants:
5 participants
​
Length:
15-20 minutes
1. Form layout - Users became easily lost in the registration form due to its layout.
​
2. Element location - Users did not always see the helpful articles/information at first glance on the homepage.
​
3. Wording - Users were confused with the wording of the buttons after completing the registration form. - Users were confused with the wording of the buttons after completing the registration form.
​
4. Search - Users did not always notice where the search bar was located. The header was a bit too crowded and disorganized.
Refining the design
Mockups:
Based on the insights from the usability study, I made changes to the layout of the registration form. I developed more concrete labels and then divided them into logical sections. The new layout will be more engaging with users because it is much easier to follow.
Mockups:
Based on the feedback I received from my peers and from the usability study, I changed the layout of the home screen. For better visibility, the “Learn more” section is now above the “Gallery,” since it contains more valuable information.
Mockups: Original screen size
Mockups:
Screen size variations
I have included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users will have a variety of devices, I felt it was important to optimize the browsing experience for a range of sizes and proportions, such as mobile and tablet so users have the smoothest experience possible.
High-fidelity prototype:
I was able to implement peer and participant feedback by making a few changes. I’ve now added clarification with wording, updated the internal layout of the registration form, and the layout of the homepage.
Accessibility considerations
1. I used headings with different sized text for clear visual hierarchy
​
2. I used landmarks to help users navigate the site, including users who rely on assistive technologies
​
3. The app follows federal guidelines for users with visual impairments. Consideration were made with contrasting colors, increasing font weight, and more.
Going forward: Takeaways
Impact:
The target users shared that the design was intuitive to navigate through the registration process. It was more visually appealing than most other veterinary clinics’ websites. Finally, this website is unique in that it offers the user to register multiple pets at a time.
What I learned:
While designing the app, I quickly learned that there are many more iterations in creating a final design than I originally thought. The usability studies were the most helpful for me to get past my own biases and to really just focus on the users’ actual needs.
Next steps:
1. Conduct more follow-up usability
studies on the new website to iterate more on the design
2. Continue adding more pages and functionality to the site to make it more complete for use in the real world
​
3. Continue to identify new ways to make the website even more accessible for all users
Let's connect:
Thank you kindly for your interest in reviewing my work. If you would like to view more of my designs or share your thoughts, I would love to hear from you. My contact information is below.
Email: juliegeersdesigns@gmail.com
Phone: (616) 477-4849
Website: www.juliegeersdesigns.com