DVD Corner

Juego arcade para el navegador

Captura real del inicio de S&S Procurement: propuesta de compras anuales sobre un atardecer visto desde un avión
Captura real del inicio de S&S Procurement: propuesta de compras anuales sobre un atardecer visto desde un avión

Reto

S&S Procurement propone optimizar, mejorar y modernizar los procesos de compra de empresas en Chile y Perú. El reto fue expresar esa visión de vanguardia en una web que explicara el servicio y acercara a las personas al catálogo y al contacto comercial.

Inicio real de S&S Procurement en escritorio, con navegación, propuesta comercial y botones para solicitar una propuesta o conocer el servicio

La solución

Desarrollé una propuesta visual propia con referencias de proyectos de empresas europeas y del uso de tarjetas y fichas en sitios premiados por su diseño. Llevé ese lenguaje al servicio de S&S para conectar una experiencia contemporánea con su propuesta de modernizar las compras empresariales.

Catálogo real de S&S Procurement en escritorio: buscador y retícula de computadores móviles, lectores RFID e impresoras

Mi rol

El diseño UX y UI y la propuesta visual son completamente míos. Definí la navegación, la jerarquía de la información y la presentación de tarjetas y fichas, buscando que el recorrido entre conocer el servicio, explorar productos y solicitar una propuesta fuera coherente.

Inicio real de S&S Procurement en móvil: menú compacto, titular y llamadas a la acción apiladas sobre el fondo del atardecer

La experiencia móvil

La versión móvil mantiene el lenguaje visual del escritorio y reorganiza la lectura: menú compacto, mensajes que se ajustan al ancho y llamadas a la acción apiladas. El catálogo conserva la búsqueda y adapta su distribución para recorrer los equipos desde una pantalla pequeña.

Catálogo real de S&S Procurement en móvil: computador Bluebird S20, descripción y botón para ver su ficha en una columna

Estado

El sitio está publicado en sysprocurement.cl y reúne el servicio, el catálogo, casos y contacto. La entrega incluyó revisión de SEO técnico, accesibilidad y rendimiento. Las capturas muestran la web funcionando; el impacto en consultas comerciales y posicionamiento requiere seguimiento con datos reales.

Alguien mira en un portátil el home de Chañares Petshop: un banner de envío gratis sobre veinticinco mil pesos con un perro y dos gatos, y debajo una fila con despacho, pago seguro, cambios y soporte por WhatsApp
Alguien mira en un portátil el home de Chañares Petshop: un banner de envío gratis sobre veinticinco mil pesos con un perro y dos gatos, y debajo una fila con despacho, pago seguro, cambios y soporte por WhatsApp

Reto

Chañares vende alimento, accesorios y farmacia para perros y gatos en Concepción. Quien compra ahí no quiere navegar: quiere encontrar su producto, agregarlo y pagar. El reto fue que la tienda se viera como un escaparate completo sin estorbar esa línea recta, priorizando mobile sobre escritorio.

La solución

No construí la tienda de cero: la rediseñé. Primero la ficha de producto, después el home y las categorías. En paralelo revisé la semántica del HTML, los textos alternativos de las imágenes y el rendimiento, y sumé pasarelas de pago.

Mi rol

Trabajé directo con el cliente de principio a fin: reuniones de levantamiento, research de competencia y público, y definición de tono de marca. Diseñé la experiencia y la interfaz de las tres vistas, las imágenes de producto y la paleta de colores.

Cómo se construyó

Del boceto en papel a Figma, y de ahí a los módulos, implementados con Claude Code y ajustados a mano en el editor de Shopify sobre un tema gratuito. Descarté las apps de terceros: pesan en el rendimiento y le cobran una mensualidad al cliente.

Resultados

El sistema de módulos propio deja que el cliente administre y personalice la tienda solo, sin curva empinada. Después del rediseño volvieron clientes antiguos, las ventas superaron el promedio habitual de la tienda y subieron las visitas orgánicas. Dos meses de trabajo, en 2026.

Captura real de DVD Corner: pantalla de inicio dentro de un televisor CRT en una habitación oscura
Captura real de DVD Corner: pantalla de inicio dentro de un televisor CRT en una habitación oscura

Reto

