company background & intro

API is a global metrology company that specializes in the sale of measurement & calibration products/services. The company is well-know for their award winning Radian Laser Tracker which is used to measure very large, high-precision parts with extremly tight tolerances. Industries they serve include Aerospace, Shipping & Transportation, Military & Defense, Manufacturing, Automotive, & Robotics.

my role

I worked as a Marketing Designer for the company. I was mainly responsible for the website redesign but I also assisted with the rebranding of the company as well.  The duration of the redesign & rebrand took 6 months with a team of 3 people.

the problem & project goals

API has been serving its customers for 30 years, however the growth of the company has always been a struggle. Even though they were able to maintain strategic partnership and customers, their brand awareness was very low.

Our team, noticed many issues with the company's branding that needed to be changed. These issues also translated over to its website which I was mainly responsible for. Some of the key issues our team noticed with the website include the following.

  • Poor overall visual design
  • Hard To Use Navigation
  • Low Conversion Rates < 1%
  • Long average session duration
  • Poor product imagery

Our team put together the following project goals within the 6 month timeline we were given.

  • Create new brand identity & visual design.
  • Implement website redesign with improved UX.
  • Increase website engagement & conversion rate to at least 2%.

the process

discover

  • Analyze KPIs
  • Interviews
  • Personas
  • Competitive Analysis

define

  • Information Architecture
  • Sketches
  • Wireframing

design

  • Brand Identity
  • Visual Design
  • Development

measure

  • Review KPIs
  • Share Insights
  • Next Steps

reasearch & discovery

I spent the first month on the project doing research & discovery. Our team needed a baseline to show to stakeholders that a new brand identity would improve the issues found on the website and also improve the overall customer experience. During this phase I also learned more about our users & customers and some potential pain-points we needed to account for.

analyzing website performance

I implemented Google Analytics & Google Tag Manager on the current website to determine KPIs such as goal conversion rate, avg session duration, bounce rate, and device use information.

We had the following goals established on the website.

  • Request Service Quote
  • Request Product Demo
  • Download PDFs and Digital Brochures.
  • Newsletter Sign-ups

Are we successfully engaging our users who visit the website?

After a 1-2 months of data collection we found that we had a average conversion rate of 0.89%. This was pretty poor considering the industry goal is around a 2% conversion rate.

How long does it take our users to navigate our website? Are they able successfully find what they need?

For the users who didn't immediately bounce off our website, we found that average session duration to be around 4-5 minutes. Taking this KPI along with the low conversion rate, our team made the assumption that this high average session duration is probably due to users not successfully finding what they need.

How many of our users are on a Desktop/Laptop devices vs Mobile Devices?

We found that majority of our users who visit are website use Desktop/Laptop devices vs Mobile Devices. About 60% were Desktop/Laptop users while 40% were mobile.

 

interviews & personas

After analyzing the website KPIs, I wanted to learn more about the company, it's customers, & the metrology industry as a whole. I was able to interview 3 key stakeholders in the company from the following departments: Sales, Technical Support, & Product Management (Hardware).

  • How long have you been in your current role with your company?
  • What is your primary responsibility?
  • What does a typical work day consist of?
  • What applications do you use to carry out your responsibilities?
  • Who is involved in the buying process? Who initiates the process and who makes the final decision?
  • What steps do customers go through before making a buying decision?
  • What are the top issues/problems you have heard from customers using API products?
  • Do you routinely collaborate with others, and if so, how often.

I also did some online research and synthesized the information gathered from the interviews to come up with the personas below.

Image Image

competitive analysis

API has two main competitors for its measurement products/services. Hexagon is the largest of the two while Faro is second largest. While looking at these sites, I took note of the following.

  • Overall Visual Design
  • Navigation
  • Product Page Design
  • Imagery/Media
  • Copy
  • Call-To-Actions

While API was behind in many of these areas, I noticed that improvements to the product page design and navigation could provide a better competitive advantage.

Another key observation is that brand identity of both Hexagon & Faro was much better. Thus concluding that improving the brand identity for API will help with the overall visual design issues.

information architecture

Our team held a workshop with the stakeholders to come up with the proposed sitemap/IA of the new website. We reviewed the content organized on competitor sites, information from the interviews, & goals of the company. These activities helped us create the sitemap/IA below.

Image

wireframing

Next step was coming up with the wireframes for the following pages/features.

  • Homepage
  • Navigation
  • Product Page
  • Service Page
  • Request Contact Form

Our team initially had a brainstorming session on what these pages could look like. We reviewed all the information collected from the previous steps and used Balsamiq to get an overall idea of layout for these pages.

Image

final design & development

Once we had the proposed wireframes complete, our team worked on designing & developing the new site.Our team came up with proposed visual identity for the company. The new logo, tagline, colors, & imagery is more aligned to the company's vision.

Image

homepage design

This was the final homepage design that was launched on the website. Hero section contains all the new promotions for products, new articles, and services offered. The page also contains current company offerings and all the products available on one page.

Image

navigation design

The new and improved navigation recieved positive feedback from users and stakeholders. Having a description & imagery within the mega menu help users find what they needed faster.

Image

product page design

This product page design was applied to all products on the new website. Each page has slight variations to it such as additional hero images, additional product sections but still closely resembled the original wireframes.

Image

final results and lessons learned

3 Months after website launch our team noticed a positive results of the KPIs establish at the start of the project. We observed the following:

  • Average Session Duration 2:30 min/secs
  • Goal Conversion Rate 3-5%
  • Reduced bounce rate to 55%
  • Overall Positive Customer Feedback

Not only did our change help find what our users needed faster but we were converting new users and gaining more leads.

Even though this project was successful, our team noticed some areas we could of improved on. We wanted to do more users interviews and get more feedback during the design & development phase. Also stakeholders we too much involved some design decisions.