by Allison Banko
As a biotech company, New England Biolabs (NEB) is equipped with an extremely extensive and complex molecular biology database, offering the largest selection of recombinant and native enzymes for genomic research.
"We sell life science reagents to other biotech companies and to academia, as well, for the scientific research that they're doing," explained New England Biolabs Digital Marketing Manager Tanya Osterfield.
NEB customers can peruse and shop for these items on the company's website, NEB.com. However, in recent years, the company's product categories have expanded, making the website more and more difficult for visitors to use.
"It was bad navigation just because of the way the site had grown organically — not because it was designed that way," Osterfield said. "We had a much smaller product line and not as many Web tools when we started the website, and as it grew, it became cumbersome to navigate the site."NEB.com had two separate sections
, Osterfield explained. One section encompassed several different product categories while the other housed the technical material that accompanied the products.
Because of the siloed sections, she compared navigating the site to climbing up and down a tree. This issue largely stemmed from the limitations of the website, built on in-house systems more than a decade ago.
"The main driver was the fact that we had a home-grown, custom-made content management system that fit our core product line very well, but as we started to branch out into other product areas, and were trying to heavily market some of our new products, they just didn't fit the structure of that CMS," Osterfield said. "And any time you tried to add a new product category, it was like building from scratch again."
This process required a great deal of time and IT resources, slowing down the company's speed to market. Plus, due to this confusing navigation, New England Biolabs would receive calls from visitors wondering why something wasn't listed on the website.
Usually, the item was, in fact, on the website — customers just couldn't find it due to NEB.com's existing architecture.
The team set a goal to improve the navigation to give visitors the information they needed in a logical way, Osterfield said. She added that the team wanted a website that could support modern-day functionalities (behavioral targeting, for example) — something the outdated, in-house systems simply couldn't handle.
New England Biolabs embarked on redesigning its website's digital experience, aspiring to improve navigation and usability from both the customer-side and the internal side. The team also adopted a CMS equipped with modern functionalities, so that when NEB is ready, the company website has the capabilities of implementing them.
"Eventually, we'd like to be able to do the behavioral targeting, and eventually, we'd like to be able to do some more ad retargeting on the site, and then responsive design," she explained, "and those were all things that we weren't ready to do right away, but we knew we would be able to do in the future."
Because the goals of the project were to enhance usability on all ends, the NEB team utilized substantial, hands-on customer research to drive the redesign.
Step #1. Select a new CMS
The New England Biolabs team approached the project with careful care and consideration, spending about a year exploring and analyzing possibilities.
The team began this process by attending conferences to see what CMS options were out there. Osterfield said they sat down and determined hundreds of requirements for a new CMS, and narrowed their options down to 10 different vendors.
From there, they sent the RFP to the 10 vendors for their responses and then narrowed that list down to three. This trio came in to NEB to perform demos.
Of those three, the team narrowed their picks down to two and collected customer references, going on site visits to see how other customers were using those systems. NEB also noted these companies' implementation processes. The team then reached its final decision for a CMS.
Choose a CMS-compatible agency
After selecting a CMS, New England Biolabs next needed an agency with developers and designers experienced in working with the system. They opted for an agency that had a Cambridge office, nearby NEB's Ipswich, Mass., headquarters.
NEB joined forces with the agency to form three teams to fuel the redesign:
- User experience (UX)
While development got started on setting up the CMS, the UX team worked on collecting loads of user-related research.
Step #2. Perform user-experience testing
To determine which direction to take the website redesign, the team conducted user testing on items such as wireframes, thought processes and mocked-up pages.
"We did the customer testing, and we also did internal testing, because half of our company is research scientists," Osterfield explained, "so they're the same as the people who would be using the site."
Internally, the team had a panel of about a dozen scientists within different roles to test the wireframes. Externally, the team ensured it had customers to represent each of its personas, developed around researchers, purchasing agents and students. The customers were selected based on recommendations from local sales reps.
"We did it mostly in [the] Boston and Cambridge area," Osterfield said. "There's tons of different science companies and universities there, so we had a real broad population."
New England Biolabs also performed experiments on unfocused groups, conducting two or three rounds of testing with randomly selected scientists. NEB invited these sciences to come have pizza, brainstorm website designs and reveal what they're looking for on the website as customers.
The main goals for the hands-on research, Osterfield explained, was to ensure NEB's new information architecture was streamlined so customers could easily find what they needed through the homepage.
Step #3. Analyze and apply the findings
"Working with the customers, [we] really found what was important to them, and surfaced it," Osterfield said.
One key discovery the team made through testing was how heavily visitors use the site's search results page.
"That's how we found those people were finding things, which is really interesting because if you ask people how they find something, they would tell you this is what they do, but then when you sat down and watched them, they would automatically go to a search box," Osterfield recalled.
Thus, the team directed focus toward the site's search results. NEB also observed customers' design preferences. Some mock-ups included colors and elements differing from the company's logo (orange and gray accompanying a butterfly), which didn't go over well with the test groups.
"Most of the external customers were asking us where the orange was, and we didn't know that our customers really identified us with the orange and our butterfly," Osterfield said. "So we changed the colors on the site, which weren't the ones we would have chosen. We didn't think they were aesthetically as great, but it resonated with customers, so we changed everything to the orange and gray that they were expecting."
The team also found that 75% of its site traffic was directed from search, identifying Google search as another area of attention.
As for within the site, Osterfield said the team didn't realize how highly demanded its products' protocols were. Protocols are detailed procedures
for the design and implementations of scientific experiments.
Through testing, the team noticed that some of its website visitors already bought a NEB product, but were visiting the site to find its protocol. Whereas before these protocols were buried, the redesigned site was equipped with a widget on the homepage where you could search for these protocols.
Step #4. Use research findings to drive and launch redesign
"Once we did that research, then we did a lot of discovery in-house as well with what we wanted to present and what we want to show customers, and made sure those two matched up," Osterfield said.
After that, the team went through the wireframing process, handing those over to the design team. When the design was finished, the team conducted another few rounds of testing and then implemented the final design
Navigating the navigation bar
As Osterfield said, one of the overriding goals for this project was to improve the navigation bar.
Previously, it was more of a click-and-find navigation. In other words, customers had to know exactly what they were looking for to be successful on the site.
In the redesign, the navigation bar was simplified, designed to better align with how a customer moves through the funnel. It involves more targeting, Osterfield said. It's based upon discovering what visitors want to do on the website and how NEB can help get them there.
For example, if a visitor goes directly to a product page, NEB understands the visitor has already made up his or her mind on what he or she wants to see.
Now, all of the tabs are available on the page
that has the protocol to use the product, update cues for using the product as well as all of the product's technical information.
NEB.com's redesign resulted in a 7.5% drop in bounce rate and a 13% rise in number of page visits. Additionally, the site realized more than a 74% increase in time spent on NEB.com after a product search, which means they were actually coming from Google, finding the right thing and staying there as opposed to finding something and bouncing back and forth, Osterfield said.
Now, she added, New England Biolabs knows that visitors are finding the content most relevant to them. The team largely attributes taking a customer-centric approach in the redesign's development to the site's success.
"You think you know what your customers want, but you don't until you talk to them," Osterfield said.
Observing them is crucial, too. As she mentioned previously, customers may say they behave one way; however, when they actually do something, they may do it completely differently (as the team saw in search behavior).
That hands-on research and testing was key.
"We're so used to pushing out our messages and what we want them to know, that it's really important to sit down and listen to what is it that they need to find," Osterfield said. "And that's what's really helped our website."
- New England BioLabs homepage— before redesign
- New England BioLabs redesign
- New England BioLabs product page
SourcesNew England BiolabsSitecore
— Content management platformISITE
— Digital experience agency
Related ResourcesE-commerce: B2B grows online traffic 25% through use of marketing cloudPersona Marketing: NetProspex increases website visit duration 900%, lifts marketing-generated revenue 171%Website Redesign: Message notification provider combines SEO with LPO, retargeting to drive 81% increase in conversion