Sitio corporativo · UX/UI · Catálogo de servicios

FL Aire Acondicionado

FL Aire Acondicionado Automotriz repara, instala y equipa sistemas de climatización para vehículos y transporte refrigerado hace más de 19 años en Lima. El proyecto consistió en diseñar la interfaz y experiencia del sitio que presenta sus dos líneas de servicio — automotriz y refrigeración — y organiza su catálogo de repuestos y equipos.

imagen principal — producto en contexto, full bleed
Cliente FL Aire Acondicionado
Año 2023
Mi rol UX/UI Designer
Servicios UX · UI · Diseño responsive

El proyecto

Un catálogo de servicios técnicos que necesitaba verse tan confiable como el trabajo que representa

FL Aire Acondicionado Automotriz es una empresa peruana con más de 19 años de experiencia en climatización para vehículos y equipos de transporte refrigerado, además de importadora directa de repuestos y equipos de marcas como DONGIN THERMO.

Mi trabajo se enfocó exclusivamente en el diseño de interfaz y experiencia (UI/UX) del sitio — no participé en su construcción — ordenando dos líneas de servicio técnico muy distintas (automotriz y transporte refrigerado) en una sola navegación clara.

El reto

Dos rubros técnicos distintos — automotriz y transporte refrigerado — bajo una sola marca creíble.

Usuario

Dueños de flotas y talleres buscando un proveedor técnico confiable, no solo un catálogo de productos.

Producto

Venta de repuestos, instalación de equipos y mantenimiento — servicios con procesos y urgencias distintas, en dos rubros (automotriz y refrigeración).

Restricción

Comunicar 19 años de experiencia técnica sin que el sitio se sintiera anticuado.

Entender antes de diseñar

Antes de diseñar, revisé cómo FL presenta hoy sus dos rubros — aire acondicionado automotriz y transporte refrigerado — y qué tan clara era la diferencia entre venta, instalación y mantenimiento en cada uno.

01

Automotriz y Refrigeración comparten estructura (venta, instalación, diagnóstico y mantenimiento) pero se dirigen a públicos distintos: dueños de vehículos particulares versus flotas de transporte.

02

La experiencia de 19 años y el trabajo como importador directo son argumentos de confianza fuertes, pero estaban repartidos en varios párrafos de texto en vez de comunicarse de un vistazo.

03

Cada servicio (venta de repuestos, instalación, diagnóstico, mantenimiento) necesitaba su propio espacio, en vez de vivir mezclado en un solo bloque de texto.

No estábamos vendiendo aire acondicionado — estábamos vendiendo la tranquilidad de no quedarse varado con la carga o el vehículo parado.

imagen — auditoría de pantallas / mapa de uso

Decisiones que definieron el sitio

01

Automotriz y Refrigeración como dos rutas claras, no una mezcla

Separé la navegación principal en dos líneas de servicio (Automotriz, Refrigeración), cada una con su propia página de venta, instalación y mantenimiento — en vez de un solo catálogo genérico.

Cada cliente busca una sola de las dos cosas, no ambas.

visual — flujo de aprobación progresivo
antes
después
visual — tabla como espacio de trabajo
02

Los años de experiencia, al frente

Llevé los 19 años de experiencia y la condición de importador directo al inicio del sitio, como parte del mensaje principal, no como un dato dentro de "Nosotros".

La confianza técnica es el primer argumento de venta, no el último.

03

Cada servicio con su propio bloque

Dentro de cada línea (Automotriz, Refrigeración) diseñé bloques separados para venta, instalación y mantenimiento, con su propia descripción — en vez de un párrafo continuo mezclando los tres.

Un cliente con una falla no busca lo mismo que uno buscando comprar un repuesto.

visual — hilo de contexto en el detalle

Exploración

Antes de separar Automotriz y Refrigeración como dos secciones independientes, probé formas de organizar los mismos tres servicios (venta, instalación, mantenimiento) sin duplicar la estructura dos veces.

arrastra →
v1 — un solo catálogo mixto
Mezclaba automotriz y refrigeración en una sola lista — obligaba a leer todo para encontrar lo propio.
v2 — filtro por tipo de vehículo
Más preciso, pero agregaba un paso antes de ver cualquier servicio.
v3 — pestañas por servicio
Organizaba bien el proceso, pero perdía la diferencia entre automotriz y refrigeración.
v4 — dos secciones, mismo patrón interno
La dirección final: Automotriz y Refrigeración como rutas separadas, cada una con la misma estructura interna de venta, instalación y mantenimiento.

El producto

Un sitio dividido en dos rutas claras — Automotriz y Refrigeración — donde cada una explica venta, instalación y mantenimiento con la misma estructura, sin mezclarse entre sí.

pantalla completa — panel principal
detalle — tabla editable
mobile — aprobación

Cada bloque de servicio (venta, instalación, mantenimiento) se apila en mobile manteniendo el mismo orden que en desktop, para no perder la lógica del proceso.

detalle — estados
detalle — filtros
video — microinteracción

Una identidad técnica que también inspira confianza.

Trabajé sobre la identidad ya existente de FL (azul profundo, acento celeste, estética técnica), llevándola a un sistema aplicable a sus dos líneas de servicio.

visual — anatomía de componente y estados
Color

Azul profundo como base corporativa, celeste como acento para llamados a la acción y momentos técnicos destacados.

Tipografía

Titulares en mayúsculas con tono técnico e industrial, legibles incluso a distancia en pantallas de taller.

Bloques de servicio

Venta, instalación y mantenimiento con el mismo formato visual en Automotriz y Refrigeración — comparables entre sí.

Responsive

La navegación entre las dos líneas de servicio simplificada en mobile, priorizando "Automotriz" y "Refrigeración" como primer paso de decisión.

Resultado

Un sitio donde un dueño de flota y el dueño de un auto particular encuentran, cada uno, exactamente el servicio que necesitan — sin leer de más.

La separación Automotriz / Refrigeración se convirtió en la estructura base para cualquier contenido nuevo que la empresa agregue.

Los 19 años de experiencia y la condición de importador directo pasaron de ser un párrafo en "Nosotros" a ser parte del mensaje principal del sitio.

Lo que me dejó este proyecto

01

Cuando una empresa técnica atiende públicos distintos (particulares vs. flotas), separar la navegación desde el inicio evita que ambos se sientan mal atendidos.

02

La experiencia y las credenciales técnicas (años en el mercado, ser importador directo) funcionan mejor como parte del mensaje principal que como contenido secundario en "Nosotros".

03

Diseñar solo la capa de UI/UX en un sitio técnico exige entender bien el vocabulario y el proceso real del rubro, para que la estructura tenga sentido para quien de verdad lo usa.

¿Tienes un proyecto en mente?

Hablemos →
Siguiente proyecto

Ver más