Ticketing Components Shu worked on

These Icons are used in the ADMIN area to show the progress or urgency of the ticket you are looking at. They are aligned with the new color system.

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.

• LINK TO FIGMA PROTOTYPE

New ADMIN ACTION NEEDED ONBOARDING SCREENS

NEW ADMIN RESOLVED SCREEN

Building Pages

New ADMIN TABS and Components

Documents Page and pending reviews

NEW Owner Account Screen

Added a Pets tab to show Owners Pet’s Information as well

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

Old Tab System was all just blue and not color coded for the new system.

New Side Navigation Flows We Created

We Collapsed the All Tickets area in a drop down menu so you can easily navigate through the different ticketing tabs.

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. We also made components of the Timeline flow for onboarding as well.

NEW Color Coded ADMIN TABS and Timeline Progress Components

New Onboarding Screens with New TAB system at top

New TAB system at top that is color coded with new drop down Navigation on left hand side and new Timeline Progress components

Color Coding System We Created

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.

• In older versions of the pages they did not keep the same color coded system in each section. Some sections had blue being the approval color and others had green. Some pages did not have color coding at all and everything was grey and harder to tell what was top priority and what wasn’t. We also noticed nothing had been made into components yet and that was an important thing to tackle before building out more pages. With these goals in mind we started to work on a new system.

• We prioritized the creation of a shared design system before the second sync to align the team and accelerate delivery.

• We 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

• After our first meeting with the team at Tirivelo where we showed the unification system we had just worked on, the TiriVelo Designers approved the new system; it became the reference for all subsequent work.

Then we started to work on building out all the new screens with components of every Nav Bar, Card Section, and Status Action Buttons. This made creating new pages more streamlined and easier for everyone to achieve universally.

Hand Off 

• Our final steps were 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 Prototype flows of the ADMIN Pages and the color coded system that will be used throughout the entire ADMIN pages and also the priority and ticket status components we made for the ADMIN pages and the booking and ticketing 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.

  The new team had a lot of questions for us and I answered the ones related to us the best I could. They mainly were curious what the feedback had been like from the TiriVelo Team and I assured them that we had lots of positive feedback about all the pages we created. We reiterated that the Design System does not need to be redone at all and they need to use all the components we built out for them to ensure smooth prototyping from here on out.

  They wanted to know what the main focus should be so I directed them to focus on a few things I did not have time to finish.

• 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. Using a Policy Guide will help them figure out what the standard protocol is for each situation they might encounter.

• 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 as a side note in the pages for the designers to have for reference would be beneficial for future designers. 

• Another question the new team had was about Accessibility. We did not do Accessibility testing on the pages so we told the new team that would be a great place to start.

• The Developers were very excited to see the work we had done and get an understanding of how the flow of the ADMIN site should be handled. The ADMIN pages are far more advance than the pages they had already focused on so they are going to start coding it soon and connecting all the dots. They also had some questions about the logistics of doing Half Payouts for disputes between Owners and Providers if needed through their sister payment site but they were able to do some quick research and figure out that Half Payouts can be made that way so we did not have to change the protocol on that.

• Overall My Team was able to provide a great foundation and stepping stone for the TiriVelo Team to use to launch their site from and I am so excited to see where they go in the future.

Below is some Feedback we received from TiriVelo

“It has been a pleasure working with this Designlab team on the Admin Dashboard Refinement Project for TiriVelo. Throughout the project, the team demonstrated a high level of professionalism, creativity, and collaboration while refining and enhancing our internal platform. They were receptive to feedback, communicated effectively, and consistently approached design challenges with thoughtful, user-centered solutions. I especially appreciated their willingness to iterate on ideas, explore different approaches, and continually improve the quality of their work. Their attention to detail and commitment to creating intuitive experiences made them a valuable extension of our Product Design team. Beyond the final designs, the team embraced a collaborative process—working closely with stakeholders, incorporating feedback throughout the project, and maintaining a positive attitude from start to finish. We sincerely appreciate the time, effort, and passion they invested in helping shape the future of TiriVelo, and I have no doubt they will continue to make meaningful contributions wherever their careers take them. I would happily recommend this team to any organization looking for talented, collaborative, and thoughtful product designers.” - Michael

BACKGROUND CHECK APPROVAL SCREEN

Actions on Right hand side only now

First CPR CERTIFICATE APPROVAL SCREEN

Old ID Approval Onboarding Screens

Admin Actions are in the middle of the screen and not on the right side like the booking and ticketing pages.

While the rest of my team worked on components and booking pages I worked on building out some pages for the Owner Onboarding experience since none of those screens had been created yet.

Since the Owners do not need to go through an extensive onboarding procedure their screens are more basic and the only interactions an admin can have with it is just editing their information for them if they need to. Being able to have a PET tab instead of Onboarding worked out better for the Owner Screens,

Next I worked on pages for uploading Documents and Verifying Certifications, Background Checks, and Government IDS and the prototype flow involved in processing each one. None of those screens had been made previously but I drew on inspiration from the screen that had already been built out to keep everything consistent.

After a meeting with my team we realized all Admin actions are on the right hand part of the screen in Ticketing and Booking so I needed to re design my screens to truly keep consistency as the main goal. To further keep to that theme the Action Tabs at the top of the pages needed to look at same as well. So I decided to redesign most of the screens I had been working on. We also. made components for the color coded visual timeline bar you would see in the initial onboarding screens.

Documents Screen

New CPR Certificate Approval Card

Actions on Right hand side only now

NEW ID Approval Onboarding Screen

Admin Actions on right hand side