Design System for uPet - Microchip Registration SaaS

uPet is a digital platform designed to help breeders and pet owners protect their animals through a robust pet ID system. By enabling microchip registration and 24/7 tracking, uPet offers full data control for breeders and enhances pet safety through additional products like smart dog tags and collars. The system is built on the principle of redundancy to ensure lifetime protection.

Pet clinics and breeders often struggle with outdated, unintuitive microchip registration platforms. These tools lack essential features like bulk preregistration or invoicing flexibility—critical needs for clinics managing dozens of registrations daily. As a result, the user experience suffers, and workflows are inefficient.

To design a user-friendly, scalable web application that allows clinics and breeders to register microchips easily, with features like preregistration, delayed invoicing, and owner information handoff—all optimized for speed and clarity.

As the Product Designer, I led user and competitor research, wireframing, prototyping, and usability testing. I also collaborated closely with the PO and stakeholders to align business needs with design. A key part of my contribution was developing a scalable design system in Figma, applying atomic design principles and nested components to ensure long-term maintainability.

My approach flexed based on team dynamics, available resources, and deadlines. In this project, I supported the product through every phase—from initial discovery and ideation to UI/UX design, validation, and final handoff—readying it for upcoming launch and scaling.

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).

With the specific requirements and main features defined, we conducted deeper competitor research to analyze all the ins and outs of the existing solution on the market. By laying down the competitor’s 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 for the market yet, 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.

Conclusion:Clinics and breeders register microchips in the platform, but instead of paying for each registration immediately, they can choose to be billed later. This way, all their registrations for a set period are grouped into one invoice, making the process faster and more convenient for high-volume operations

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.

Bill me later feature ( clicnics can be invoiced once a week and register their customers faster )

Trustworthy printable certificate for each puppy

uPet collect payment feature ( a breeder / clinic to preregister microchips for his clients without paying the registration )

Simple and intuitive registration process

Search bar for searching a microchip by its number , date ,pet ,owner

Microchip summary view to diplay the pet's and owner's data.

Gamification elements ( rewards points to incetivize the user )

I collaborated closely with engineers, providing assets via Figma branching and offering continuous design support throughout implementation. I conducted QA and pixel-perfect reviews to ensure a precise match between the final product and the design specifications. Leveraging pre-built Material UI components streamlined development, improved consistency, and eliminated the need for custom component creation.

The web app is in the final stages of development. Next, we will conduct user testing, launch to a small target group, and iterate based on feedback. Later on, a mobile version of our web app will follow based on the users’ feedback and market adoption.

Strong communication, constructive feedback, and empathy are critical in a Scrum environment.

Using pre-built UI components can significantly accelerate design and development.

Cross-functional collaboration enables faster delivery and higher-quality results.