monitor showing biomedical website design

Biomedical Website Design + eCommerce for Legacy Biotech

Legacy Biotech in Boston, MA gets a new biomedical website design and e-commerce makeover.

Website project overview

Industry
Biotechnology

Client
MatTek

Solution
Website Design + e-Commerce Makeover

This legacy biotech based in Boston had dominated the U.S. cover slip and Petri dish market and they wanted to expand their online store to include tissue models and cells. They needed to update their biotech website design to build upon their well-established market and convince scientists about the efficacy of artificial tissue models.

Their existing websites – they had separate store and company websites – were difficult to update and didn’t match visually. As part of the makeover, both the main website and the e-commerce store would be combined into one seamless user experience. MatTek needed a digital agency to redesign their online presence to showcase their expertise and allow them to easily expand the site with new products. 

Biomedical
Website Design
Challenge

The existing websites were difficult to navigate and confused pharmaceutical scientists and innovation directors. The brand experience created a dissonance and sowed seeds of mistrust for scientists already predisposed to look at artificial tissues as a risk to their experiments. A new biomedical website design would help reassure skittish scientists that MatTek’s science is reliable and a solid cost-effective option.

Though MatTek wasn’t first-to-market in the artificial tissue market, their products have been mentioned in 700+ peer review papers and 400+ patent references. 

References are critical in validating the efficacy of artificial tissues. Research scientists and directors of innovation/discovery required evidence before considering artificial tissues in their testing. After all, there is a lot riding on the results of the tests and there is no wiggle room for fuzzy data in statistical validation. 

The e-commerce store needed to be reorganized from the ground up, with new photos of the well plates, tissue models and cells. And the entire user experience needed to b frictionless, from reading about tissue models to supporting research to perusing the online offerings to purchase. 

We knew right from the get-go Robbie was going to be great to work with. It was great to meet him in person and establish a relationship right from the beginning. We worked really well together. You could tell he really knew what he was doing.

Biomedical
Website Design
Solution

Stellar redesigns biotech websites of all shapes and sizes. We are used to building a cohesive, collaborative team with marketing directors and c-suite leadership by providing expertise in design, writing and development. The MatTek team was super-involved and provided tremendous subject matter expertise to ensure their audiences would get the information they craved.

The new site now has a clean, professional look and feel featuring large, colorful images of artificial tissues. These images provide visual power and instill confidence by their sheer size and dominance. Yet, underlying the whole site is a structure that is logical, prioritized and easy-to-navigate.

The new online store is clean and organized, with colorful professional images of the well-plates. Gone is the clutter and confusion of the old store. Now customers can clearly see the specifications of each product before making a selection to purchase. The whole experience reassures clients with a frictionless user experience.

At Stellar, we are obsessed with building strong websites and digital brands for biotechs and biopharmaceuticals. Give us a shout if your biotech is having trouble finding its voice.

Need help with your biopharma web design project?

contact us for an estimate
Everyday Art

Scientists are intimately familiar with their science, but they struggle to capture the beauty and magic of their novel breakthroughs. Often it’s as simple as allowing an image to overtake the page. 

What may look common to you is exactly what makes you unique. 

Background Texture

One common trick designers use is to add a subtle texture to the background. They’ll take a texture that’s relevant to your science to add a layer of visual interest and underscore your particular niche – in this case cell tissues.

Playing with textures adds depth and visual interest to your brand.

Beyond Stillness

Videos offer fantastic proof – especially in a niche like artificial tissues. A video showing the movement of artificial cilia changes the conversation from one of disbelief to one of curiosity. Even if the videos is low resolution, it clearly shows lifelike movement. 

Whenever possible, use a video to demonstrate your science. It’s easy to understand and much more powerful than a static photo.

Data is Beautiful

No question about it: data is beautiful to scientists. But don’t forget the artists! Sure, artists will use a little bit of razzle-dazzle to get the same point across. That’s what they do.

Envisioning your black and white data in unusual ways makes your biotech stand out. And in a highly competitive niche like biotech, it’s good to get attention.

Donor profile tissue model
Interactive Hotspots

One of the main objectives of a website design is to engage site visitors. We web folks call that making your website “sticky.”

Hotspots are little information boxes that appear when a site visitor clicks on or hovers over a specific part of an image. They’re pretty slick for two reasons: they add interactivity and are particularly good at creating “aha!’”moments.

Killer Bullets

Ah, the lowly bullet. Most of us don’t give them a second thought. After all, a bulleted list’s only job is to help people scan quickly. Why make such a big deal about such a little thingee?

Well, it’s the little touches like unique bullet styles that help your site feel less generic. It signals to site visitors that you’re so on top of your game that you are concerned about every little detail.

Tabs to the Rescue

Some clients we work with worry their pages are too long. They’re haunted at the thought that one of their site visitors will be forced to scroll and scroll and scroll to read the content. If you’re one of those people, tabs are a great solution.

Tabs break content into categories and allow the user to click tabs instead of scroll. Handy interactivity for the ‘scroll-averse’ among us.

Pretty Table Settings

Tables are an oft-overlooked opportunity to add a bit of style and organization to your site. Most biotechs use the default settings which are pretty bland. But by using custom colors and font weights, you can help users quickly scan your table and match your brand aesthetic.

Elegantly styled tables show you’re a biotech that cares about details, consistency and the user’s experience.

Product Superhero

For a biomedical e-commerce store, presentation is key. Crisp, clean, colorful photos make a huge impact on site visitors and shrink the ‘credibility gap’. People who order from you need to get the impression you’re trustworthy, organized and precise.

Think of your images as superheroes for your brand: confident, powerful and ready to save the day.

Check This Out

Like laboratories, biotech e-commerce sites need to be clean and tidy. If your online store is cluttered, it’s possible someone at your biotech is worrying too much. Too much information can actually have a negative impact on the user experience.

Instead, simplify your online store and you’ll boost your user experience while decreasing abandoned carts.

Sorting > Data

As your biotech grows, you’ll undoubtedly gather references. Data is a crucial part of your value proposition, but it can easily become cumbersome. Once you hit 50 items, it’s time to start planning for a way for users to sort data.

Remember: data’s great, but sorting’s greater.

Move Over, Mickey

Have you seen mouse-over animations? Pictures that move when your mouse scrolls over or interacts with elements on a website are mouse-over animations. It adds a subtle effect to enhance the user’s sense of engagement and control.

Mouse-over animations can help explain an important feature or simply make a user “cool!”

Youtube Linkedin

share