Design Systems

Over the course of my career I've helped companies from start up size to enterprise create and hone their brand and visual identity through the creation of design systems.

Before these projects begin there is typically a lot of confusion for teams and companies. When they are complete individuals have an understanding of what is "on brand" or in keeping with the company's interaction guidelines.

Unlike the other pages of this site which are formatted like a case study, this page covers 10 years of work and shows how design systems I've worked to create help marketing, design, sales, and development teams achieve a unified look and feel.

Condominium Brand Guidelines and Design Systems

Copperleaf was one of the many projects I worked on while at Matrix Real Estate. It was a new construction condominium complex in Issaquah, Washington. They came to our firm with no visual design or marketing plan.

As the visual designer I worked with our VP and Director of Marketing to help craft a vision for the community, and then went to work designing a visual design system and brand identity from the ground up. More details on this particular project and collateral can be seen here.

In addition to Copperleaf I designed several brand identities for communities from downtown Seattle to Issaquah to Edmonds. Each had it's own voice but always involved creating a cross-platform marketing campaign.

Collateral Created:

Logos
Brochures
On site large format prints and posters
Flyer templates and guides
Online banner ad campaign templates and final ads
A community website

Microsoft Dynamics DPO

Several years ago Microsoft began an initiative to update it's visual design for a more modern era. Several products, including the Surface, xBox and Office Suite bear the fingerprints of this work today.

When the effort began a lot of the documentation was made by designers for designers and was difficult for many outside of the profession to digest (or in some cases find). I went through hundreds of pages of documentation and distilled it down to its core, creating a 12 page interactive pdf that content creators in the field could reference.

I then worked with the team to design templates so that field agents could quickly create on brand content.

The key to making the Dynamics project work was including easy to follow guidelines around the topics that content creators would use every day and getting rid of anything extra. In addition to the "rules of the road" the guide also included links to key typefaces, photos and other resources.

When the project was complete I and thousands of content creators were able to quickly create on brand material for the Dynamics team that sat safely within Microsoft's overall brand strategy.

Collateral Created:

The quick guideline (pictured above)
150 new icons
Several PowerPoint template decks
Templates for monthly reports
Video training material on how to use the collateral that had been created

Logic20/20

Creating visual design guidelines for non-designers can be an interesting challenge. Many of the tools designers take for granted (like the Adobe Creative Suite) are not always available. In this project for Logic20/20 I had the unique challenge of building on an existing brand, but making it accessible to business management consultants and sales people.

PowerPoint was the language the company spoke, and all of the design work had to be done so that non-designers could interact with it and create unique presentations on the fly without the need of a visual designer standing over their shoulder. This included strict guidelines around what typefaces to use and when along with a robust and resizable icon library that could be used to illustrate the services the company wanted to sell.

Using the guidelines, tutorials and other documentations, simple but effective slides like the slide above could be created by anyone with access to PowerPoint.

When complete, the project enabled anyone in the company to create a stylish presentation. This work would later go on to inform a complete redesign of the company's website.

Collateral Created:

New visual look and feel for a company transitioning from start-up to established
Training documentation and classes
200 resizable and customizable icons and illustrations
New PowerPoint template decks
250 stock PowerPoint slides
Brand guidelines documentation that would go on to inform a complete overhaul of the company marketing materials

Windows Store for Business

Sometimes design systems require pixel perfection. Such was the case for the Windows Store for Business. In this case an extreme attention to detail and an understanding of what could be technically built was needed for both the designers that would work on the project as well as the developers who would build it. While working with this team in addition to standard UX work I would also help to create and maintain an internal styleguide that would ensure our development partners work quickly and efficiently.

Here our main challenge was to take the existing Microsoft style guides and translate it into components and widgets that were both true to the guide, but also could function across desktop, tablet and phone. The illustrations above and below show how a card would resize across breakpoints or devices.

The samples shown here would go on to form the foundation of the dashboard interaction patterns or both desktop and mobile platforms. A deep dive into this project can be found here.

Collateral Created:

Page patterns for desktop, tablet and mobile
Type ramp guidance
Interaction patterns and specifications on living style guide website