A massive UX overhaul for a steel framing giant

Project Summary
While working at Fruition, I led a full website redesign for CEMCO’s main online presence, cemcosteel.com. Based in Denver, Colorado, CEMCO is recognized as one of the largest manufacturers of steel framing and metal lath systems in the United States.
User Flow Assessment, Competitive Analysis, Mood Boards, Information Architecture, Wireframes, Mockups

The Problem
CEMCO’s online presence was dated and split across two separate websites; neither was optimized for use on mobile devices.
Project Goals
•  Craft an on-brand, modern and responsive B2B website that showcases CEMCO’s products, services and past projects.
•  Retool CEMCO’s Submittal Creator so it’s more intuitive and optimized for use on mobile devices.
•  Increase search engine rankings by optimizing the site’s content and information architecture.
•  Fold CEMCO’s separate Structural Engineering website into CEMCO’s main website, cemcosteel.com.
The Process
Stakeholder Interviews & Plant Tour
To gain a better understanding of CEMCO’s products, services, customer base and business goals, we conducted interviews with key stakeholders on the business development and marketing teams. We also took a quick guided tour of their manufacturing plant located in Denver, CO. The tour provided us with a deeper understanding of CEMCO’s products and manufacturing processes and also allowed us to snap off a few quick photos to use in our mockups.
CEMCO Manufacturing Plant in Denver, CO
CEMCO Manufacturing Plant in Denver, CO
CEMCO Manufacturing Plant in Denver, CO
CEMCO Manufacturing Plant in Denver, CO
User Flow Assessment
We conducted a user flow assessment to identify usability problems, uncover pain points and gain a deeper understanding of how visitors move through the site, find products and complete key tasks such as finding a distributor or creating a submittal. We uncovered a number of usability issues (seen in red) and identified numerous opportunities to improve the user journey.
CEMCO — User Flow Assessment
Competitive Analysis
In addition to the user flow assessment, we also conducted a competitive analysis to take a closer look at some of CEMCO’s direct and indirect competitors. We looked at a few key pages and tools (such as a submittal creator) to see how other companies with a similar product offering solved the same design problems. For each company, we looked at the home page, a product detail page, a service page, the submittal creator and the mobile experience.
CEMCO — Competitive Analysis — Clark Dietrich

Clark Dietrich

CEMCO — Competitive Analysis — Marinoware


CEMCO — Competitive Analysis — Telling Industries

Telling Industries

CEMCO — Competitive Analysis — Indirect Competitors

Indirect Competitors

Mood Boards
Three mood boards were created to establish an overall look and feel for the site’s visual design and tone. Since CEMCO already had a well-defined brand in place, examples from various websites were used to get a general feel for different visual styles. 
CEMCO — Mood Board 1
CEMCO — Mood Board 3
Wireframes were created for several of the site’s key pages to show the types of content on each page and how that content could be arranged to optimize the user journey, organic search results and the overall user experience. We focused our attention on the product pages to show how the user would progress to product detail pages. Ultimately, we introduced another page type—a quaternary page template—in order to accommodate CEMCO’s extensive product variations.
CEMCO — Home Page Wireframe

Home Page

CEMCO — Product Landing Page Wireframe

Products Landing Page

CEMCO — Products Category Page Wireframe

Products Category Page

CEMCO — Products Subcategory Page Wireframe

Products Subcategory Page

CEMCO — Product Detail Page Wireframe

Product Detail Page

Once the wireframes were approved, we moved on to the mockups. To save time in both the design and development phases, we reused page templates for multiple page types. For example, the Products, Services and Company pages all use the same template.
CEMCO — Home Page Mockup

Home Page

CEMCO — Products Page Mockup

Products Page

CEMCO — Product Detail Page Mockup

Product Detail Page

CEMCO — Services Page Mockup

Services Page

CEMCO — Service Detail Page Mockup

Service Detail Page

CEMCO — Projects Page Mockup

Projects Page

CEMCO — Project Detail Page Mockup

Project Detail Page

CEMCO — Find a Distributor Page Mockup

Find a Distributor Page

CEMCO — Contact Us Page Mockup

Contact Us Page

Optimizing the Mobile Experience
Many of the site’s visitors are working remotely, using mobile devices. It was important that we made the site accessible and easy to use on smartphones, phablets and tablets.
Various Mobile Mockups
CEMCO — Mobile Mockups
Reworking the Submittal Creator
The most challenging UX problem to solve for this project was the Submittal Creator. This tool allows users to compile product details into a single PDF that can be presented to an architect or engineer. Submittals are needed to ensure that the correct products are being installed on the project.
CEMCO — Submittal Creator — Before


CEMCO — Submittal Creator — After


To make this tool more intuitive, we had the client explain how the tool works from both a front-end and back-end perspective. This technical discovery allowed us to gain a better understanding of the tool and its flaws.
How We Improved It
•  Cleaned up the information architecture, creating four main product categories organized into four tabs.
•  Improved the visual design and user experience by adding cues to open and close accordion menus.
•  Added a sidebar which allows the user to preview and edit contents (and did you notice that it looks like a legal pad?)
Additional Submittal Creator Mockups
CEMCO — Submittal Creator Page Mockup

Submittal Creator Page

CEMCO — Download Submittal Page Mockup

Download Submittal Page

It was imperative that the submittal creator also work on a variety of mobile devices. We used tabs stacked vertically, similar to tabbed file folders in a filing cabinet.
CEMCO — Submittal Creator Mobile Mockups
The submittal creator also allows the user to edit the contents of the submittal. A repeating background pattern was used to make the contents look similar to a legal pad.
CEMCO — Submittal Creator Mobile Mockups


Results & Lessons Learned
We merged CEMCO’s separate engineering website with their main website. The site’s architecture, user journey, visual design and messaging were all optimized to provide a solid user experience on both desktop and mobile devices. In additional, we improved the Submittal Creator, providing a robust tool for the user and a powerful lead generator for the client.
Lessons Learned
•  Iterate. Sometimes the first solution isn’t always the right solution. Iterate until you find a solution that solves the problem.
•  Conduct a Technical Discovery. Use a technical discovery to fully understand the functionality of more complex tools.
Interested in hiring me for a project? Get in touch!

More Projects

Back to Top