Simpson Strong Tie

​If you don't know Simpson Strong-Tie, don't feel too bad, well…maybe a little. I didn't know of them either, but when I realized that they are responsible for my safety in probably 80% of every building I've ever set foot in, well I had to give a golf clap, a head nod, and agree to give them the best possible UX solutions I could come up with.

Simpson Strong-Tie makes things like joists, connectors, and well, everything else you might need to connect wood to wood or steel to steel or wood to steel, or...you get the idea. They are a long-standing, highly-credible company in the industry with almost no competition. Bet you ten bucks if you walk into a building with some exposed beams, you'll see the Simpson Strong-Tie logo on one of the connectors. They truly are the unsung heroes of the construction world, and their products surround us daily.

Traditionally a catalog company, Simpson Strong-Tie has a long history of marketing their products through print, and at the time of this project, their website was more-or-less a web representation of their print catalogs. From a UX standpoint, some of the biggest wins on this project is the internal shift that was made from how consumers use their print catalogs, and how users can use their website. 

Let's Start with Model Tables

This was by far the most complex aspect of the project. Each Simpson Strong-Tie product has a boat load of data related to it - everything from specifications, to building code approval documents, to potential weight load capacity when the product is used in a variety of combinations. It's truly mind-blowing and reassuring to know how much research goes into these little things. It's truly mind-blowing to try to understand all of this information in a single static format - a table.

A sample of 3 different tables on a single page of the existing website. A user may need to reference all 3 of these in one session.
A sample of 3 different tables on a single page of the existing website. A user may need to reference all 3 of these in one session.

For every type of data (code approval documents, specs, load information, etc.) a separate table is used in the catalogs. So for a user, once they have identified a model number that meets their needs (by comparing products within a few other tables), they then could access other information related to that single model number (in a variety of additional tables). My goal for the web was to bring this data together into a single experience, where a user could identify the model they needed, and access all related additional information in a single interaction. Below are some of the iterations we worked through:

Taking cues from airline websites, this concept combined faceted filtering options with stacked tiles of information - allowing dense amounts of imformation to appear compact and easily scannable.
Taking cues from airline websites, this concept combined faceted filtering options with stacked tiles of information - allowing dense amounts of imformation to appear compact and easily scannable.
The client wanted to go in a direction that was more aligned with a traditional type of table. This iteration is somewhat of a hybrid between the last design and a traditional table format.
The client wanted to go in a direction that was more aligned with a traditional type of table. This iteration is somewhat of a hybrid between the last design and a traditional table format. The details of each model would be revealed in an expanding row feature.
The heneral feedback was that we needed to be as close to a traditional table as possible, but still be able to simplify the data. This iteration is almost exactly a traditional table, but keeps with some of the functionality introduced in earlier iterations.
The general feedback was that we needed to be as close to a traditional table as possible, but still be able to simplify the data. This iteration is almost exactly a traditional table, but keeps with some of the functionality introduced in earlier iterations.
The expanded row feature for the third iteration. Additional information follows a list format.
The expanded row feature for the third iteration. Additional information follows a list format.
This final iteration is shown with the corresponding facets, a new toolbar for tools and info, and a slightly updated version of the previous table iteration.
This final iteration is shown with the corresponding facets, a new toolbar for tools and info, and a slightly updated version of the previous table iteration.
The expanded row in the final iteration utilizes tabs to help with both horizontal readability and vertical space.
The expanded row in the final iteration utilizes tabs to help with both horizontal readability and vertical space.

What About the Rest of the Site?

Well this project initially started out specifically focusing on the product page and the model table. However, after explaining to Simpson Strong-Tie that this one improvement would not solve their UX problems on its own, they were eager to upgrade the experience holistically. We spent several weeks afterwards doing quite a bit of cleanup on their information architecture, navigation patterns, site search, and page templates. The project evolved from a single template for the site, to a full site redesign with 11 templates and dozens of new components.

What This Means for Simpson Strong-Tie

While a good amount of the new pages are similar to pages we've seen before on other websites, this marks a turning point for the company, where the web will be utilizing dynamic features to help users navigate through their 25,000+ products, and this is only the beginning. With plans to focus on mobile optimization in the future, a clear fork in the road has been created that allows print media and web media to do what they do best in their own ways.

Snapshot

    Project Type
  • Website Redesign
    • Primary Role
  • Interaction Designer
    • Completion Date
  • May 6, 2013
    • Duration
  • 4 Months

Unlock My Full Portfolio

Enter your password.

×