LER Web Services wordmark
ENES
Start a project

HTMP Bio · Case study

Clear product storytelling for high-throughput biology.

The HTMP 192 microplate, rendered in clear polystyrene
Project overview
A sharper storefront and a refined mark for HTMP Biotechnology, built so technical buyers understand the platform before they reach out.
Services
  • UX/UI design
  • Frontend development
  • Logo refinement
  • Product storytelling
Date
January 2026
Client
HTMP Biotechnology
Location
Los Angeles, CA
HTMP Bio reel: the HTMP 192 plate in 3D, a dive into one well as its cells gather into a spheroid, then the htmpbio.com website on desktop and phones

Make the science easy to understand before the first call.

HTMP Bio needed a website direction that made the business easier to understand before a prospect reached out. I shaped the experience around clearer hierarchy, stronger visual trust, and a more direct path to action.

Product and science information was organized so technical audiences can understand the offer without digging through scattered details.

  • 4 moFrom kickoff to launch
  • 5Core pages, one hierarchy
  • 3Product pages with specifications
  • 1Refined mark and icon system
Sections of the HTMP Bio website laid out at an angle: the homepage hero, the HTMP 192 product page, the technology page with its retention and compound-response charts, the values and contact pages

What had to change.

  1. The offer needed to be easier to scan for first-time visitors.

  2. The brand needed a sharper first impression without overcomplicating the experience.

  3. Mobile users needed the same clarity as desktop visitors.

  4. The site needed a structure that could support future proof, content, and campaign updates.

  • Homepage arrival: the headline rises in over the plate, then the events bar steps on, recorded from htmpbio.com
  • Product highlights: each tab slides its marker and draws its chart, recorded from htmpbio.com
  • The Products menu and the page transition into HTMP 192, recorded from htmpbio.com

Screens

Every page, one system.

Home, product, technology, about, and contact share one hierarchy, so a researcher can move from the platform promise to specifications and a request in a few scrolls.

  • Product gallery: thumbnails, hover zoom and the pack option, recorded from htmpbio.com
  • Technology page revealing section by section, recorded from htmpbio.com
  • Questions and answers opening in place, recorded from htmpbio.com

The same clarity on a phone.

Mobile users get the same hierarchy as desktop visitors: the platform promise first, then specifications, then a direct way to request information.

The phone menu opening, with the products inside
The homepage arriving on a phone, recorded from htmpbio.com on a phone
The HTMP 192 product page on a phone

In their words

“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.”

Dominick Hellen HTMP Biotechnology · 5/5 Google reviewRead original on Google

More screens

About, contact and events.

  • About page: values and team revealing as it scrolls, recorded from htmpbio.com
  • Contact form being filled in with sample text, recorded from htmpbio.com
  • Events page and its event cards, recorded from htmpbio.com

Wireframes

The structure underneath.

The same pages with the styling stripped away: one grid, one type scale, and the same set of components on every route.

HTMP Bio pages drawn as wireframes, laid out at an angle: outlined cards, buttons and fields, grey bars for text, and line drawings of the photos and charts

Early concepts

Ten rounds to the hero.

The homepage hero went through ten rounds of renders before the one on the live site: plate materials, cell density, nuclei and lighting, from the first clear-plate studies to the final milky plate.

  • Round 11: smoother plate surface
  • Round 11: rounded well contours
  • Round 12: clear plate
  • Round 12: neutral grey plate
  • Round 12: deep slate plate
  • Round 12: defined clear plate
  • Round 13: clear macro view
  • Round 13: hydrated cells resting on the floor
  • Round 13: translucent cell interiors
  • Round 14: organic cells, wide view
  • Round 15: submerged cell membranes
  • Round 15: cohesive cell aggregates
  • Round 16: individual hydrated cells
  • Round 16: packed cell aggregates
  • Round 17: defined nuclei
  • Round 17: nucleus close-up
  • Round 18: plate geometry check
  • Round 19: intro render
  • Round 20: milky white plate
  • Round 20: final hero render
Hero render studies, rounds 11 to 20, in order.

A sharper HTMP mark.

The existing mark was refined rather than replaced: tighter letterforms, balanced speed lines, and the microplate dot grid set into the P, plus a clear-space rule and an icon system for favicons and app tiles.

The original HTMP Biotechnology logo
Before · 2025
The refined HTMP Biotechnology logo
After
  • Primary logo
  • Reversed logo
  • Mono logo
  • Icon

Type · Roboto, thin to extra bold

  • #183456
  • #64748B
  • #9AA9BC
  • #EEF4F8
  • #F8FAFC

Outcome.

HTMP Bio now presents the business with clearer positioning, cleaner responsive screens, stronger content structure, and a calmer path from interest to action.

The work brought UX/UI design, frontend development, and product storytelling into one consistent public-facing experience.

How this one came together.

The four steps behind this build, and what each one had to settle.

Start a project

  1. Discovery

    I clarified the audience, offer, and practical questions the website needed to answer.

  2. Page structure

    I organized the page flow around service clarity, proof, and the next action a qualified visitor should take.

  3. Responsive design direction

    I shaped the layout system and core screens so the experience holds up across desktop and mobile.

  4. QA and refinement

    I reviewed consistency, responsive behavior, and clear paths to contact before handoff.

Next projectLumera Med SpaReimagining the boutique wellness experience.