3M

back icon Back to all Work

A Digital Campaign for 3M's Telecom Division

As the lead on the 3M account, I was tasked with developing both a campaign and digital experience that spoke to their suite of products in a better way.

The big problem was that many of the Telecom industry products are out of view of average consumers, hence we have no idea what they look like. On top of that, the goal of 3M was to also demonstrate the immense amount of technology that goes into these products.

My Role: UX Design, IA Architect, Art Direction, Usability Expert

Conceptual IA of the Experience

UX / IA Concepting

I began by working through rapid prototyping and card sorting exercises to start to grasp the 3M Telecom universe. After initial exploration, I moved into Axure to build a more clear prototype.

You can view it here.

Sitemap of the experience

Campaign Mood Explorations

After architecture was settled and vetted, I moved into developing a Visual style for the overall campaign and digital presence.

I started with two variations - on the left - and ended with a more refined version on the right. The light blue and technical diagrams as textures created a wonderful backdrop for literally exploding their products - revealing all of the technology within. The bright 3M red acted as a fantastic UI element and call to action across the systems.

Wireframe prototype of the experience

Solution Illustrations and Renderings - Part 1

Some of the Telecom Division's offerings were in the form of collections of products or, Solutions. This was actually a more difficult aspect of this project as I had to somehow show and explain to consumers what these solutions were and where they were.

I decided to approach the Solutions in an architectual, illustrative style, which accomplished a few things: Allowed us to visualize scenes in a slightly-less realilstic way, and we could render any potential scene in exactly the way we needed to.

Here you will see that each solution began with me taking instructions and requirements from engineers at 3M on how these Solutions exist in the real world, and then sketching a scene that fit.

Wireframe prototype of the experience

Solution Illustrations and Renderings - Part 2

Additional Solutions, sketched and then rendered as 3D scenes by a contracted 3D Artist. I would then take the scenes and layer in a watercolor effect.

Wireframe prototype of the experience

Solution Illustrations and Renderings - Part 3

Additional Solutions.

Wireframe prototype of the experience

Product Renderings and Designs

Another facet of this campaign was revealing the technology within individual products, that could sometimes look a little boring from the outside. Working again with the same 3D artist, we rendered and exploded all of the products from the Telecom division.

I took these and built interactive ads, website headers and more to allow Users to explore products and look under the hood, so to speak.

Wireframe prototype of the experience

Final UX and Front End Development Prep

3M worked with a company wide CMS system, which meant I had to as well. No problem! I quickly dug into their system, and rebuilt our original UX within the controls and framework available from thier CMS.

On top of that, I put together a robust one-sheet of a Style Guide for their developers to clearly understand my direction for every detail possible.

The Final Design of the 3M Telecom Campaign

Final Design

The final design was a clean, professional looking presence, within their company's framework. Our Solution renderings and product explorations came to life within their site, advertising and printed materials.

Header Tile

Selected work I've created