HTMP Bio · Caso de estudio
Narrativa de producto clara para la biotecnología de alto rendimiento.
- Resumen del proyecto
- Una tienda más nítida y una marca refinada para HTMP Biotechnology, construidas para que los compradores técnicos entiendan la plataforma antes de contactar.
- Servicios
- Diseño UX/UI
- Desarrollo frontend
- Refinamiento de logotipo
- Narrativa de producto
- Fecha
- Enero de 2026
- Cliente
- HTMP Biotechnology
- Ubicación
- Los Angeles, CA
Hacer que la ciencia sea fácil de entender antes de la primera llamada.
HTMP Bio necesitaba una dirección de sitio web que hiciera más fácil entender el negocio antes de que un prospecto se pusiera en contacto. Definí la experiencia en torno a una jerarquía más clara, una confianza visual más sólida y un camino más directo a 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.
- 4 mesesDel inicio al lanzamiento
- 5Páginas principales, una jerarquía
- 3Páginas de producto con especificaciones
- 1Marca refinada y sistema de íconos
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.
En sus palabras
“Ed is a fantastic web designer, and truly cares about the vision of the company. Beyond that, he has an adept understanding for building a UI around the end-user. Very happy we chose to work with LER.”
Más pantallas
Nosotros, contacto y eventos.
Wireframes
La estructura de fondo.
Las mismas páginas sin el estilo visual: una retícula, una escala tipográfica y el mismo conjunto de componentes en cada ruta.
Primeros conceptos
Diez rondas hasta la imagen principal.
La imagen principal de la página de inicio pasó por diez rondas de renders antes de la que está en el sitio: materiales de la placa, densidad celular, núcleos e iluminación, desde los primeros estudios con placa transparente hasta la placa lechosa final.
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
- #183456
- #64748B
- #9AA9BC
- #EEF4F8
- #F8FAFC
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.
Descubrimiento
Aclaré la audiencia, la oferta y las preguntas prácticas que el sitio web debía responder.
Estructura de página
Organicé el flujo de la página en torno a la claridad del servicio, las pruebas y la siguiente acción que debe tomar un visitante calificado.
Diseño responsive
Definí el sistema de maquetación y las pantallas principales para que la experiencia se sostenga en escritorio y en móvil.
QA y refinamiento
Revisé la consistencia, el comportamiento responsivo y las rutas claras de contacto antes de la entrega.
