The fifth & final project of the UX/UI Design Bootcamp @ Ironhack: Design a website for a client to enhance the appointment booking process for a small veterinary clinic by providing a user-friendly online platform. This was a group project, that I had the pleasure to do with my classmates Olga Escribano Alvarez & Railene Picolli, with a timeline of 5 weeks.
Platform:
Desktop
Category:
UX / UI Design
Timeline:
Jun / Jul '24
Introduction
This time, for our Final Project, we would have to collaborate with a real client on a digital product.
As a first step, we had to find a company on our own, approach them, and ask if they wanted to participate in the Bootcamp’s Final Project.
As one of our group members, Olga was a veterinary, she knew a fellow vet - Aisling McGrath - who was about to kickstart her business in the UK – Pear Tree Vets. They already had an initial website up and running and this was the perfect opportunity for us to work on something real, at a very early stage, and we had the green light to present our version to improve the website. We were on a good track since we had internal scientific knowledge within the team and as we all were animal lovers, we were genuinely curious about this topic. In the end, we were very very keen to identify the main issues around the subject and propose an MVP solution.
We would have 5 weeks to build a digital product or service based on our vision, research, findings, and the UX/UI process we have learned throughout the Bootcamp. We could create either an App, a responsive website, or a product integrated within a service, but this time it would make sense to redesign the existing website towards an improved solution.
This project focused on developing a Minimal Viable Product (MVP) that simplified scheduling, managing, and reminding users of their veterinary appointments. By following an intuitive and efficient pattern, the website would improve the overall experience for pet owners and streamline operations for clinic staff.
The Client
Pear Tree Vets is the creation of Aisling McGrath and Katie Wain, two local vet mums, who have between them over 25 years of experience in veterinary medicine and surgery.
They want to create a community-based independent veterinary practice where they could provide the best care to pets in the area and support their owners too.
Challenge
Design a vet clinic website prototype based on user research, to understand pet owners' relationships with vet clinics and the services they need. This website's goal is to help users easily book appointments and find useful information. Also, ensuring the website works well on all devices, integrating a simple and reliable booking system, setting up effective reminder notifications and furthermore being able to manage the profile settings and tailored pet information.
Stakeholder Interview
To start the process, we had a stakeholder interview, and its purpose was to understand the project goals, identify potential challenges, gather insights, requirements, and aligning the team’s efforts with stakeholders’ expectations.
Design Thinking Process
We approached problem-solving with a five-step design thinking process:
First, we understood the problem deeply by empathizing with the people facing it. Then, we brainstormed lots of ideas to solve it. Next, we made quick prototypes to test those ideas. Finally, we refined our solution based on what works best.
Quantitative & Qualitative Research
Following the Design Thinking process, we started doing Secondary Research which involved using existing information collected by others, like articles and studies. It helped us understand our subject, the market, trends, gain insights, and make decisions without conducting new research.
Then we started the Quantitative Research phase by conducting a survey to understand pet owners’ behaviors and we were able to have 62 answers reuniting decisive insights like the following:
Regarding Qualitative Research we also conducted 5 user interviews. They have shown some needs and behaviors, such as:
Competitive Analysis
After the previous steps we started doing the Competitive Analysis. This step was all about evaluating and comparing the presence of similar websites in the market, to identify strengths, weaknesses, and potential opportunities for improvement. As direct competitors we chose to highlight other vet clinics like Medivet, Avonvale, Vets for Pets and Godiva.
The analysis we conducted highlighted common features such as an online book appointment option and the meet the team information, which are essential across competitors.
Affinity Diagram & Empathy Map
After the research phase, we prepared the Affinity Diagram, which is a visual tool that we used to organize and categorize ideas, insights, and information from our interviews into related groups or clusters. This process would help us to physically see trends and relationships in data, to make it easier to obtain insights, and to make informed decisions.
Next, on the Empathy Map, the insights from interviews are organized to understand what people think, feel, see, and do. It helped us understand users better by showing their needs, desires, and experiences.
User Persona & User Journey Map
After all the previous phases, we found our user, “Caring Claire”. She has a Golden Retriever named Magnus and her goal is to be in control of Magnus's health.
One of her frustrations is the lack of information about costs on her vet's website.
Claire is a busy person, and during her day she notices that her pet Magnus needs his boosters and has become very itchy recently. She tries to book a last-minute appointment but spends too much time trying to find availability on the practices around. Then, she finally manages to book him into a practice.
Problem Statement & HMW | How Might We Statements
Following the User Journey we came up with the Problem Statement:
Based on the User Journey we created How might We questions by gathering information in different ways. As we learned more about the problem, we started brainstorming ideas and came up with potential solutions to respond to the existing needs:
MoSCoW Method & MVP | Minimum Viable Product Statement
What we were trying to achieve was already taking shape, and then it was time to prioritize the features that our website would have. We used the Moscow Method, which consists in splitting the features into four categories: Must have / Should have / Could have & Won't have.
As must-have features, we considered booking appointments online, price list, and the available services list.
Our must-have features helped us predefine our MVP Statement which is the following:
Site Map & User Flow
We had to start working on the information architecture and this was achieved by creating a Site Map, a scheme that documents the organization and navigation of our stakeholder’s website. We analyzed the current site to see where it could be improved and proposed a new Site Map structure:
Then we jumped to the User Flow, to illustrate how Caring Claire will follow it as a Happy Path once getting into the website. This will be shown later in more detail once we reach the High-fidelity prototype.
Concept Sketches
Elaborating on the user flow, we came up with Concept Sketches with three possible visions to improve Pear Tree Vets website:
Low-fidelity Wireframes & Usability Testing
Then, we started drafting the Low-fidelity wireframes, and all our concept sketch ideas were merged into a more structured solution.
We also took the time to start performing usability testing with 3 key users to identify structural problems and got insights like the following:
Mid-fidelity Wireframes & Usability Testing
We continued evolving our ideas from the 1st testing iteration and built Mid-fidelity wireframes.
At this stage we performed again usability testing iterations with 5 key users to identify any problems and the main insights were:
Visual Competitive Analysis
Now we will take you through the Visual Process phase.
For the visual competitive analysis, we circled back to the 3 vets' websites that are in our market space, such as Godiva, Medivet, and Avonvale:
We analyzed their main look & feel, colors and used fonts. This was a good exercise to understand what their websites look like and how do we want to set our product apart from the competition, making its identity diverge from other brands' styles.
Brand Attributes & Identity
Our client had already built their identity and these were the brand principles driving their brand: Trustworthy/Approachable/Personal/Reliable and Professional.
Regarding the brand identity, Pear Tree Vets already had a logo and two colors: the green and the dark blue.
From this point onward, we tried to find the best way to apply and take advantage of their brand identity in the final website proposal.
Style Tile
For the Style Tile, we defined the key colors, fonts, and interface elements that communicate the essence of our visual brand.
As such we utilized the existing color scheme and proposed secondary and neutral colors, embodying all our brand attributes.
Also, the Roboto and Lato fonts were chosen to communicate the brand and can be described as approachable and professional. Due to their high readability, appealing appearance, and versatility, they offer a comfortable reading experience on any screen.
High-fidelity Wireframes
From the Style Tile we had a preliminary idea on how these elements would work together and brought these ideas to life, as you can see in the High-fidelity wireframes. All the structure of the Mid-fidelity was maintained here:
High-fidelity Prototype
Now Caring Claire will take us through the High-fidelity Prototype showing us the process of booking an appointment.
She enters the website, checks all the information on the Homepage, and navigates to the Services page because her dog has a chronic allergic problem, and she needs to check if the vet clinic offers Dermatology consultations.
Caring Claire is ready to check the clinic staff page to make sure who's the vet better skilled in Dermatology, so she can book her appointment.
Now, she triggers the process of booking the appointment, logs in to her profile, and checks her dog Magnus's information, like when it's his next vaccination due, appointments, documentation, and such.
She proceeds to Book an Appointment panel and chooses the best options to book the Dermatology consultation with the vet she identified as a Dermatology expert.
The appointment was finally booked and Caring Claire was thrilled with the quickness and simplicity of the process. She also finds it very useful to access pet care articles in her profile page.
Next Steps
As next steps in our project, we would like to:
Design additional pages on the website
Implement additional features according to what was defined in the MoSCoW Method
Conduct Usability / Desirability Testing on the High-fidelity prototype
Iterate the design based on the feedback received from the testing sessions and the stakeholder
Key Learnings
The main takeaway for this project was being challenged for the 1st time ever with a real client when building their business from scratch.
The process was triggered by organizing and facilitating a kick-off client meeting. In this context we had to make a very positive impression while presenting the team, aligning both parties, manage everyone’s expectations, explain the briefing, project roadmap, and understand better the client’s business & brand identity. This single step was a huge experience to take us from a conceptual plan to the real world and train our soft skills at the same time.
Besides having to manage our time and our work as a team, we dealt with managing the communication with the stakeholder and promptly sending our agreed deliverables in our weekly validation checkpoints, like in a professional environment.
We also felt like we explored and better consolidated our entire UX/UI process compared to past projects. With all the tools and past knowledge at our disposal we managed to propose a new website solution designed to better address the user’s needs, while at the same time incorporating the business goals & brand identity into the solution design.
It was really fulfilling to work with Pear Tree Vets and to be part of this initiative that will better prepare us for future endeavors.