SARGENT Manufacturing • UX & Project Lead • www.sargentlock.com

 

About

SARGENT manufacturing is a premier U.S.-based manufacturing of door hardware. Their website is designed for architects, spec writers and distributors.

Responsibilities:

  • Project vision and team lead
  • Site and information architecture
  • Client relations
  • Project management
  • UX & Interaction design

Interactive Media Award:
Outstanding Achievement

Home Page

Products

SARGENT is all about products - and they have a lot. The site was designed to allow users to easily get to products they needed, or to introduce them to new products they may not have been aware of.

To the right is a zoomed in section of the landing page for exit devices.

panel2

Details

Individual product pages contain a wealth of information. Some products have dozens of functions, finishes and options. Tabs allow the user to browse all this content without losing their place. Hover elements allow new content to be shown without creating clutter on the page.

panel3

Strategic Interactions

One of SARGENT's toughest challenges was helping distributors with custom quotes. Often it meant ripping out pages from the catalog and photocopying them with annotations. We worked out a way to use the product database from the CMS to help distributors create custom "cutsheets" that they could tweak and deliver in the form of a professional PDF. Distributors loved it and were soon asking other manufacturers, "Hey, why aren't you doing this like SARGENT?"

cutsheet

Needle in a Haystack

How do you help someone find a document when there are 12,000 to choose from? How do you display the results when you have documents that have 8 types, 50 subcategories and individual versions? We created this document library that allows users to see exactly where they are in the hierarchy without losing their place and to see all the available documents for their selection.

panel5

Custom CMS

We created a custom CMS for the project that mimicked how the website worked on the front end in order to minimize training. In this example, the user is selecting trims for a particular product to be shown on the main site.

Backend

 
 

Behind the Scenes

 
 

Who is the user?
One of the main users of the SARGENT website is the distributor. We talked to distributors and SARGENT employees in customer service. Answer: distributors don't always have great computers, and they usually don't have a lot of time. The site had to appeal to their sense of practicality and offer quick solutions.

Cut sheet flow
This quick sketch outlined some of the major functionality envisioned for creating custom cutsheets

login

Extranet Login
One of the tricky items we had to overcome was how did users log into the extranet to check order status or download new documents? I worked out the logic with our lead programmer and we constructed this diagram outlining the login process.