El logo de DVD rebotando en una pantalla convierte una espera mínima en suspenso: ¿tocará la esquina? Quise transformar ese recuerdo en un juego de habilidad para el navegador, con una regla sencilla y una estética que conservara la sensación de mirar un televisor antiguo.

Partida real de DVD Corner en escritorio: el disco y el logo dentro de la pantalla curva del televisor

La solución

Un disco permite desviar el logo hacia las cuatro esquinas antes de que termine cada cuenta regresiva. La interfaz CRT reúne pantalla curva, luz y textura retro. El tiempo total ordena la clasificación, con un ranking semanal y otro histórico para volver a intentarlo.

Partida real de DVD Corner en móvil: pantalla a todo el ancho, disco táctil y contadores de tiempo y esquinas

Mi rol

Dirigí la experiencia y las iteraciones visuales, probé la dificultad y ajusté el tamaño del disco, las esquinas y la pantalla en móvil. Las pruebas de juego mostraron diferencias entre dispositivos: por eso pedí separar sus puntajes internamente, sin agregar controles a la interfaz.

Cómo se construyó

El código se desarrolló con IA generativa, a partir de mis instrucciones y revisiones de cada versión. Dirigí los ajustes de interacción, presentación y clasificación. El juego corre en el navegador y guarda los resultados en el servidor; mi aporte está en orientar y evaluar esas decisiones.

Estado

DVD Corner está publicado y sigue recibiendo ajustes a partir de las partidas. Tiene controles de ratón, teclado y tacto, cinco idiomas y clasificaciones independientes por dispositivo. La revisión más reciente afinó los períodos del ranking y el recorrido para volver a jugar después de registrar un resultado.

Una retícula en diagonal sobre rojo con Metrodle corriendo en distintas ciudades e idiomas: se reconocen Santiago, Madrid, Buenos Aires, São Paulo, Londres, Nueva York, Ciudad de México, Roma y Tokio
Una retícula en diagonal sobre rojo con Metrodle corriendo en distintas ciudades e idiomas: se reconocen Santiago, Madrid, Buenos Aires, São Paulo, Londres, Nueva York, Ciudad de México, Roma y Tokio

Reto

Me gustan el Metro de Santiago y los juegos cortos, los de un descanso de oficina. Metrodle junta las dos cosas: toma la mecánica ya conocida de Wordle y la aplica a algo con lo que tengo conexión propia, en vez de inventar reglas nuevas.

Una mano sostiene un teléfono con Metrodle CL abierto: el viaje del día va de 'Vicuña Mackenna' a 'Universidad Católica' y abajo espera la grilla de intentos

La solución

Cada día aparecen un origen y un destino, y hay que adivinar en orden las tres líneas que los unen con dos transbordos. Verde, amarillo y gris marcan cada intento igual que en Wordle. Seis intentos en el modo diario; el modo libre no pone límite.

Metrodle CL abierto en un portátil de noche, con cuatro intentos ya jugados: cuatro filas de tres fichas de línea, y en la última la ficha verde de la línea 5 en su posición. Al fondo, un televisor con un partido

Mi rol

Diseñé el concepto, la interfaz y la dificultad, y dirigí los prompts que generaron el producto. El dataset incluye líneas y estaciones de once ciudades cruzando fuentes públicas con información de foros. Además realicé pruebas con testers externos para calibrar el juego. El QA lo hago yo.

Primer plano en diagonal de la tarjeta del viaje del día en Metrodle JP: de Akebonobashi a Tameike-Sanno, con la instrucción 'Encuentra la ruta de 3 líneas del día' debajo

Cómo se construyó

El frontend y el backend los generó IA generativa a partir de mis especificaciones: el concepto salió de Lovable y el diseño de Figma. Marcos Cifuentes Salazar revisó el código y la seguridad. Mi aporte técnico está en dirigir esa generación, no en escribir el código.

Una mano sostiene un teléfono con Metrodle CL en modo Libre dentro de una estación del Metro de Santiago: al fondo, el túnel amarillo y los pasajeros caminando por el andén

Estado

Metrodle está en v1, con desarrollo y revisión de código en curso. Cubre once redes de metro en seis idiomas, y la identidad mezcla la señalética del Metro de Santiago con los colores de cada ciudad. No pide cuenta: el progreso queda en tu dispositivo.

