Product Desig
Thumbs_Enterprise.png

Enterprise Software

2011-2013 — UI, UX, data visualization

Over two and a half years, I grew from a (very) green Product Designer into a Visual Design Lead at CA Technologies, a Fortune 500 company. 

While working on the CA Platform, I helped lead the effort to define a company-wide design language that synthesized design components, navigation, and layout for hundreds of disparate networking management products.

When I started at CA, I designed data visualizations for two key products.

When I started at CA, I designed data visualizations for two key products.

After a few re-orgs, I began to work on a more holistic design language that could be applied to all of our products, whether they were for security, network performance, or mainframe products.

The CA Platform style guide was born.

The CA Platform style guide was born.

This design language required us to look at CA's existing products, figure out what components were worth saving, and which were not. The end product was a simple style guide and component library that could be used by any designer or product manager to create a UI that would fit in with the CA product suite. 

CA_Platform_wiki-illustrations.png
A large part of designing for the Platform was creating extensible components for non-designers.

A large part of designing for the Platform was creating extensible components for non-designers.

With a product to designer ratio of about 10:1, there was no way we could design custom components for every product. So, getting the word out about our established design patterns and guidelines was a big part of the job. Internal wikis FTW. 

 Spec all the things, all the time. 

Spec all the things, all the time. 

 A deceptively large problem was helping product managers figure out which navigation pattern was best for their product. Flowcharts = foolproof.

A deceptively large problem was helping product managers figure out which navigation pattern was best for their product. Flowcharts = foolproof.

Enter Project Sabretooth, a drag-and-drop UI builder for execs and PMs.

Enter Project Sabretooth, a drag-and-drop UI builder for execs and PMs.

With our growing library of components, two engineers and I took on this project in our spare time. We created a drag-and-drop tool that exported static images or HTML. This allowed product managers to use our existing components in new configurations, with their own data but without breaking styles.

 In addition to concepting Sabretooth, I defined the information architecture and core functionality, mocked out wires and high fidelity designs, and presented these wireframes to higher level executives. We were given the green light to move forward with the project, after which I designed all the components for the proof of concept. 

In addition to concepting Sabretooth, I defined the information architecture and core functionality, mocked out wires and high fidelity designs, and presented these wireframes to higher level executives. We were given the green light to move forward with the project, after which I designed all the components for the proof of concept. 

 Within the Product Builder, there are two modes: Edit Mode for dragging on components and customizing them, and Preview Mode for seeing the final product, exporting, and sharing.

Within the Product Builder, there are two modes: Edit Mode for dragging on components and customizing them, and Preview Mode for seeing the final product, exporting, and sharing.

CA_Sabretooth_Component, preview, pages.png

As another innovation project, we created a WebGL globe prototype for the Kinect. Very now, much 2012.

The intended use case for our proof of concept was troubleshooting in a Network Operations Center, where administrators monitor different data centers around the globe.

Remember life before flat design?

Remember life before flat design?

When I joined CA, this dashboard was one of the first projects I received recognition for. Responsive design was a fancy new thing back then. This dashboard exemplifies the style being used before we designed and fully adopted the Platform style guide. 

 Widgets available for fully customizable dashboards depending on the type of data being reported.

Widgets available for fully customizable dashboards depending on the type of data being reported.