ROLE: UX DESIGN, VISUAL DESIGN
DURATION: JANUARY - FEBRUARY 2023
Design a vet clinic page flow for pet animals
BRAND STRATEGY | VISUAL DESIGN | UX | INTERACTION
Overview
GetVet is a veterinary app, especially for pet animals which treats pets with utmost care. This platform allows the user to make online appointments, and search nearby vet clinics. It offers a wide range of veterinary services including medical, diagnostic, surgical, wellness and preventive health care needs for your pets.
Problem statement
The issue is that we are unable to connect the top local on-demand veterinary professionals. Pet owners want to ensure that caring for their animals is less stressful. Also, customers report having a difficult time caring for their pets and maintaining a healthy work-life balance.
Goals
Create an inclusive design with a user-friendly website for every pet owner to book pet vet clinics and maintain records of their pet’s health checkup.
User research
To better understand the target consumers and their needs, I conducted user interviews, which I later translated into empathy maps. I found that many of my target audience's web searches these days are for informational veterinary consultations.
Yet, many pet owners find it frustrating as pet clinic websites are overwhelming and difficult to navigate. Also, I looked into the list of pet clinic websites and discovered that they might be very difficult to use because the information is sometimes disorganised. However, the lack of accessible interfaces bothers them even more.
Pain points
Interface
The interface of vet clinics' websites is quite cluttered as the users are confused about where to find them.
​
Accessibility
Lack of accessible interfaces frustrates the users.
​
User Experience
The pet clinic website is very challenging to use when there is too much-unneeded information.
Competitive analysis
I examined the main goals and overall strategy of the competition and produced a strengths and weaknesses analysis.
​
My ability to pinpoint their primary areas of strength and weakness allowed me to conduct fact-based analysis and develop fresh viewpoints and methods.
Based on user research, I examined the benefits and cons of vetlive.in, thepetnest.com, and maxvets.com to improve the user experience.
​
An examination of competitors' websites revealed areas for improvement on the GetVet website.
User personas
User Journey
I developed user journeys and personas in addition to user journeys for the website's functionality. I was interested in learning how users may use it and what they might require to do so.
Information Architecture
Paper wireframe
Before moving to digital, a design process would first begin with paper sketches of potential designs. To make sure the design elements addressed the user's pain concerns, each screen of the app was iterated repeatedly on paper. For the home screen, I placed a high value on simple page-by-page navigation for an efficient booking procedure.
Paper wireframe
Screen size variations
Because GetVet customers access the site on a variety of different devices, I started to work on designing additional screen size variations to make sure the site would be fully responsive.
Digital wireframe
I made sure to collect comments and user research data based on design screens as the initial design phase progressed. In order to move forward with producing digital wireframes, I refined the first paper wireframes. It is now simpler to observe how the design may alleviate user aches and pains and enhance the user experience thanks to the transition flow.
Easy to book a vet clinic.
Digital wireframe
Screen size variations
Moving from paper to digital are easy to understand how the redesign could help address user pain points and improve the user experience.
Low fidelity prototype
I produced a low-fidelity prototype using the finished set of digital wireframes. The prototype may be used in a usability research because the main user flow I connected was looking through a veterinary clinic and scheduling an online appointment.
Usability studies
I performed a usability test to identify any gaps and problems new users of the GetVet website might encounter. I observed and evaluated user comprehension of the app's navigation and search capabilities.
​
I was able to identify and address certain flaws as a result of the usability test.
Challenge 1
Before usability studies, there is no chat feature icon on the home page, however, after usability studies, I added an icon “Chat Bot” for accessibility purposes.
Before
After
Challenge 2
To make the pet details easier for a user to click, I added two icons of a cat and a dog to be highlighted that allowed users, especially for screen readers to click a single button.
Before
After
Style guides
High fidelity prototype
Followed the same user flow of low-fidelity prototype and modified the latest elements after implementing the usability studies from the users. The final high-fidelity prototype presented the cleaner and simpler interface for users to browse a movie with subtitles and non-subtitles as well as trailers and share link with friends.
Key mockups
Going forward
What I learnt?
The design was easy for our target users to navigate through, encouraged greater engagement with the veterinarians through consultation, and displayed a distinct visual hierarchy.
The most crucial lesson I learned was to always keep the user's demands
in mind when coming up with ideas and solutions.
Although I was more drawn to designing wireframes and prototypes, I discovered that testing was the most crucial step in the process. For instance, a usability test enables us to spot faults and address
problems from multiple angles.
Next steps
The primary objective is to prioritise users, therefore testing and iteration are continuous processes. The website's online vet consultation section needs to be more clear and more user-friendly. The method will be streamlined and improved in the following iteration to improve pet care. It is essential to identify any additional needs and to develop ideas for new functionality.
To speed up the procedure, the new function will only require the click of a single button to access an online veterinarian consultation. A second usability test will be carried out, paying close attention to user expectations.
​
Once all the gaps are filled, an app will be developed in the future. A new information architecture will also be developed to fill the gaps.