Una mano sostiene un teléfono con Metrodle JP en japonés, de Shibuya a Monzen-Nakacho, en medio del cruce de Shibuya de noche
Impresora térmica Papelito con forma de gato sobre un fondo rosa
Impresora térmica Papelito con forma de gato sobre un fondo rosa

Reto

Jira y Trello resuelven el trabajo de un equipo: configuración, permisos, notificaciones. Para anotar y mover cinco tareas del día, ese peso sobra. Papelito atiende ese caso puntual: un kanban personal para tareas cortas, sin curva de aprendizaje.

Pantalla de inicio de Papelito: sobre un fondo rosa, el titular 'Toca la impresora para empezar' y la mascota —mitad impresora térmica, mitad gato— esperando el primer toque

La solución

Un tablero de columnas donde cada tarea se arrastra y se suelta como un papel sobre la mesa. Al crearla, la interfaz simula la impresión de un ticket térmico —el de las boletas de cualquier negocio chico— y una mascota mitad impresora mitad gato le pone cara al producto.

Seis versiones de la mascota de Papelito en dos filas sobre fondo rosa, cada una con una expresión distinta: ojos de corazón, ojos cerrados y ojos muy abiertos

Mi rol

Definí el problema y el concepto, boceté el flujo en papel y lo llevé a wireframes y definición visual en Figma. Diseñé la mascota y sus expresiones con apoyo de IA generativa. El QA lo hago a mano y sigue abierto.

Un único campo de texto sobre la mascota con la tarea 'Cocinar el almuerzo de mañana' escrita y un botón de flecha para imprimirla

Cómo se construyó

El frontend y el backend se generaron con IA generativa, a partir de especificaciones y prompts que escribí yo, iterando hasta obtener el comportamiento esperado. Mi aporte técnico está en dirigir esa generación con criterio de UX, no en escribir el código línea por línea.

Estado

Papelito está en v0 y en desarrollo activo: dedico sesiones diarias al responsive y a la accesibilidad. Corre en Vercel, guarda todo en el navegador y no pide cuenta. La premisa es la de las impresoras térmicas chinas: bajo costo, alta utilidad.

Retrato animado de Pedro Pablo Fernández

Sobre mí

Soy Pedro Pablo Fernández, UX Researcher en Santiago de Chile, con foco en accesibilidad web y UX writing.

Vengo del periodismo: ahí aprendí a preguntar, a mirar en terreno y a encontrar lo que otros pasan por alto.

Levanto información con usuarios reales, audito sitios contra las pautas WCAG 2.2 y traduzco cada hallazgo en decisiones concretas de producto.

Hoy investigo en proyectos públicos, donde una barrera de accesibilidad limita el acceso al espacio público y convierte la inclusión en un desafío concreto.

Creo en el diseño como una herramienta para ampliar el acceso, no sólo para mejorar la apariencia. Porque, en definitiva, la accesibilidad es usabilidad para todos.

Contacto

Correo electrónico
ppferrod@gmail.com
Ubicación
Santiago, Chile · remoto o híbrido

Experiencia

  • UX Researcher / Analista Informático

    ACTIS · Gobierno Santiago

  • Consultor en UX y Diseño web

    Independiente

  • Marketing & Communications Manager

    Araya & Cía Abogados · Chile y Colombia

  • Digital Manager

    BetaSnow

  • Encargado de Comunicaciones

    Quiero Mi Barrio · MINVU

  • Encargado Corporativo de Comunicaciones

    Marina del Sol

Formación

  • Diseño UX/UI

    Desafío Latam

  • Periodismo

    Universidad de Concepción

Certificaciones y cursos

  • How To Design for Accessibility: for UX Designers (WCAG 2.2)

    Udemy

  • Lenguaje Claro

    Consejo para la Transparencia

  • Implementación y adecuación del plan de transformación digital

    GobDigital

  • Product Owner / Scrum

    CertiProf

  • Diseño de la Experiencia UX

    Universidad de Chile, Esc. de Postgrado

  • Product Owner Essentials

    Universidad de Chile, Esc. de Postgrado

  • IA Generativa para el Sector Público

    CENIA

  • Generative AI Essentials: LLMs to Work with Data

    IBM SkillsBuild

  • SEO y Content Marketing

    Santander Open Academy

  • SEO Intermedio y SEO para Redactores

    Crehana

Idiomas

Español
Nativo
Inglés
Intermedio (B1)