Designing a Web App for Professional Breeders & Pet Clinics to Register Microchips
Designing a Web App for Professional Breeders & Pet Clinics to Register Microchips
Designing a Web App for Professional Breeders & Pet Clinics to Register Microchips
Designing a Web App for Professional Breeders & Pet Clinics to Register Microchips
Designing a Web App for Professional Breeders & Pet Clinics to Register Microchips
Microchip Registration Saas
Microchip Registration Saas
Microchip Registration Saas
Microchip Registration Saas
Microchip Registration Saas
Tools
Figma
Miro
Adobe Photoshop
Notion
5 weeks
Time frame
UX/UI Designer
Role
Desktop
Platform
Intoduction
Intoduction
uPet helps breeders and dog owners expand the lifetime of their pets and keep their puppies safe forever through a superpowered pet ID system. A breeder can microchip his pet and monitor it 24/7 with full control over the data. uPet believes in the principle of redundancy and also offers products like dog tags and dog collars to increase the protection level of a puppy.
uPet helps breeders and dog owners expand the lifetime of their pets and keep their puppies safe forever through a superpowered pet ID system. A breeder can microchip his pet and monitor it 24/7 with full control over the data. uPet believes in the principle of redundancy and also offers products like dog tags and dog collars to increase the protection level of a puppy.
Problem
Problem
There is no easy solution for pet clinics and breeding businesses to register microchips for their customers. Pet clinics have a high volume of registrations and need to be invoiced later. The current products on the marketplace lack this feature and have an outdated UX/UI which results in a poor user experience.
There is no easy solution for pet clinics and breeding businesses to register microchips for their customers. Pet clinics have a high volume of registrations and need to be invoiced later. The current products on the marketplace lack this feature and have an outdated UX/UI which results in a poor user experience.
Goal
Goal
Design an intuitive and simple web app for pet clinics and breeding businesses to register microchips for their customers. Create a straightforward registration process with the option to preregister a microchip and be invoiced later.
Design an intuitive and simple web app for pet clinics and breeding businesses to register microchips for their customers. Create a straightforward registration process with the option to preregister a microchip and be invoiced later.
My role
My role
I was responsible for user & competitor research, designing, prototyping, testing, and handoff delivery. I worked with the PO and key stakeholders throughout the entire design process and took part in business operative systems creation and marketing activities. I also build a scalable design system based on atomic design principles and Figma nested components.
I was responsible for user & competitor research, designing, prototyping, testing, and handoff delivery. I worked with the PO and key stakeholders throughout the entire design process and took part in business operative systems creation and marketing activities. I also build a scalable design system based on atomic design principles and Figma nested components.
My process
My process
The structure and length of my process can vary depending on at which point I join the team, the resources available, and deadlines. For this project, we successfully went from the discovery phase to development and prepare to launch soon.
The structure and length of my process can vary depending on at which point I join the team, the resources available, and deadlines. For this project, we successfully went from the discovery phase to development and prepare to launch soon.
Discovery
Discovery
We started the project with a kick-off meeting (with the PO and key stakeholders) and defined the core problem. At that point we knew that we are targeting breeders and pet clinics, so we created user personas to build more empathy with our final users.
The breeder persona was already defined by me from our previous projects. I created the second persona (pet clinic owner) based on insightful data collected from interviews with pet clinics by our CEO.
By that time we had a broad perception of our competitors, and with a good understanding of the problem and target audience, we defined the specific requirement and main feature of the app. We decided to go for desktop first because the product was intended to be data-heavy and also used by clinics first (95% of staff working on desktop).
We started the project with a kick-off meeting (with the PO and key stakeholders) and defined the core problem. At that point we knew that we are targeting breeders and pet clinics, so we created user personas to build more empathy with our final users.
The breeder persona was already defined by me from our previous projects. I created the second persona (pet clinic owner) based on insightful data collected from interviews with pet clinics by our CEO.
By that time we had a broad perception of our competitors, and with a good understanding of the problem and target audience, we defined the specific requirement and main feature of the app. We decided to go for desktop first because the product was intended to be data-heavy and also used by clinics first (95% of staff working on desktop).
Ideate & Planning
With the specific requirements and main features defined we conducted deeper competitor research to analyze all the ins and out of the existing solution on the market. By laying down the competitors registration flow we figured out opportunities for improvement.
We took the idea to include gamification elements such as reward points to incentivize the user and create a more engaging experience.
The biggest need of 80% of pet clinics was the option to be invoiced later due to a high volume of activation. This feature wasn’t designed on the market yes, so we took this opportunity. I created some raw wireframes and low-fidelity prototypes and tested them internally with the team. After some rounds of iteration, we defined the most intuitive flow.
Ideate & Planning
With the specific requirements and main features defined we conducted deeper competitor research to analyze all the ins and out of the existing solution on the market. By laying down the competitors registration flow we figured out opportunities for improvement.
We took the idea to include gamification elements such as reward points to incentivize the user and create a more engaging experience.
The biggest need of 80% of pet clinics was the option to be invoiced later due to a high volume of activation. This feature wasn’t designed on the market yes, so we took this opportunity. I created some raw wireframes and low-fidelity prototypes and tested them internally with the team. After some rounds of iteration, we defined the most intuitive flow.
Competitor research
After I finished with the analysis of the target users, I started the competitor analysis. Competitor analysis allows us to analyze how other companies have approached the same problem, what their strengths are, and where we can do things better.
Competitor research
After I finished with the analysis of the target users, I started the competitor analysis. Competitor analysis allows us to analyze how other companies have approached the same problem, what their strengths are, and where we can do things better.
User flow
After I finished with the analysis of the target users, I stated the user flow, which brought a better understanding of the website main functionality, number of screens, happy scenarios, and edge cases and further simplified the wireframing and UI Design Process.
User flow
After I finished with the analysis of the target users, I stated the user flow, which brought a better understanding of the website main functionality, number of screens, happy scenarios, and edge cases and further simplified the wireframing and UI Design Process.
Designing & Prototyping
Once the overall flow was approved, I moved to design the first high-fidelity mockups. I was using the components of MUI as a reference to simplify the work for engineers and avoid reinventing the wheel. It also allowed me to have an easy sync between design and development later on.
During the entire design process I was revisiting the user personas and specific user requirement defined in the early discovery and ideation phase. I was working closely with the PO, so early feedback was always there. This allowed me to try out different ideas and test them with our PO, who was a successful breeder.
Designing & Prototyping
Once the overall flow was approved, I moved to design the first high-fidelity mockups. I was using the components of MUI as a reference to simplify the work for engineers and avoid reinventing the wheel. It also allowed me to have an easy sync between design and development later on.
During the entire design process I was revisiting the user personas and specific user requirement defined in the early discovery and ideation phase. I was working closely with the PO, so early feedback was always there. This allowed me to try out different ideas and test them with our PO, who was a successful breeder.
TESTING DIFFERENT IDEAS
Evaluate and Testing
Our hypothesis was that the registration process should be broken down into small bite-size steps to avoid the cognitive load and make the data more digestible. The engineers quickly turned my Fimga design into a high-fidelity prototype using the stepper component from MUI. A Figma prototype didn’t work out because it wasn’t possible to create the expected behavior in Figma.
I tested the prototype internally with our PO and stakeholders. The first registration went well, and so did the second one. But starting with the third microchip it became annoying and time-consuming to go through the same steps over and over again.
Considering that the product is designed mainly for breeding businesses and pet clinics, that form layout is likely to decrease their efficiency, which is the oposite of what we are trying to achive. A basic breeder or clinic staff can register tens of microchips per day, so we came up with a better solution.
Evaluate and Testing
Our hypothesis was that the registration process should be broken down into small bite-size steps to avoid the cognitive load and make the data more digestible. The engineers quickly turned my Fimga design into a high-fidelity prototype using the stepper component from MUI. A Figma prototype didn’t work out because it wasn’t possible to create the expected behavior in Figma.
I tested the prototype internally with our PO and stakeholders. The first registration went well, and so did the second one. But starting with the third microchip it became annoying and time-consuming to go through the same steps over and over again.
Considering that the product is designed mainly for breeding businesses and pet clinics, that form layout is likely to decrease their efficiency, which is the oposite of what we are trying to achive. A basic breeder or clinic staff can register tens of microchips per day, so we came up with a better solution.
TESTING LAYOUT 1 (STEPPER)
TESTING LAYOUT 2
We combined all the data in one form which significantly increased the speed of the registration process. Even though the data is pretty saturated it's well structured so that even a simple dog owner who is more likely to register 1-4 microchips per year can easily navigate through it.
I’ve created an interactive prototype in Figma and conducted some more internal tests with the PO, key stakeholders, and end users. The form was working great.
Final Design
After several rounds of iteration and a couple of tweaks here and there, we came to this design.
Final Design
After several rounds of iteration and a couple of tweaks here and there, we came to this design.
Development
I handed off all the assets to engineers throughout Figma branching and supported them round the entire implementation. QA and pixel-perfect testing were done by me to ensure we there is a 1-to-1 relationship between design and development.
As I mentioned before, using premade components of Material UI significantly simplified the implementation and sync up, as it prevented creating the components from scratch.
Some components from the interactive prototype (e.g. the text fields) built by engineers earlier were used in the final implementation.
Development
I handed off all the assets to engineers throughout Figma branching and supported them round the entire implementation. QA and pixel-perfect testing were done by me to ensure we there is a 1-to-1 relationship between design and development.
As I mentioned before, using premade components of Material UI significantly simplified the implementation and sync up, as it prevented creating the components from scratch.
Some components from the interactive prototype (e.g. the text fields) built by engineers earlier were used in the final implementation.
Further Steps
The product is currently in the development phase. We plan to conduct several user tests once the implementation is finished and then launch it to a small audience to ensure we covered all the user's needs. Later on, a mobile version of our web app will follow based on the users’ feedback and market adoption.
Further Steps
The product is currently in the development phase. We plan to conduct several user tests once the implementation is finished and then launch it to a small audience to ensure we covered all the user's needs. Later on, a mobile version of our web app will follow based on the users’ feedback and market adoption.
What I learned
1. Your soft skills (the ability to communicate efficiently, give constructive feedback, build empathy and be a great team player overall) play a significant role in a scrum environment.
2. Using prebuild MUI components tremendously simplified the design, implementation, and sync-up process.
3. Being a cross-functional team allowed us to move fast and deliver on time.
What I learned
1. Your soft skills (the ability to communicate efficiently, give constructive feedback, build empathy and be a great team player overall) play a significant role in a scrum environment.
2. Using prebuild MUI components tremendously simplified the design, implementation, and sync-up process.
3. Being a cross-functional team allowed us to move fast and deliver on time.
