Tirivelo
From unstructured wireframes to a strategic product
Company: Tirivelo Inc
Platform: Desktop Web
Platform: Desktop Web
Role: UX/UI Designer
Timeline: 5 weeks
Timeline: 5 weeks
Team: Sam, Shivangi & Maque
Tools: Figma, Maze
Tools: Figma, Maze
Turning
into clarity
TiriVelo Pet Care Inc. is a growing Canadian marketplace designed to help pet owners find trusted care quickly and safely.
When they approached our Designlab team, their Owner experience existed only as rough wireframes. Our role was to transform these early ideas into a polished, dev-ready product—clarifying flows, defining the visual language, and building the foundations of a scalable UX system.
CEO Feedback (click to read)
My Role
Starting Point.
What we received:
What was missing:
Challenge
Our challenge was to transform disconnected low-fidelity sketches into a cohesive, intuitive, development ready product with a clear visual identity and scalable UX foundations.
Why we researched
Although the client provided initial research and predefined flows, we conducted additional, focused research to ground ourselves in the problem space.Using competitive analysis, a customer journey map, empathy mapping, user personas, and HMW questions, we validated assumptions, uncovered experience gaps, and ensured our design decisions aligned with real user needs and behaviors.
Key Insights
After synthesizing findings across personas, competitive insights, and user pain points, three themes consistently emerged:User Personas
To humanize the problem and align the team around user expectations, we created two lightweight personas that represent the primary behaviors and motivations of TiriVelo’s owner segment.Competitive Analysis
Empathy Map
Opportunities
We defined three opportunity areas that would guide our redesign at both UX and UI levels.How Might We?
We translated our opportunity areas into “How Might We” questions to reframe challenges as actionable design directions and guide ideation throughout the project.Design Process
Although the client provided predefined flows and low-fidelity wireframes, our role went beyond visual refinement. We began by auditing their structure and quickly identified gaps in hierarchy, logic, and usability. This allowed us to improve the flows strategically before moving into high-fidelity design.
From there, we built a scalable design system and translated every flow into a cohesive, dev-ready product.
Journey Map
To better understand the user’s end-to-end experience and pain points, we mapped the Owner journey across all stages—from awareness to post-service.
This helped us identify emotional highs/lows, friction points, and opportunities for improvement that directly informed our design decisions.
Client-Provided Flows & Screens
A visual overview of the Owner journey as originally defined by the development team.
These flows served as our foundation, but we quickly identified multiple areas needing refinement to reduce friction, clarify logic, and ensure long-term scalability.
Strategic Improvements
We uncovered unclear pathways, redundant steps, and missing interactions across the Owner experience.
Working collaboratively with the client, we proposed structural improvements that:
- Increased efficiency,
- Strengthened visual and functional hierarchy.
- Aligned every step with real user expectations.
These refinements allowed us to deliver a polished, intuitive, and logically consistent flow before building the UI.
Design system
To ensure consistency across a large and multi-flow product, we developed a cohesive design system that established the visual and interaction language for TiriVelo.
The goal was to create a brand expression that felt trustworthy, warm, and professionally modern, aligning with the needs of tech-savvy pet owners.
Color Palette
TiriVelo’s color palette combines calm, trustworthy blues with a warm accent of orange to reflect both reliability and care..
Typography
DM Sans is a modern, geometric sans-serif typeface designed for clarity and friendliness.
Logo
The logo represents trust, care, and companionship
—reflecting TiriVelo’s values
—reflecting TiriVelo’s values
Header and Footer
Buttons
A flexible button set with multiple states (default, hover, disabled) designed to guide user actions clearly and improve usability across the product.
Icons
A cohesive and minimal icon library that supports quick scanning and reinforces clarity across forms, navigation, and service features.
Illustrations
Warm, friendly illustrations used to add visual personality and emotional connection
Selection/Input fields
Clear, accessible fields designed with consistent spacing, hierarchy, and validation states to ensure smooth form completion and reduce user error.
Cards
A modular card system — provider cards, pet cards, service cards — built for scalability and clarity, ensuring information is easy to compare and interact with.
Others
Additional UI elements designed to maintain consistency across all interactions.
Image gallery
A curated image set that brings warmth, trust, and emotional resonance to the interface, helping users connect with the brand on a more personal level.
High-Fidelity Screens & Flows
Flow 1 - Exploring the Platform & Signing Up
Flow 2 - Setting Up Your Profile
Flow 3 — Adding a Pet
Flow 4 — Booking a Service
Flow 5 — Checking Upcoming Appointments
Usability testings - Methodology
- Remote unmoderated test (Maze)
- 10 participants, 10–15 minutes each
- High-fidelity prototype
- Data captured via Maze Analytics
Overall summary
Users found the prototype intuitive and easy to navigate, with 100% completion in 4/5 tasks.
Friction appeared mainly around terminology, form labeling, and navigation discoverability, especially in the Personal Details flow.
Task Results
Key Findings
The results showed a highly intuitive product with strong task success rates and zero drop-offs, validating the clarity of our redesigned flows.The only major usability issue appeared in Task 2, where unclear terminology and form labeling caused confusion.
What users told us
Key Iterations
< Dev Ready >
Developer handoff
- Fully linked Figma prototype covering 5 core Owner flows
- Documented components and variants (buttons, cards, forms, calendar, inbox, etc.)
- Notes on edge cases, empty states, and copy.
- Clear mapping from flows to screens so devs can implement step-by-step
Final Prototype
Reflection
This project was a valuable step in my professional growth. Working with a real client and a strong, well-balanced team pushed me to design with greater rigor, clarity, and intention.
I strengthened my ability to build scalable systems, refine complex flows, and make decisions grounded in both user needs and business requirements. Our collaborative process—focused on detail, consistency, and continuous critique—resulted in a polished, dev-ready product that exceeded the client’s expectations.
Overall, this experience increased my confidence as a UX/UI designer and reinforced the importance of teamwork, communication, and thoughtful execution in delivering high-quality work.