Hacer que la ciencia sea fácil de entender antes de la primera llamada.
HTMP Bio necesitaba una dirección web que hiciera el negocio más fácil de entender antes de que un prospecto se comunicara. Moldeamos la experiencia en torno a una jerarquía más clara, mayor confianza visual y una ruta más directa hacia la acción.
La información de producto y de ciencia se organizó para que las audiencias técnicas entiendan la oferta sin buscar entre detalles dispersos.
Lo que tenía que cambiar.
- La oferta necesitaba ser más fácil de leer para los visitantes nuevos.
- La marca necesitaba una primera impresión más definida sin complicar la experiencia.
- Los usuarios en móvil necesitaban la misma claridad que los visitantes de escritorio.
- El sitio necesitaba una estructura que pudiera soportar futuras pruebas, contenido y actualizaciones de campañas.
Pantallas
Cada página, un mismo sistema.
Inicio, producto, tecnología, nosotros y contacto comparten una jerarquía, así que un investigador puede pasar de la promesa de la plataforma a las especificaciones y a una solicitud en pocos desplazamientos.
La misma claridad en un teléfono.
Los usuarios en móvil reciben la misma jerarquía que los visitantes de escritorio: primero la promesa de la plataforma, luego las especificaciones y después una vía directa para solicitar información.
Una marca HTMP más nítida.
La marca existente se refinó en lugar de reemplazarse: letras más ajustadas, líneas de velocidad equilibradas y la retícula de puntos de la microplaca integrada en la P, además de una regla de espacio libre y un sistema de íconos para favicons y mosaicos de aplicación.
Tipografía · Roboto, de fina a extra negrita
HTMP192Platform
Resultado.
HTMP Bio ahora presenta el negocio con un posicionamiento más claro, pantallas responsive más limpias, una estructura de contenido más sólida y un camino más tranquilo desde el interés hasta la acción.
El trabajo unió diseño UX/UI, desarrollo frontend y narrativa de producto en una experiencia pública consistente.
Cómo se construyó.
Los cuatro pasos detrás de este proyecto y lo que cada uno tuvo que resolver.
Iniciar un proyecto
-
Paso 01
Descubrimiento
Aclaramos la audiencia, la oferta y las preguntas prácticas que el sitio debía responder.
-
Paso 02
Estructura de página
Organizamos el flujo de páginas en torno a la claridad del servicio, las pruebas y la siguiente acción que debe tomar un visitante calificado.
-
Paso 03
Diseño responsive
Definimos el sistema de layout y las pantallas principales para que la experiencia se sostenga en escritorio y móvil.
-
Paso 04
QA y refinamiento
Revisamos la consistencia, el comportamiento responsive y las rutas claras de contacto antes de la entrega.