TiriVelo Inc Admin Onboarding
Prototyping
Prototyping and Iteration
We did not get a chance to do prototype testing with participants since we were about to hand off the project to a new team. I did a little bit of testing myself to make sure the buttons were going to the right pages but I had to re group when my team decided to switch up the main pages to a tab system at the top and I had to rebuild all my screens for that. We also decided that all the admin actions should be on the right hand part of each screen so I change that in all my pages as well.
Converted page designs into interactive prototypes for developer handoff.
Shifted priority to Provider onboarding based on stakeholder guidance and built a tested prototype for that flow.
Introduced consistent top-level tab navigation across all admin pages to align with Booking and Ticketing patterns; updated Onboarding screens accordingly (V3).
Em’s component library accelerated screen production and ensured visual/behavioral consistency.
Shu prototyped the Lost Pet ticket flow. During this work, we standardized the placement of admin actions to the right pane across Ticketing, Booking, and Admin Onboarding. We also componentized verification patterns for Provider IDs, Certificates, and Background Checks.
New ADMIN ACTION NEEDED ONBOARDING SCREENS
NEW ADMIN RESOLVED SCREEN
Building Pages
ADMIN TABS and Components
Owner Account Screen
The TiriVelo Project
I was part of a team collaboration working for a Canadian based pet sitting app called Tirivelo
At TiriVelo Pet Services Inc., a proudly Canadian company, we are passionate about fostering joyful and trusting relationships between pets and their owners. Our mission is to provide reliable, personalized, and compassionate pet care services that meet the diverse needs of today’s pet-loving community.
From dog walking and house sitting to drop-in visits and doggy daycare, our dedicated team ensures that every service we offer is designed with your pet’s happiness and well-being in mind.
They are working on launching their site and app soon. Our main focus was on the Admin pages that still needed to be built out and prototyped before they can officially launch.
My Team of Three worked on unifying all the previous work to be consistent with color coding and components for each card and part of the site for 5 weeks. We also divided up tasks and each tackled a section on our own as well to make sure we were doing the most we could with the time we had available to us.
I worked on prototyping the Admin Onboarding section and building out pages the owner onboarding,
The other members of my team Em and Shu worked on building out components for each section and on the booking and ticket sections.
Together I feel like we were able to cover a lot of ground and deliver some prototype flows to show the developers which will help keep the site on track for its launch.
Action tags and Status Components
Below is the system booking status tags and the priority tags EM created for us to use on all the ADMIN screens from here on out
Old Onboarding Pages
New Side navigation Flows we Created
Objective 2: Workstream Ownership and Deliverables
I led the Admin Onboarding flow, including Owner onboarding screens and document verification (certificates and background checks).
Em standardized UI components (cards, nav bars, CTAs, etc.), creating a reusable component library for the admin experience.
Shu focused on Tickets and Booking, including the end-to-end flow for a Lost Pet ticket.
After Realizing the dashboards for Ticketing and Booking had the same TAB system I built out the Onboarding pages to have the same system. All the actions an Admin can make in the Ticketing and Booking Sections are made in the right hand side of each page So I worked on making that similar in Onboarding as well. We also made components of the Timeline flow for onboarding as well.
New Onboarding Screens with New TAB system at top
Color Coding System we created
We unified the color coding throughout the admin sites we were working on to make sure every color meant the same action. Grey - No action needed. Teal - On track/ In Progress. Green - Complete. Orange - Non Admin action (awaiting). Red - Urgent Admin action required.
Objective 1: Establish a Unified Design System
During the first meeting I had with my team before we meet up with TiriVelo we went through all the Figma files and noticed inconsistencies through out the Versions of the pages that were already established and decided to work on that first together as team to show in our first meeting.
Prioritized creation of a shared design system before the second sync to align the team and accelerate delivery.
Delivered a color-coding standard applied across all admin surfaces so status colors map consistently to actions:
Grey: No action required
Teal: On track / In progress
Green: Complete
Orange: Awaiting non-admin action
Red: Urgent admin action required
TiriVelo Designers approved the system; it became the reference for all subsequent work.
Hand Off
Our final steps will be to break down all the work we did and what the next team should focus on. We had a few meetings with the new team and also the DEVS to show everyone the color coded system that will be used throughout the entire ADMIN pages and also the priority and ticket status components we made for every part of the ADMIN pages as long with the booking and onboarding cards too. There was a lot of information we needed to convey to the teams which is why it took a few meetings to go over everything and prepare the next team for the places they need to focus on next, like building out an insurance approval screen for onboarding and the flows for all the multiple ways a ticket and booking could go.
I was able to build out most of the new document screens I was asked to do but the insurance verification page still needs to be done and most of those screens still need to be built out on the owner side. I believe those should be the main focus of the new team on the admin onboarding side. There are still many variations of tickets and booking flows that need to be flushed out as well.
Having a complete list of the definitions of each of the many possibilities of a ticket escalation and what exactly occurs for each one and how it should be handled in the company for the designers to have for reference would be beneficial for future designers. We did not do Accessibility testing on the pages so we told the new team that would be a great place to start.
BACKGROUND CHECK APPROVAL SCREEN
CPR CERTIFICATE APPROVAL SCREEN
While the rest of my team worked on conponents and booking pages I worked on building out some pages for the Owner Onboarding experience since none of those screens had been created yet and I worked on pages for uploading Documents and Verifying Certifications, Background Checks, and Government IDS and the prototype flow involved in processing each one.
Documents Screen
