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
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.
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.
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.
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.
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.