Proyectos

JMR 724

JMR 724 es un proyecto residencial para el cual participé como diseñador y desarrollador del sitio web. El objetivo principal fue presentar la información del complejo de manera clara y generar leads efectivos para el contratista mediante formularios ubicados estratégicamente en diferentes secciones del sitio, como el hero, el footer y las fichas de departamentos.

Proyecto desarrollado en Stelab, donde implementé un sistema que permite al usuario llenar un formulario una sola vez para desbloquear planos, vistas previas y un enlace directo a WhatsApp para facilitar el contacto con el contratista.

El sitio destaca las amenidades y beneficios del desarrollo, incluyendo la oferta de 46 departamentos y su propuesta de valor.

El resultado es una plataforma que comunica eficazmente la esencia del proyecto y ofrece a los interesados la información necesaria para tomar una decisión informada de manera ágil.

Enlaces

Blind Side

Blind Side es un e-commerce orientado a la venta de cursos para líderes empresariales. El proyecto consistió en rediseñar y optimizar su plataforma utilizando WordPress y WooCommerce.

Proyecto desarrollado en Stelab, donde participé en mejorar el funcionamiento general del sitio y adaptar la plataforma a los objetivos comerciales de la marca.

• Configuración completa de la tienda en WooCommerce.
• Ajustes personalizados mediante HTML, CSS, JavaScript y PHP.
• Optimización del flujo de compra para lograr un proceso más claro y rápido.
• Adecuación del diseño y funcionalidades según las necesidades de la marca.

Las mejoras permitieron ofrecer una experiencia de compra más eficiente, manteniendo la identidad visual y facilitando la gestión del catálogo.

Enlaces

Great Place To Work

Great Place to Work es un proyecto desarrollado en colaboración con el equipo de Stelab, donde se creó una sección personalizada para gestionar organizaciones dentro de un sitio web en WordPress. El objetivo fue mejorar la forma en que se almacenaba, organizaba y visualizaba esta información, permitiendo una administración más ágil y estructurada.

Mi participación se centró en liderar el desarrollo completo del sistema, desde el análisis inicial hasta la implementación final. El proceso se dividió en tres etapas clave:

• Revisión del sitio existente: analicé la estructura actual para entender cómo se manejaba la información de las organizaciones y definir la nueva arquitectura necesaria.
• Creación de un entorno de staging: levanté un sitio de pruebas donde desarrollé y ajusté el Custom Post Type (CPT) de organizaciones, utilizando las mismas librerías y plugins del sitio principal para asegurar compatibilidad.
• Construcción del CPT y su plantilla (single): adapté los campos, estructura y diseño del CPT para mostrar correctamente la información de cada organización dentro del sitio.

Una vez listo el nuevo sistema, migramos las organizaciones existentes —que antes se gestionaban como posts regulares— al CPT diseñado exclusivamente para este propósito, lo que permitió una separación clara entre contenido del blog y contenido institucional.

En la segunda fase del proyecto implementé un proceso de carga masiva de datos que permitió importar organizaciones meses anteriores de manera programática mediante archivos CSV. Este proceso incluyó:

• Subida previa de imágenes al sitio y generación automática de sus URLs.
• Sanitización y preparación de la información de cada organización.
• Creación automática de los registros del CPT utilizando los datos del CSV.
• Asociación de cada imagen con su organización correspondiente durante la importación.

Gracias a este flujo de carga masiva, se logró actualizar el sitio con cientos de organizaciones atrasadas sin intervención manual, asegurando que todo el contenido quedara correctamente vinculado, ordenado y listo para su consulta.

Enlaces

DiSí Operaciones

DiSí Operaciones es una plataforma fintech enfocada en apoyar a micro y pequeñas empresas en México. El proyecto consistió en renovar su presencia digital con un diseño más claro, moderno y orientado a comunicar mejor sus servicios.

Proyecto desarrollado en Stelab, en el cual participé en tres etapas clave:

• Diseño: colaboré con otro diseñador para transformar los requisitos del cliente en pantallas funcionales alineadas con su mensaje.
• Desarrollo: implementé el nuevo diseño en un proyecto base desde cero, preparando vistas y componentes antes de su integración al sitio final.
• Implementación: aunque la integración en el sistema C# la realizó otro colaborador, participé validando la funcionalidad, corrigiendo bugs y asegurando la correcta operación del sitio.

