cmsc_case_study_0.png

Rebranding the Science of Measurement: CMSC

The key marketing channel for the Coordinate Metrology Society (CMS) is their annual conference website, CMSC.org, and it was long-overdue for an upgrade. It was visually dated, not responsive on mobile devices, and the information architecture had devolved into an unwieldy tangle. Based on that, we developed these goals for the new CMSC website:

  • Upgrade the CMSC brand

  • Redesign the look & feel of the website

  • Create a flexible visual system for consistency across the website

  • Improve the user experience (UX), especially for mobile devices

Positioning

The goals for the visual design was highlighting CMSC's position as a networking and educational resource for manufacturers and practitioners of coordinate metrology. Even though the CMS conference is somewhat unique as an event, I believed the website would benefit from emulating the best practices of other event websites, not necessarily science and technology sites. 

Revising the CMSC Brand

One of the tools used in the discovery phase, the Visual Inventory, helps generate conversation about design (color, typography, conceptual direction). I started with a branding survey of the CMSC website, collecting samples and combining them into a single collage. It was clear right away that their brand lacked consistency. I began to strip away all of the polished decoration, reducing the logo to its essence: the four-letter acronym and a few simple rule lines. I created a new color palette with the CMSC corporate blue as as a base and developed a visual language.

 
cmsc_case_study_3a.jpg
 

Creating a Visual System

After walking the client through the visual inventory and deciding on a design direction, I proceeded to create an element collage. An element collage is similar in structure to a mood board or a style tile except that, in most instances, only a single round is necessary since a visual design direction has already been established. While minor revisions might be necessary, the element collage is much more focused tool than presenting two or three different mood boards. It expands on the discovery phase of the visual inventory and provides an overview of the new website's look & feel.

 
cmsc_case_study_4.png
 

Typography is the heart of any website design, so for simplicity I used a single font for CMSC.org. Colfax fit my requirements very well since it has a broad range of weights, is built to be readable at small sizes, and the letterforms are constructed in a similar way to Eurostile, the font used in the CMSC logo.

Large blocks of color and thin rule lines made up most of the visual architecture for the site and the new color palette provided some much-needed vibrancy and contrast.

CMSC did not have a deep well of quality imagery. Most of their photo collection was comprised of snapshots from the conference's vendor floor or presenter talks. I decided to minimize the reliance on imagery and used the element collage (and later, page layouts) to guide the client on how to maximize the impact of their photos through careful selection and cropping.

Style Guide

One of the first layouts that the client saw was based on a modular template that could be used to build custom pages. I created this page as a sort of style guide, showing the client as many content components as possible in a single layout. While it would be unlikely a page this complex would ever exist, the style guide provided a good overview of how the visual system works, with real data filling out the content.

Once the style guide was approved, I used its design components to create key templates for the rest of the site. In all, nine templates were created to provide the framework for a site with hundreds of pages.

 
Click the thumbnail to see the full-size style guide.

Click the thumbnail to see the full-size style guide.

 

Responsive Design

Responsive_navigation_animate.gif

At the same time I was developing the style guide, I began working on the site's responsive design. I created five viewport breakpoints for the style guide which showed how each piece of content would reflow or repurpose to accommodate different screen sizes, from desktop all the way through to a smartphone.

One of the challenges in responsive design is deciding how to provide a good user experience with minimal screen space and what elements are mission critical. At what screen size will the main navigation collapse into a nested menu? Where will the global elements like member login and search functionality live on a smartphone? It’s critical to work out the answers to these questions early in the design process. 

To maintain consistent branding through all the screen sizes, the blue masthead and CMSC logo were retained (although reduced) all the way down to the smartphone range. At the first mobile breakpoint, 1024 pixels, the main navigation menu was nested into a single slide out menu. Also, the masthead would compress to display just the most basic functions once the user began to scroll down the page. This would allow for the greatest amount of real estate for content and enhance the mobile user experience.

A Major Upgrade for CMSC

The user experience of CMSC.org has been improved which allows exhibitors and attendees to find and interact with the site's content more easily. CMSC's updated branding better reflects its position in the marketplace as a professional science and technology organization, and they now have a visual system that can be applied across all of their marketing materials.