top of page

Trace App

Bringing Transparency to Car Servicing

My Role

UX UI Designer

Tools used

Figma, Miro, Typeform, G meet

Duration

4 months

shot 65.png

Overview

Trace is an app that allows car owners to remotely track their vehicle’s service through live video streaming from a robot at the service center. The app provides real-time updates on the service process, notifies users upon completion, and lets them choose whether to pick up the car or have it delivered. It also stores service history for future reference.

Research Phase

Problem Discovery

The idea for Trace stemmed from a family member’s concern about whether their car was being serviced properly. This led me to investigate further, and I discovered that many car owners, particularly luxury car owners, share this concern.

To validate the problem, I conducted qualitative user research, which included:
🔍 Forum Research – Scanned online discussions to identify common concerns.
📝 User Questionnaire – Designed screening questions to recruit participants.
🎤 User Interviews – Conducted 2 in-depth interviews to gather first-hand insights.

Screenshot 2025-03-22 at 1.08.42 PM 1.png

Affinity Mapping & Empathy Mapping

After gathering responses, I synthesized findings using:

  • Affinity Mapping – Grouped user concerns into key themes.

  • Empathy Mapping – Mapped out what users say, think, feel, and do regarding car servicing.

Key User Findings

  • Need for Proof of Service – Users want credible evidence that their vehicle was properly serviced.

  • Desire for Transparency – Users expect to be informed about the service progress.

  • Service Timeline Updates – Users want clear time estimates and notifications for completion.

  • Verification of Work Quality – Users need assurance that the service was done correctly.

  • Trust in Mechanics – Many feel uncertain about their mechanic’s reliability.

  • Concerns About Vehicle Misuse – Users fear their car could be mistreated while at the service center.

Ideation Phase

User Stories & User Goals

To define a solution that truly meets user needs, I created:

  • User Stories – Scenarios illustrating how different users interact with the app.

  • User Goals – Clear objectives based on user needs and motivations.

  • Visuals: User Stories & User Goals

user stories and golas.png

Concept Exploration

I explored existing solutions but found no service tracking solutions using live video. This led to the idea of a robot that follows the car and streams the service process live.

To visualize how the user would interact with the app, I created:

Storyboards – Illustrated scenarios showing how a user tracks their car service.

storyboard.png

Design Strategy

Key Features

  • Live Video Streaming – Users can watch their car being serviced in real time.

  • Step-by-Step Updates – Each completed service stage is logged.

  • Time Estimates – Users see how long the service will take.

  • Notifications – Alerts are sent when the car is ready.

  • Chat with Service Manager – Users can ask questions directly.

  • Car Service History – Past records are stored for reference.

  • Pickup or Delivery Option – Users choose how to receive their car post-service.

UI & Design Phase

User Flows Designed:

  • Sign-up & Robot Sync – Users onboard and link their car to the robot.

  • Home Screen & Live Tracking – Displays service progress and real-time video.

  • Trace Video Feed – Lets users view their car’s service live.

  • Pickup & Delivery Flow – Allows users to retrieve or request car delivery.

Wireframing the User Flows

I began the UI design by sketching rough paper wireframes before transitioning to digital wireframes. I iterated multiple times to refine the layout and interactions.

High-Fidelity UI Design & Design System

I then developed high-fidelity UI screens, ensuring a clean, intuitive, and modern design.

Walkthrough

The App Prototype takes users through the happy path, starting from the splash screen to entering car details and syncing with the robot. It then flows seamlessly into live video tracking, followed by the service completion screen, where users confirm pickup or delivery.

Main screens

These include the Home Screen for a quick service summary, the Trace Screen for step-by-step details, the Live Video Screen for real-time tracking, and the Profile Screen for storing service history.

Pick up or Delivery screens

The Service Completed Screen notifies users when their car service is done, allowing them to choose between self-pickup or delivery. In self-pickup, users select a time and view the service center’s address, while in delivery, they enter or select an address on a map—both leading to a confirmation screen with options to reschedule or update details.

Car Data and Sync Screens

The Car Data & Robot Sync Flow starts with an empty state, where users select their car details from dropdown menus. Once all data is entered, they scan a code from the robot to connect, leading to a success screen confirming the setup is complete.

I also created a design system with:

  • Color Styles – Consistent branding and readability.

  • Typography – Optimized for clarity.

  • Components – Buttons, cards, and icons for developer handoff.

Next Steps

Usability Testing & Refinements

The next phase involves usability testing to evaluate the effectiveness of Trace’s design. Key areas to test include:

  • Ease of navigation – Can users quickly find service updates and the live video feature?

  • Comprehension of service steps– Do users understand each stage of the service process?

  • User confidence & trust– Does the app improve their trust in the service?

  • Feature refinements – Identify any usability issues that need improvement.

Outcome & Learnings

What I Learned

Designing Trace from scratch taught me:

  • How to conduct research-driven design that directly addresses user pain points.

  • The impact of empathy mapping, affinity mapping, and user stories on crafting user-centered solutions.

  • How to balance technology, usability, and automation to enhance user experience.

  • The importance of a clear, intuitive UI in making complex ideas easy to use.

This project reinforced my passion for solving real-world problems through thoughtful UI design. It was exciting to build a solution that not only enhances transparency but also improves the overall service experience for car owners.

bottom of page