El resultado fue una renovación completa que mejoró la percepción de la marca y aportó claridad en la presentación de sus servicios.

Enlaces

Bisi Leasing

En este proyecto participé en el diseño integral del producto, desde la creación de la identidad visual de la marca hasta el diseño web. Esto incluyó la elaboración de wireframes, mockups y la definición completa de las pantallas del sitio.

Durante la etapa de desarrollo implementé cada pantalla en código y construí la estructura del sistema para gestionar los vehículos en arrendamiento. Esto incluyó la creación del Custom Post Type para los vehículos, sus taxonomías, la carga de información técnica, imágenes y la integración de cada elemento dentro de la plantilla del sitio.

• Catálogo de vehículos administrable con filtros por marca, modelo, año, transmisión y más.
• Fichas técnicas completas por vehículo, basadas en taxonomías y campos personalizados.
• Implementación de lógica de negocio básica para el acceso a la sección de solicitud de arrendamiento mediante cuenta e inicio de sesión.
• Flujo de solicitud de arrendamiento mediante un formulario por pasos (wizard).
• Calculadora de arrendamiento que estima el pago mensual ajustando variables como pago inicial y plazo (12, 24 o 36 meses).

El desarrollo se centró en ofrecer una experiencia de navegación ágil, con arquitectura optimizada, diseño responsive, SEO técnico y una base preparada para futuras integraciones y funcionalidades avanzadas.

Enlaces

Merka Total

Merka Total es un proyecto desarrollado en Stelab cuyo objetivo fue construir una plataforma de e-commerce en formato de catálogo, donde los usuarios pueden explorar productos y enviar solicitudes de cotización. A diferencia de una tienda tradicional, el sistema fue adaptado para deshabilitar compras directas y enfocar el flujo en la generación de prospectos.

Mi participación inició con la recolección masiva de productos provenientes de diversos proveedores de artículos promocionales. A partir de los catálogos y sitios compartidos por la clienta, realicé la extracción automatizada de información mediante web scraping, obteniendo datos como categorías, variaciones, imágenes, descripciones y el proveedor correspondiente. Este proceso permitió reunir y depurar un inventario de aproximadamente 4,000 productos.

En paralelo desarrollé el sitio web adaptándolo a la identidad visual de la clienta y preparando la estructura necesaria para recibir el catálogo. Con la información ya procesada, procedí a importarla a WooCommerce utilizando el importador nativo, asegurando que todos los datos se ajustaran al formato requerido y verificando que las imágenes, atributos y relaciones entre productos se cargaran correctamente.

Finalmente, ajusté el comportamiento de la tienda para que funcionara exclusivamente como catálogo, reemplazando el proceso de compra por un sistema de solicitudes de cotización. Esto permitió ofrecer una experiencia clara y enfocada en las necesidades del negocio, optimizando tanto la navegación del usuario como la gestión interna de los productos.

Enlaces

Sistema de documentación de archivos

Desarrollo de una aplicación web de documentación utilizando Next.js, React y MySQL como tecnologías principales. El sistema integra un control de acceso mediante autenticación basada en tokens (JWT).

La plataforma permite crear, centralizar y documentar reportes y sistemas, facilitando la consulta y el acceso a la información desde un entorno unificado.

Además, implementé un sistema de gestión de usuarios basado en roles, asegurando que cada perfil tuviera los permisos adecuados para las distintas secciones de la aplicación.

Enlaces

SICWS Sitio web

Rediseño y desarrollo de la landing page para “SICWS”.

El rediseño se realizó en Figma para definir la dirección visual del sitio, validar la estructura de contenido y ajustar los elementos necesarios antes de pasar al desarrollo.

Con el diseño aprobado, se procedió a implementar la landing utilizando Astro y React, priorizando una carga rápida y eficiente dado que la mayor parte del contenido es estático.

El estilado del sitio se desarrolló con Tailwind, permitiendo una implementación visual ágil y consistente.

Enlaces