Gabriel Naranjo

A Real Problem

The website was originally designed as a funnel redirecting users to sales reps via WhatsApp, which severely delayed customer service."

  • Critical Score: 1.9/5.0 in the local benchmark (the lowest in the market, compared to Derco at 3.4 and Bruno Fritsch at 3.2).
  • UX Failure: The site failed simultaneously at a major financial decision (buying a vehicle) and at fast service management (booking maintenance).
  • Crisis of Trust: It hid information, fragmented the brands, and forced users to resolve everything via WhatsApp instead of enabling digital autonomy.
1. Strategic Context: Competing in a Fragmented Market
Aventura Motors
DercoCenter
Bruno Fritsch
CarMax
  • Mixed Competition: Users compare the platform against marketplaces (Kavak, MercadoLibre) and against the official websites of each manufacturer (e.g., Mitsubishi.cl).
  • The Gap: The benchmark revealed that Derco won on price transparency and Bruno Fritsch on product presentation. Neither offered both.
  • Competitive Advantage: Aventura couldn't compete as a massive catalog; the strategy focused on offering what a marketplace cannot replicate: institutional trust, expert advice, and an integrated service ecosystem.
2. Definition: Two Users, One Central Tension

The design had to solve the needs of two opposite profiles without sacrificing the experience of either:

  • The Buyer (Ages 35–55): Researches new or used SUVs. Requires high trust, extensive photography, transparent pricing without 'fine print', clear specifications, and institutional validation.
  • The Existing Customer (Ages 25–65): Needs to book a service from their mobile device in under 3 minutes. They aren't looking for inspiration; they demand an ultra-fast, direct, and frictionless transactional flow.
3. Benchmark and Visual Analysis
  • Methodology: Task-Flow Analysis and a comparative matrix of 6 categories with 24 variables across 7 websites (5 local, 2 international), synthesized using AI.
  • References by Value Proposition: 
    • Catalog Filters: Carmax and Autonation.
    • VDP and Specs: Bruno Fritsch and Apple.
    • Multi-brand Architecture: Movistar.
    • Trust and Pricing: Derco.
    • Booking/Scheduling: Airbnb.
    • Legibility and Hierarchy: Volvo (using white space as a cue for trust, and clean content hierarchy).
Benchmark: final results and detailed analysis
Visual analysis: elements and brands
4. Architecture and Wireframes
  • Approved Key Solutions: 
    • Mega-menu featuring sub-modules categorized by vehicle type and brand.
    • Financing calculator integrated directly into search results.
    • Optimized filter system for used cars.
    • VDP (Vehicle Details Page) with specifications structured into tabs.
    • Service booking flow given the same hierarchical weight as the commercial catalog. 
  • Legacy Fixes: Eliminated the endless homepage carousel; created specific landing pages per promotion to allow the business to measure real conversion rates.
General view of the information Architecture and approved wireframe
Financial calculator and Mega menu
Used cars search results with special filters and VDP (Vehicle Details Page) trim specs tabs
Car mantainence scheduler and new sales' landing page
5. Design System: The Neutral Container

The challenge was to create a single visual system capable of housing six radically different identities (e.g., Subaru's rugged outdoor tone vs. Kaiyi's tech-focused vibe) without competing with them.

5 Fundamental Principles of the System:

  • System Over Showmanship: Consistent tokens for color, type scale, and spacing prioritized over any decorative animation.
  • Native Accessibility: WCAG 2.2 AA implemented from the ground up, not as a final review.
  • Mobile-First: Mobile experience designed as the priority; the desktop version was built as an extension.
  • Hierarchy Over Decoration: Absolute visual priority given to pricing, CTAs, and key technical data.
  • Trustworthy Before Eye-Catching: A sober aesthetic that conveys institutional credibility for a high-consideration purchase.
Design System: grid and typography
Design System: color tokens
Design System: buttons
6. The Two Visual Proposals

Two strategic paths were presented and tested across three critical screens (Homepage, Used PLP, and New VDP):

  • Proposal A (Editorial / Aspirational): Focused on conversion and approachability. Large hero photography, character-driven typography, generous spacing, and copywriting oriented around Jobs-to-be-Done (using verbs in navigation). The car as an object of desire. (Refs: Arnold Clark, Carmax, Zillow).
  • Proposal B (Premium Monochrome): High-end transactional focus. Pricing, stock, and CTAs visible within the first scroll. Dominant UI typography, less lifestyle photography, and more actionable data. Technical and precise copywriting. (Refs: Volvo, N26, Mr Porter).
Proposal A: Aspirational
Proposal B: Premium
Results and Takeaways
  • Scalable Infrastructure: Delivered a modular component system designed to withstand catalog changes, new brand additions, and promotional campaigns for the next 3 to 5 years without breaking.
  • Design with Purpose: Designing for both $30 million and $30,000 price points on the same site isn't solved by prioritizing one flow over another, but by accepting the tension and creating an architecture that allows both to coexist.
  • Neutrality Requires Rigor: Creating a 'neutral container' that steps back to elevate the manufacturer's brand demands much stricter design control than building a traditionally flashy website.
  • Long-Term Risk Mitigation: Accessibility issues, visual inflation from competing brands, and promotional clutter are resolved at the component stage, not during the final hand-off.
Go to Kidō →
Gabriel Naranjo
logo linkedin