← Todos los proyectos

Redline MD

UX · UI · Design System · Branding · Webflow · Client-First · Desarrollo · Wireframes · Desktop · Móvil
Redline MD

Resumen

Redline MD es un servicio estadounidense de revisión de contratos médicos que entrega a los médicos, en 24 horas, un informe con las marcas de revisión de su contrato de trabajo, por una tarifa fija de 199 USD.

El proyecto se entregó como un desafío de diseño de Foundey. El briefing era simple y difícil: el 35% del tráfico del sitio actual llega desde el móvil, y el móvil trae menos del 10% de los ingresos. La tarea era rehacer por completo la landing page de Google Ads, pensada primero para móvil, para convertir clics en anuncios en contratos enviados.

Mi Rol

Diseñador y desarrollador Webflow de principio a fin. Me encargué de la investigación, la arquitectura de información, el UX writing, el diseño visual, la animación y toda la implementación en Webflow.

Analicé el sitio de Redline en línea, definí el nuevo hero pensado para móvil, rediseñé todas las pantallas, escribí los textos de la página, creé la demostración interactiva del contrato y entregué en Webflow la calculadora, el consentimiento de cookies, los modales y el contenido editable desde el CMS.

Contribuciones Clave

  • Primero, el diagnóstico. Leí el sitio actual de Redline como lo haría un médico y enumeré lo que generaba desconfianza: una errata en el logo, tres cifras de ahorro distintas, un contador de salario detenido en 0%, capturas del producto borrosas, un enlace de Google Drive para el informe de ejemplo, el precio de 199 USD nunca mostrado junto a la referencia de 500 USD de un abogado, un aviso de cookies que cubría un tercio de la pantalla en móvil, ningún botón fijo en móvil y un pie de página solo con el copyright.
  • Hero rehecho en torno al retorno. El nuevo hero muestra el dinero y el plazo en la primera pantalla: el precio de 199 USD dentro del botón, "500 USD o más" justo debajo y fotos de médicos junto a tarjetas de contrato dibujadas en código, para que la página se perciba como médica desde el primer segundo.
  • El informe de ejemplo en la página. El enlace de Google Drive dio paso al informe real de 5 páginas, que se abre en un modal en la propia página, con el resumen del contrato, los puntos de atención y el impacto financiero rediseñados como ilustraciones de la marca antes de que el médico haga clic en Download.
  • Una demostración interactiva. Un contrato de ejemplo con cuatro cláusulas marcadas, y cada una muestra la revisión al tocarla: el texto original tachado y la corrección en verde, ambos legibles como frases completas.
  • Una calculadora que cualquiera entiende. El médico indica el valor del seguro de responsabilidad profesional y ve cuánto costaría la cobertura de cola, según la regla de hasta 2x de AMA Insurance. Los términos técnicos se mantienen, cada uno con una explicación sencilla y una ayuda al pasar el cursor.
  • Precios lado a lado. 199 USD frente a 480 a 1.950 USD en un despacho de contratos y más de 10.000 USD por una cobertura de cola que nadie negoció. Redline en negro con una insignia verde de ahorro, y el rojo reservado para el riesgo.
  • Móvil primero. Un botón fijo que aparece después del hero y se oculta en el botón final, un envío en 3 pasos sin crear cuenta, testimonios en un carrusel con puntos y flechas y una tarjeta pequeña de cookies, con opción de aceptar y preferencias.
  • Todo lo legal, en la página. Términos, privacidad y política de cookies en modales. Las preferencias de cookies se pueden cambiar en cualquier momento desde el pie de página.
  • Construido en Webflow con Client-First. El sistema visual de la plantilla Longevity reescrito en clases Client-First. Finsweet Attributes en el accordion, los modales, el contador y el slider. Finsweet Cookie Consent en el aviso de cookies. Todo el contenido editable sin código.
  • Animación que respeta a quien lee. Las fotos entran volando, los fondos brillan y las barras y las cláusulas se animan con el scroll. Todo se apaga con prefers-reduced-motion.

Impacto

La nueva landing de Redline MD se entregó a Foundey como respuesta al desafío. Es un sitio completo en Webflow, con Client-First, Finsweet Attributes y contenido editable en el CMS, con el móvil como objetivo principal y no como algo para después.

Todos los testimonios, sellos de seguridad, materiales de los fundadores y textos legales son provisionales, pensados para el contenido real de Redline. El caso registra tres preguntas que validaría con ellos antes de publicar: la promesa de plazo, el volumen de contratos informado y qué certificaciones de seguridad mostrar.

El prototipo en línea y el caso interactivo están en los enlaces de abajo.

Physician user
Guía de Estilo

Paleta de colores

#E0342F · Red
#B42320 · Red Dark
#1C7A43 · Savings
#0A0A0A · Ink
#FDE3DF · Blush
#FFF4F2 · Blush 2
#F5F5F5 · Surface
#FFFFFF · Paper
Tipografía · Figtree

Contracts, redlined.

EjemploFamiliaPesoTamañoLineUse
Contracts, redlined.FigtreeExtraBold64px68pxH1
Contracts, redlined.FigtreeBold44px52pxH2
Contracts, redlined.FigtreeSemiBold28px36pxH3
Contracts, redlined.FigtreeMedium20px30pxLead
Contracts, redlined.FigtreeRegular17px26pxBody
Móvil / Redline MD
Hecho en Figma
Diseño de joaomob