OOROO Auto: Product Design for Mobile Auto Repair
Designing a cross-platform system for on-demand auto service.
OOROO Auto offers mobile auto repair—bringing certified mechanics straight to your driveway or workplace. I was tasked with designing a browser-based and app experience that made it easy to manage your vehicle, schedule service, and track loyalty rewards.
From login to payment confirmation, I built out a seamless end-to-end flow with components that prioritized clarity, speed, and trust. The final system was designed to support both casual users and repeat customers with full account management and flexible service scheduling.
Role
UX & UI Designer
Scope
User flows, Interfaces, and a Scalable Component Library for OOROO’s repair platform across a mobile application and desktop experience
Agency
Hydrant
Design Process
1 | Map the Full Service Journey
I started by breaking down the customer journey—from logging in and managing their vehicle info to selecting services and scheduling a repair. This helped identify key moments where clarity, flexibility, and reassurance were most important.
2 | Design System Creation
I built a robust component library to support form fields, interactive elements, content cards, and progress indicators. This made it easy to maintain consistency across web and app platforms while allowing flexibility in future development.
3 | High-Fidelity Prototypes
Each screen was designed in high fidelity, showing real data for vehicles, appointment scheduling, and rewards tracking. I also created state-based mockups for in-progress elements.
Project Goals
Create an intuitive scheduling flow for mobile auto repair appointments.
Allow users to manage vehicle info and preferences within their account dashboard.
Integrate a loyalty rewards system to build customer retention and add value.
Ensure consistency across browser and app experiences with a shared design system.
Reduce support inquiries by designing accessible, self-service flows like forgotten password, rescheduling, and payment management.
Key Performance Indicators
Reduced drop-off rate during scheduling flow.
Increased number of completed bookings from returning users.
Higher engagement with loyalty rewards system.
Fewer support tickets related to account management or scheduling.
Positive feedback on ease of use in post-service surveys.
User Research Insights
Users wanted transparency and control. Clear timelines, pricing, and service summaries were essential to building trust.
Repeat customers needed account features. Many users had multiple vehicles or repeat needs, making a robust dashboard critical.
Loyalty rewards were a strong incentive. Users responded positively to discounts and perks, but needed an easy way to track and redeem them.
Scheduling flexibility was key. Being able to pick a time, reschedule, or leave notes for the technician helped reduce stress.
Color & Typography
The palette was designed to feel approachable and trustworthy—centered around OOROO’s bright blue, clean white, and energetic yellow. Blue was used for primary actions and navigation, while yellow served as a vibrant accent to highlight CTAs and loyalty points. Their typography is clean and highly legible, with a system built for responsiveness across devices. Headers, subheads, and form labels followed a tight hierarchy to help users move quickly through each task with confidence.
UI Elements & Information Hierarchy
I created a flexible component library to power both the browser and app versions of the experience. This included styled input fields, buttons, cards, radio buttons, checkboxes, a custom progress bar, and ad-ready content cards. Visual hierarchy was reinforced through thoughtful spacing, color weight, and interaction states—making the system scalable, accessible, and easy to update across evolving features.
TL;DR
Used OOROO’s blue, white, and yellow palette to build trust and guide user attention
Applied a clear typographic hierarchy for fast, intuitive navigation
Designed a flexible component library for use across web and app
Included reusable elements like buttons, form fields, cards, and progress bars
Prioritized accessibility, responsiveness, and scalability in the visual system
