A Marketing Upgrade for Science: Rebranding 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, I was tasked with the following:

  • 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 client's goals for the visual design of the website stemmed from the larger goal of 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) and was perfect for exploring a new direction for the CMSC brand. 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.

A visual inventory (top) is used for starting the design conversation by collecting examples and ideas within the topics of positioning, concept, color and tone. CMSC's visual inventory included a section on branding (bottom) that revealed a lack of consistency on their website and other marketing materials.  


A visual inventory (top) is used for starting the design conversation by collecting examples and ideas within the topics of positioning, concept, color and tone. CMSC's visual inventory included a section on branding (bottom) that revealed a lack of consistency on their website and other marketing materials.
 

I then looked at their logo and 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, along with the elements of the revised logo, began to develop a visual language.

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.

An Element Collage uses the design direction that was established in the Visual Inventory and creates a visual language, including color, typography, and other design elements.  

An Element Collage uses the design direction that was established in the Visual Inventory and creates a visual language, including color, typography, and other design elements.
 

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.

Click thumbnail to see full size


Click thumbnail to see full size

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.

Responsive Design

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 or you can truly paint yourself into a corner later on. 

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 easily find and interact with the site's content. 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.