SmartCells Cushioning Technology

SmartCells is a patented cushioning technology located in Chehalis, WA. SmartCells offer a suite of products featuring custom flooring, mats, and runners servicing a wide variety of industries and applications.

The current SmartCells website is built on a custom wordpress theme developed by a 3rd party. One of the main problems with the site is the information architecture and taxonomy. The entire website framework wasn’t responsive for mobile devices and tablets making the site impossible to access for a majority of the users.

As the company has grown in the past decade many things have evolved like their product offering, marketing language, branding, and types of applications. The company’s marketing efforts have also evolved over the years and want to run targeted campaigns for some of their niche target markets. Because of the limitations of the current framework we were unable to design complex page layouts resulting in a need for an updated platform.

PLATFORM:

WordPress Desktop Website

TIMELINE:

3 Weeks

MY ROLE:

Graphic/Web/UX
+ Photography

PROJECT LINK:

What was done:

As a full time employee at SmartCells, I worked closely with my manager on site direction, brand decisions, taxonomy, and site architecture. I also worked with our communications manager who handles our email and lead generation to make sure all our user flows were funneling correctly to our internal systems.

By the end of the three week period, I had completely redesigned our website and transferred all of the content, re-arranged the site architecture, and implemented our new brand styles across the board. I also photographed new product photos to create a consistent look and feel throughout the product imagery.

There were many pieces of the site that needed updates like the page layouts, product descriptions, and language so I kept detailed notes for changes to make in future iterations.

OLD SITE VS. NEW SITE

Here’s a quick comparison to provide some context.

HOME PAGE – BEFORE

HOME PAGE – AFTER

Planning

My plan with the project was to thoroughly analyze the current website to find out how things worked, what they did well, and what could be done better on the new site. Due to the very short project timeline I had to prioritize how I allocated my time. I spent most of my time picking apart the old site, strategizing the new information architecture, defining a consistent brand style, transferring content, and shooting new product photos.

Week 1:

Site Analysis

Navigation Audit

Framework Analysis (WooCommerce, Plugins, Internal Systems)

Install new framework & configure theme settings.

Week 2:

Define user scenario / persona using site analytics

Establish style guide and configure visual design via theme settings.

Strategize/ Implement navigation

Create Pages, Products, Forms

Week 3:

Product Photos

Uploading photo galleries

Testing payment gateways

Preparing site for transfer

User Data & Goals

I was fortunate enough to have some user data based on the google analytics from the previous site so I used that to determine user demographics and traffic sources. From analyzing this data I was able to get a rough basis for who the general user of the website would be.

Demographics:
Age: 25 – 64 years old (25 – 44 totalling 50% of traffic)
Gender: 52% female, 48% male

Traffic of Devices:
56.6% Mobile Devices, 39.5% Desktop computers, 3.9% tablets

Traffic Channels:
50% Organic Search, 34.70% Direct, 11.46% Social, 4.21% Referra

Possible User Goals:

Looking to purchase SmartCells for work or personal use

Looking to view services and applications; learn about technology

Could have trouble using computers and smartphones

Could work in virtually any industry and have an interest in the product

User Findings:

Are most likely visiting the site for the first time (90+% of the users are new users)

Could be from 25-65+ years old (25-44 = 50% of traffic)

Most likely owns a mobile device

Could work in any industry

Site Analysis

By performing an in-depth site analysis, I was able to identify pain points on the current site as well as areas for improvement.

Home Page = Blank

There’s literally nothing on the home page. Not a good start.

Navigation

SmartCells flooring and mats are suitable for a wide variety of applications with different purposes and functions. By using a multi-tier drop down, users will be able to navigate through the main applications and find specific niche applications within them.

Taxonomy and labeling

Something I noticed was that the labeling and taxonomy throughout the site was inconsistent. Also relating to that, the permalink structures were not consistent.

After thoroughly analyzing the existing site, I came to terms that there wasn’t anything about the site that I wanted to carry over to the new one. The issues present in the navigation have shown me that this is not an efficient way to organize the content on the site.

Findings

Key findings & Predictions:

I predict that keeping the “shop” separate from the applications pages would help eliminate confusion for our users and provide them with the tools they need to navigate efficiently. By separating the remaining pages into “technology” and “company” our users will be shown decisive navigation labels to guide them in the right direction.

A well designed home page could go a long way in guiding our users to the prominent sections of our site. By using elements like hero sliders the users wouldn’t even have to use the navigation unless they were looking for something specific.

Eliminating the duplicate items in the navigation will drastically reduce the amount of items that will be in the new navigation.

