01 — Context & Problem
A real-time marketplace with friction in all the wrong places.
MUV operates a ride-hailing platform where passengers and drivers interact through a real-time system with multiple states and edge cases.
The existing experience showed friction in key moments of the journey, especially during onboarding, ride request and ride status feedback. This generated confusion, slower time to first ride and higher cognitive load for users.
✓
Optimize flows
High onboarding abandonment rate. Reduced from 21 to 6 steps, improving completion rate from 25% to 36% (+11pp).
✓
Increase acquisition driven by ecosystem
New technical foundations to ensure the app is visually appealing, functional, reliable, and prepared to evolve.
✓
Scalability between Passenger & Driver
Architecture designed to enable future expansions and greater operational efficiency.
02 — Goals & Success Criteria
Design a ride-hailing experience that balances clarity, feasibility and scalability.
The objective was to design a ride-hailing experience that balances user clarity, technical feasibility and system scalability.
↓Reduce time to first successful ride
↑Make ride states explicit and predictable at every moment
↑Clarity of real-time feedback during matching and in-trip
↑Display promotions throughout (Ueno Bank — 40% rebate with credit, 20% debit)
↑Align UI logic directly with backend ride states
↑Create a reusable component system for future features
03 — Metrics Now
Our metrics now.
We stabilized the legacy application and created ecosystem initiatives — preparing muv to become the most used mobility platform by users in the group's ecosystem. Demand · Supply · Marketplace.
2.2M+Trips Q4 · Baseline 30K in 2024
+28% ecosystem initiatives
6K+Drivers · Baseline 1K in 2024
39KPassengers Q4 · Baseline 2K in 2024
40.1MGMV Q4 (Gs.) · Baseline 1.173K
59%Registered making their first trip
52%Retained to the fourth trip
69%+Trip intention → 85% complete it
60%Completion rate
+11ppOnboarding completion rate
04 — The Design Process
Structured and iterative — reduce ambiguity early, validate logic before visual polish.
01
Research & benchmark
Competitive analysis. Problem framing and constraints analysis with product and engineering teams.
02
User flows & state definition
State-driven flow mapping. Every UI state directly reflects a backend status — critical in real-time products.
03
Wireframes
Low-fidelity wireframes to validate hierarchy, information priority and state transitions before visual design.
04
User test
Two proposal rounds tested with real users. Key insight: strong preference for map-based home with nearby vehicles.
05
UI design aligned with system logic
High-fidelity UI. New 60/30/10 color system, redesigned typography, icon system, motion and photography guidelines.
06
Design system & handoff
Component-driven layout. Figma Dev Mode for visual QA — comparing design vs development with annotated comments.
05 — User Flows & State Management
Core flows to re-design.
Given the real-time nature of a ride-hailing product, defining clear ride states was critical. I mapped the full passenger journey as a state-driven flow, ensuring each UI state directly reflects a backend status.
🚀
Onboarding
Integration with UNID. Communication of the value proposition. Ensuring passengers understand the app's benefits from start to finish. Basic profile setup.
🏠
Home & Navigation
Implement a hybrid navigation model. Map-first home with nearby vehicles visible immediately.
🗺️
Trip / Send Flow
Improvements in UX/UI, microinteractions, dynamics, and delightful moments. Request → Matching → Driver assigned → Ride in progress → Completed/Cancelled.
❤️
Review
New reviews section to gather more information and improve the product based on user feedback.
Secondary flows
My accountFavoritesPayment methodMy tripsPromotions
06 — Key Design Decisions
Three decisions that defined the product direction.
01
Explicit ride status feedback
To reduce uncertainty, the interface always communicates the current ride state, even during waiting periods — "Esperando confirmación del conductor... Ampliando radio de búsqueda", "Juan empezó tu viaje", "10 min para llegar a la parada".
02
Rethink the app's color system
We needed to create new colors, more balanced and harmonious. Applied the 60/30/10 rule — the previous system lacked balance.
03
Component-driven layout
Screens designed using reusable components to ensure consistency and scalability. Typography, icons, colors, motion, layout, tokens, photography guidelines — all defined as part of the system.
07 — User Test
Insights & validation: what did our users say?
Proposal A — Not selected
Photo-based home
List-based layout with hero photography. Users felt it lacked spatial awareness — didn't help them understand where vehicles were relative to their position.
✓ Proposal B — Clear winner
Map-first home
"There was a clear preference for the home screen that displays a map with the location and nearby vehicles." Users felt immediately oriented and confident.
08 — Onboarding Flow Optimization
From 21 steps to 6. The reduction that changed everything.
The reduction in steps translates into an improved completion rate, allowing the value proposition to be showcased from the outset.
21→6Steps reduced in onboarding flow
+13ppIn the conversion rate
+49%Acquisition of new users
09 — Design System & Documentation
Built to scale. Documented to ship.
Documentation was designed to reduce ambiguity and align design decisions with system behavior. Used Figma Dev Mode to compare designed vs developed versions, leaving annotated style comments.
Typography
Icons
Colors
Motion
Layout
Tokens
Photography
Alerts & Toast
Service cards
10 — Gant Design & Development
Agile and organized, step by step.
We created a Gantt chart that would allow us to build the product in an agile and organized way, moving forward step by step with the commitment of the entire team.
11 — Goals 2026
From 40.1M GMV in Q4 to 94.6M in 2026.
New Passenger App + UNID (Centralized login within the ecosystem)
Integrated Ueno Bank payment method
Positive commission across Paraguay
Driver App stabilization
Automatic dynamic pricing
12 — Learnings
What designing a real-time marketplace taught me.
State management IS the design. In a ride-hailing product, the most important design decisions aren't visual — they're architectural. Mapping every possible state before opening Figma saved weeks of rework and produced a more coherent experience end-to-end.
Test direction, not detail. The user test insight about map vs. photo wasn't about visual preference — it was about mental model. Users think spatially about transportation. Designing against that mental model creates friction no amount of polish can fix.
Visual QA in Figma Dev Mode changes the relationship with engineering. Annotating the gap between design and implementation directly in the file turned QA from a confrontation into a collaboration. The product quality improvement was measurable.
