Design Philosophy and Target Audience Analysis
Autosense: AI-Powered Acoustic Vehicle Diagnostics
What is it?
AutoSense is a mobile-web interface designed to diagnose mechanical vehicle malfunctions through acoustic analysis. It separates user-provided audio recordings into frequencies using digital signal processing (DSP) techniques and matches this data with known failure patterns to generate a technical report. It is engineered as a preliminary assessment tool for drivers who lack access to professional diagnostic equipment.
Design Philosophy and Target Audience Analysis
While designing this application, I defined my target audience not as a group that sees driving as just turning the ignition, but as conscious drivers who know their vehicle, track increases in fuel consumption, and notice rhythmic irregularities in engine sound or loss of traction.
For this user profile, the technical data presented in the interface or the questions asked prior to analysis are not a "cognitive load"; rather, they are the data control points required to reach an accurate diagnosis. The application aims to rationalize the decision-making process before visiting a service center by combining the user's existing automotive knowledge with AI analysis. This project in my portfolio should be evaluated as a tool engineered to meet the technical expectations of this conscious user group.
.png)
Application Flow and Logical Structure
-
Scenario-Based Onboarding: Informational screens with parallax depth effects that contextualize the mechanical issue faced by the user, such as engine noise or loss of power.
-
Technical Data Collection: Dynamic question sets that gather technical variables supporting the analysis, including idle state, RPM range, and dashboard warnings.
-
Process Visualization: A status tracking screen that transparently displays the frequency analysis (spectrogram) and processing steps occurring in the background.
-
Hierarchical Reporting: Results categorized by fault description, accuracy percentage, safety score, and related mechanical components (ignition coils, spark plugs, etc.).
Technical Implementation Details
-
Accessibility (WCAG 2.2 AAA): Developed with aria-label attributes, focus-visible controls, and a screen-reader-friendly semantic HTML structure.
-
Responsive Scaling: Dynamic adaptation of the fixed 402×874 mockup structure to different device resolutions using CSS transform properties.