Attacking the Information Architecture

Some of the main problems that made the site hard to navigate was a mega menu navigation with photo icons as top level navigation items, inconsistent taxonomy, and poor link structures.

The results of my site audit determined that there were many overlapping sections in the current navigation that went to the same pages. In order to eliminate confusion and simplify options for users, the navigation needed to be rearranged and separated into more defined sections.

My Strategy:

Eliminate duplicate links

Rename pages/products so they are consistent and shorter

Compile all applications into a top level nav item.

Compile research, data, and technology into a “technology” top level nav item.

Shop

Previously, there were shop and product links in multiple sections of the navigation. I started by removing the products from the application dropdown and only displaying them under the “Shop” dropdown. This removed a lot of clutter from the applications dropdown and solidifies where users can shop for products.

Applications

SmartCells flooring and mats are suitable for a wide variety of applications with different purposes and functions. By using a multi-tier drop down to display the applications, users will be able to navigate through the main application categories, find specific niche applications, and read more about those specific applications.

The reason I decided to combine the three main application categories into a “Applications” navigation item was to provide a little context for the terms Anti-Fatigue, Fall Protection, and Performance Training. Some users may not be familiar with the terminology but should be able to use context clues to make sense of it.

The main user of the site will likely be baby boomers and in the manufacturing or safety industry so having clear navigation labels is important. By separating the navigation into two main sections of “Shop” and “Applications”, the users will be able to easily see the types of products offered by SmartCells as well as the different applications they are used in.

Technology

SmartCells patented cushioning technology is unrivalled in the industry of anti-fatigue mats and flooring. Explaining and showing the technology is difficult in its own and most users have questions about the technical specifications. To satisfy the needs of those users, I chose to add “technology” to the top-level navigation items.

Company & Blog

The company page contains all company information including the about page, contact page, and video library.

The SmartCells blog generates a good amount of traffic and SEO which is why I decided to keep it in the top level navigation.

Easy Expansion

With a technology that is easily adaptable for custom applications, I saw a need for the navigation to be easily expandable as SmartCells develops new products and adds new applications. By separating the “Shop” and “Applications” section, it will be very easy in the future to add new products and applications to the navigation.

Landing Pages

Since launching the site SmartCells has added a couple new applications they provide services for with custom landing pages. Since these are rather niche markets SmartCells, the best way to provide the necessary information and details was to use scrolling pages with anchor links.

Aging in Place Landing Page

Volleyball Landing Page

Challenge - Loose Ends

I ran into several gaps in user flows and processes that needed to be amended for the site to function correctly. Most of the applications linked to a generic contact form which only collected name and email addresses.

By building out several specific forms for: Quote Requests, Architectural Spec Requests, Application Specific Forms, and Newsletter Subscriptions I could tie up loose ends on the user flows throughout the site.

Result & Impact 
The result of this was a large influx in form submissions which generated leads for our sales team to follow up on. On average the site receives 5 new email subscribers, 7 requests for a quote, and 3 architectural spec requests per day. Those numbers may seem low but this is a great increase in comparison to the 2 email subscribers we would get per month on the old site.

More Challenges

Making sure to remain on schedule was something I constantly had to remind myself of. With so many updates and changes to be made it was hard to keep focused on the main goals without getting sidetracked on other problems. Rebuilding a site and designing it effectively is hard to do when your content and language is poorly written. Luckily our team is going to be completely redesigning all the page layouts in the near future.

My team and I continue to make updates and change the site sections at a time. The outcome of the initial launch was successful and I delivered all the components of the project and even had some time to shoot new product photos. The site has steadily gained traffic, sales, and leads since the launch which makes my manager and executive team extremely happy.

Looking Back

Looking back on it, I wish I would’ve fought harder to redesign the pages before the first launch. After launching, my team and I were constantly putting out fires once we found pieces of copy that needed to be changed immediately.

One thing that really stuck with me through the entire project is that content IS KING. I’ve known this for quite some time but this project really put in perspective how valuable content is to create effective designs.

Conclusions

At the end of the 3 week period, the new site was transferred over to the domain and we went live. Since then my team has been making updates and changes to the copy throughout.

The feedback we have received from our customers and internal employees has been good across the board. Most of our users find the site easy to navigate and that it looks very professional.

Overall WooCommerce sales have been similar to the previous site ($2,000 per month) but started to increase within 2 months following the launch.

As stated previously, we receive an average of 10 total form submissions per day throughout the various forms on the site. As a result, our sales team has been able to generate 58 new leads since the launch of the site (4 Months).