Saltar al contenido

Prifamon

Una web institucional y un catálogo que el cliente puede mantener por su cuenta.

  • Web
  • UX/UI
  • Development
Ver el sitio

Ficha del proyecto

Web institucional y catálogo diseñados y desarrollados dentro de 22 Studio, con un gestor de contenidos para el cliente.

Rol
Diseño de producto y desarrollo web
Período
Abril a junio de 2026 · más acompañamiento
Estado
Live
Alcance
SitioCatálogoMobileGestor de contenidosGuías
Herramientas
Next.js y Sanity

01 · El problema

Un catálogo extenso, pensado para consultarse desde el celular.

  • Un catálogo diverso

    Marcas y categorías, cada producto con sus características, presentaciones e imágenes.

  • Consultas desde el celular

    Muchas personas iban a llegar desde el celular a ver características y dónde comprar.

  • Sin venta directa

    Cada producto tenía que llevar a sus canales de compra, sin un checkout propio.

El desafío

Diseñar la web también implicaba definir cómo iba a seguir funcionando cuando terminara el proyecto.

La web tenía que

  • Presentar la empresa, su trayectoria y sus marcas.
  • Permitir explorar el catálogo y filtrar por marca, con destacados y lanzamientos.
  • Llevar cada producto a sus canales de compra.
  • Poder actualizarse sin desarmar el diseño.

02 · Proceso

Cómo se trabajó.

Cuatro etapas para entender, definir y hacer avanzar cada proyecto.

  1. Entender

    En las reuniones aclaramos el objetivo de la web y dejamos la venta directa para más adelante.

  2. Definir

    Organicé la experiencia en cinco recorridos: institucional, catálogo, negocios, blog y contacto.

  3. Construir

    Next.js y Sanity con desarrollo asistido por IA, y el catálogo cargado desde el Excel del cliente.

  4. Entregar

    Capacitación en vivo sobre Sanity, quince guías de uso y un asistente con la documentación.

03 · Decisiones

Las decisiones que
definieron el producto.

Alcance, catálogo, edición e implementación formaban parte del mismo problema.

Lo que necesitaba la herramientaLo que tenía que resolver la herramienta

  • Control sobre el comportamiento del catálogoNext.js
  • Una estructura de edición para el clienteSanity

Al principio

FramerNext.js y Sanity

Next.js y Sanity en lugar de Framer.

Por qué
Hacía falta más control sobre el catálogo, el diseño y la estructura de edición.
Efecto
La web pública y la edición del contenido responden a las mismas reglas.
Mi parte
Proponer el cambio y desarrollar el sitio.

El catálogo, pensado primero para el celular.

Por qué
Muchas personas llegarían desde el celular a consultar características y dónde comprar.
Efecto
Priorizamos la presencia y la claridad del catálogo en la experiencia móvil.
Ficha de producto con botones para ver en MercadoLibre y comprar online.
  1. Imágenes completasProporciones distintas, sin recortar lo importante.
  2. Títulos de varias líneasLas tarjetas los contienen sin romperse.
  3. Destinos de compraMercadoLibre o compra online, según el producto.

Autonomía para el cliente, con límites claros.

Por qué
La web tenía que seguir funcionando cuando terminara el proyecto.
Efecto
El cliente actualiza productos, categorías y destinos de compra sin tocar el diseño.
En práctica
Campos para contenido e imágenes, con límites en los textos atados a la composición.
Catálogo de Prifamon filtrado por categoría con tres productos Q-Soft.
Gestor de contenidos de Prifamon en Sanity con la lista de productos.
Lo que ve el visitanteLo que edita el cliente

04 · Sistema

Una web que el cliente puede mantener.

La experiencia de quien administra la web es parte del producto, igual que la de quien visita el catálogo.

  1. Gestor de contenidos de Prifamon: campos del hero de Contacto con su límite de caracteres.

    1 · Contenido

    Campos con límites que protegen la composición.

  2. 2 · Catálogo

    Marcas, categorías, destacados y lanzamientos.

  3. Ficha de producto con botones para ver en MercadoLibre y comprar online.

    3 · Ficha

    Destinos de compra por producto.

05 · Resultado

Qué quedó entregado.

Web y catálogo publicados, con gestor de contenidos y capacitación.

  • 15

    Guías de uso

    Más una capacitación en vivo y un asistente con la documentación.

  • 5

    Recorridos clave

    Institucional, catálogo, negocios, blog y contacto.

  • 3

    Meses de diseño y desarrollo

    De abril a junio de 2026, con acompañamiento posterior.

Caso siguiente.

Nomenclator · Plataforma con IA. Product Design y Design System.
Inicio de Nomenclator con el saludo “Hola!” y las consultas recientes.

Nomenclator

Design System y pantallas del MVP de una plataforma con IA para clasificación arancelaria.