Website Redesign

The Request

I was brought onto this website redesign project to recover work that a third-party had done to redesign a public website in WordPress. Some of the goals of the project included:

Move existing site from Drupal to WordPress
Improve information architecture of navigation
Make site mobile-friendly
Keep some design elements from previous attempts
Modernize the look and feel
Improve the site to work better for business needs
Need site delivered ASAP

Primary Goal: Revamp website to merge elements from third party work and brand guidelines, make the site better align with company needs, and create a library of reusable elements

Tools: Figma, Hotjar, Google Analytics, WordPress, pencil & paper

Compatibility: Desktop & Mobile

Role: Sole UX Designer on project

700+

pages

~2k

views/day

~$170M

annual revenue

Research

Google Analytics Page Views

01
Determined which pages had low page views to determine if we needed to remove them from the new site
02
Collaborated with necessary stakeholders of each business line to determine if selected pages were still necessary
03
Outcome: removal of 60+ pages, resulting in saved design and development time on the project

Hotjar Heatmap Analysis Examples

Product Pages

Analyzed heat maps of product pages to understand where customers were reading/interacting the most.

Led to the decision to put main sections in accordion format to bring them higher on the page
Due to customers of different product lines favoring different sections, it made sense to keep all accordions closed when customers landed on the page
Due to high interaction with resources, we brought that section higher on the page and also created a section for related content in Product Details and Specifications where we could also draw additional attention to available documentation

Service Pages

Utilized heatmaps to guide content refresh while collaborating with Marketing.

Informed marketing of areas of the Service pages where customers were reading/interacting with the most
Noticed a high click count on non-clickable elements, so I improved the design to make it clear what was plain text and what was a link

Existing Filters

Performed analysis of existing filters and utilized this information to help guide the creation of new filters

Analyzed click-data on existing filters to understand if our information architecture made sense & to help inform the information architecture of new filters
High click numbers on the category labeled "Genewiz" led me to know that it was too broad a category that we could break down further
Also analyzed the number of results for each filter to determine if the filters worked properly to narrow down the results

Accessibility & Web Guidelines

Analysis

Utilizing WAVE (Web Accessibility Evaluation Tool)

01
Scanned the site built by the previous contracting company to look for some quick wins where we could improve
02
Noticed we could quickly improve in areas such as hierarchy, contrast, and link tags

Screenshots for wave results of the homepage from the previous attempt

Updates

Typography/Hierarchy

Added a body font so body text was not in a display font
Chose Noto Sans for body text because of its multilingual capabilities for Azenta's global presence
Improved hierarchy of text sizes to have a consistent structure to use throughout the site
Ensured the H1-H4 heading structure was always used in order on all pages
Increased body font to not be smaller than 16 pt

Colors

Made minor adjustments to the color pallet to improve contrast for web colors

Sketches

Sketched Ideas & Iterations

I utilized sketching to create possible variations of the same page and ideate on potential options for different sections of pages. I try to come up with as many options as possible at this stage and keep an open mind about possible solutions. I also had to keep in mind how flexible a design was. For example, I knew historically that our number of solutions and product categories changed frequently, so I wanted to ensure any proposed designs were flexible enough to work well as the company evolved and added or removed sections.

Information Architecture

Navigation

Footer

Simplified the link structure in the footer to highlight key links used by our customers and links that hold importance to the business.

Sign Up For Our Newsletter

01
I noticed we had a newsletter sign-up pop-up that appeared anytime someone landed on the home page and some other pages within the site
02
Hotjar showed an extremely high rate of customers closing the pop-up rather than interacting with it
03
I found we had customer complaints of scenarios where the pop-up was interfering with our customers' ability to do other tasks within the site
04
Our customer data showed that this pop-up was only accounting for 1% of all newsletter sign ups
05
With this data, I was able to collaborate with marketing, and we compromised on placing the newsletter sign-up form in the footer on the new site rather than having it remain a pop-up