Functional Specs & Content Requirements

Process Deep Dive | Vehicle Passport | Stage 2

Form follows Function

It just does. No AI will ever change that. For this stage deep dive, we will assume the product I’m designing, the Vehicle Passport, is a first-generation disruptor. As such, the details of the technical stack and functional layers required to support the new experience concept are to be defined post proof-of-concept. For now, we’ll generalize on the technical stack and functional layers that are likely to be required to support the Vehicle Passport experience.
Blog Posts of Stage 1 AI Experiments
Click here for a list of articles covering various AI experiments supporting, replacing and augmenting Stage 1 work efforts.

Technology: Exploitation

➤ Technology should be exploited in order to:
Reduce (and likely remove) the burden of trade-in valuation distractions, errors and frustrations littering vehicle purchase funnels AND
➤ Technology should be exploited in order to:
Create more personalized transaction experience across buy, sell and trade-in funnels

Technology: Hypothesis

Introducing new Vehicle Passport functionality will likely need to leverage smart car live cockpits, native mobile Apps and other emerging IoT technologies to digitally collect, track, interrogate and manage a vehicle’s static and dynamic data attributes from cradle to grave.
Additionally, it is hypothesized that a digital Vehicle Passport could broadcast sell/buy intentions to the world around it — creating a robust peer-to-peer, crowd-sourced buy/sell network that would drive direct sales engagements.
➤ Examples of Static Attributes (these attributes are ‘hard’ and would not likely change over time due to events, conditions and activities):
VIN, Manufacturer, Origination Date, Year, Make, Model, Vendor, Color, Trim, Extras, Purchase Date (cradle), Sales Agent (cradle), Purchase Location (cradle), etc.
➤ Examples of Dynamic Attributes (these attributes are ‘soft’ and would likely change over time due to events, conditions and activities):
Mileage, Number of Owners, Photos, Trade-In Value, Number of Accidents, After Market Installs, Purchase Date (resell), Purchase Location (resell), Sales Agent (resell), etc.

Technology: From Cradle to Grave

StageImpactsTech DomainPlatformsFront-end Design Systems
Cradle (Birth)Manufacturer
Dealership
Vehicle Cockpit
Dealer Inventory Systems
Firmware Integrations
APIs / Integrations
Manufacturer Installs
--
Retail SaleDealership / Sales Agent
Vehicle Buyer
Dealer Inventory Systems
Native App
APIs / Integrations
Vehicle Passport*
--
Apple iOS (POC)
Ownership & MaintenanceVehicle Owner
3rd Party Service Vendors
Native App
Third-party Platforms
Vehicle Passport*
APIs / Integrations
Apple iOS (POC)
--
Trade-in / ResaleVehicle Owner / Buyer
Dealership / Sales Agent
Native App
Dealer Inventory Systems
Vehicle Passport*
APIs / Integrations
Apple iOS (POC)
--
End-of-LifeDealership
Vehicle Owner
Salvage Yards
City Municipalities
Dealer Inventory Systems
Vehicle Cockpit (firmware)
Third-party Platforms
Third-party Platforms
Manufacturer Hardware
Vehicle Passport*
APIs / Integrations
APIs / Integrations
--
Apple iOS
--
--

Content Requirements

With a clear future-state vision and hypotheses in place, it’s now time to get hands-on by designing experiments and prototypes to validate potential outcomes and consequences. The fidelity of these experiments will vary according to the specific questions we’re addressing and the risks we aim to mitigate. At this stage, AI can quickly deliver a high-fidelity, first-draft functional prototype, providing us a tangible starting point for evaluation and iteration.

Goals

➤ Let AI sweat the small stuff
Let’s kick things off by leveraging Cursor to rapidly build high-fidelity, functional prototypes for each of the key screens that will drive the experience.
➤ Continuous iteration with a focus on initial condition content
Iterate on Cursor’s first draft mock-ups until we’ve achieved a flow that best supports the first-use, initial condition scenario.

Content: 1st Draft

➤ Entering the iterative design cycle
This first draft is about getting traction on a viable MVP as quickly as possible. Instead of crafting low-fidelity wireframes either by hand or using Figma, I jumped straight into code. Details about vibe coding this first draft using Cursor can be found here.
View: Splash
Need to create brand style guide and tone of voice
Cursor Prompt: Generate a splash screen using Apple's recently released iOS 26 user interface components and architecture (Liquid Glass). The splash screen will include the Vehicle Passport logo, lockup text and tagline. When the app has completely loaded, the splash screen automatically loads the "My Garage" view.
View: My Garage
Need to create brand style guide and tone of voice
Cursor Prompt: Generate the "My Garage" view which lists the user's Vehicle Passports. The UI in the "My Garage" view is highly conditional and affordances should be provided to the user to add, modify and delete Vehicle Passports based on those conditions. For now, assume the user has 0 passports.
View: The Market
This view dependent on partner integrations
Incorrect Icon
Tab set is incorrect
Search
Section Blocks
Cursor Prompt: Generate a "The Market" view. This view will calculate and display the valuation of the user's vehicle's based on the Vehicle Passports the user possesses in real time. Markets rise and fall based on various economic, seasonal and demand factors so the valuation of the vehicle should offer the user a graph or chart that shows past valuation, current valuation and projected valuation. This view will need to query third-party tools like Kelly Blue Book and Carfax in order to produce an accurate trade-in valuation.
View: More
This view dependent on partner integrations
Tab set is incorrect
Search
Section Blocks
Cursor Prompt: Generate "More" view that will afford the user access to various secondary and tertiary menu options (to be determined).

Let’s start vibing

➤ Iterating Cursor’s draft 1 effort to flesh out the “initial condition”
Using natural language and a solid grasp of object-oriented programming principles, I began building the interactive and content layers to support a first-use scenario—where the user has zero vehicle passports linked to their profile. I refer to this baseline as the initial condition. Once the initial condition is established for each view, I prompt Cursor to define variables that enable us to iterate through different view states. These states are then governed by conditional logic.

Conditions and variables

➤ Going beyond the “initial condition”
With the initial condition roughly defined for each view, I now ask Cursor to establish some variables that will be used for state management (e.g. IF varX is TRUE then show this state, but IF varX is FALSE then show this other state). Keep in mind, this is not the final design. It’s an iterative draft that is using production-ready code. We can begin to promote the work to stakeholders and even start user research with synthetic AI tools like Delve.ai and Snap.
➤ I asked Claude…
update the Market view and My Garage view to accommodate the following:
- when a user first enters the app, we assume the vehiclePassports variable is set to 0
- when the user clicks the Accept button in the Bluetooth Notification box, we increment the vechiclepassport variable by 1
- The number of cards displayed in the The Market view, should be equal to the vehiclePassports variable
- The number of vehicle passports listed in the My Garage view should be equal to the vehiclePassport variable
View: My Garage
Cursor’s 1st draft
After vibe coding
Left ImageRight Image
View: The Market
Cursor’s 1st draft
After vibe coding
Left ImageRight Image