Hi, I'm still Petter Johansson, Graphic Designer from Västerås, Sweden.

This is a showcase of the work I did for ABB Control Technologies.

Control Technologies
In-house Graphic Designer
2013-2015

About Control Technologies

Control Technologies is a unit of the global power and automation corporation ABB. CT aims to push the envelope of industry automation by developing, marketing, and selling world class process automation systems, including hardware, software, control room ergonomics, and related services.

My role

As the inhouse graphic designer and a part of the marcomm team, I produced marketing and presentation material for both print and digital, including brochures, roll ups, infographics, and icon sets.

Print

Background

Although ABB is transitioning towards a prominently digital presence, there is still need for carefully designed documents in classic print formats, digitally available, as well as print on demand.

Challenge

ABB has extensive visual guidelines for multiple types and levels of marketing materials. My challenge was to enhance any marketing message by presenting content in a structured, palatable, and inspiring manner, while keeping ABB's visual identity intact.

I also had to be prepared for on the fly changes, and keep the back end structured and organized, so that I could easily backtrack and repurpose archived content.

Solution

After studying the visual guidelines, I built my own InDesign template, carefully looking over every structural aspect, to work smart, optimize workflow, and keep quality consistent.

I aimed to create pleasing layouts with efficient white space usage and balanced spreads, all within the boundaries of the guidelines.

Result

By being prepared and working in close proximity to ”the client”, I could quickly iterate and deliver, saving time and resources.

And by being thorough and detail oriented I delivered print material in a style and quality that reinforces the customers' impression of ABB as being best in class.

Isometric Graphics

Background

ABB often uses isometric graphics to visualize different concepts, environments and products. The graphics are used in all types of marketing material, as separate elements or combined.

Challenge

Drawing 2D isometric graphics is a challenge in itself, and takes planning, consistency, and a good sense of three dimensional space without perspective.

These objects would also have to work like building blocks; to fit together in a scene, or combined with eachother.

Solution

By setting up an isometric grid and creating simple building blocks I could quickly assemble buildings, equipment, and various objects. In more complex cases I vectorized extruded 3D objects.

I added shadows to enhance the sense of depth and direction.

Result

By attaching graphics to an article or presentation, ABB enhances its message by clarifying the context and easing the need to explain complex concepts in text.

Hardware Clip Art

Background

To more easily present and visualize its complex systems and wide array of hardware products, CT uses custom clip art in simplified architectural drawings.

These clip arts are used in print and presentations, and in Microsoft Visio, where sales persons can build their own configurations.

Challenge

The art style and system were already established when I arrived. My challenge was to emulate and evolve the style when expanding the collection of clip art.

The clip art must be distinct in small sizes, but detailed enough to be scaled up.

Solution

Due partly to the established style, lacking original files, and the widely different products, I had to explore different solutions to recreate the style, and keep files dynamic and non-destructive.

Result

There will always be new hardware to add to the collection of clip art; first party, partners’, or third party products, and other miscellaneous objects.

My work allowed marcomm, sales, and engineers to further visualize and explain products, systems, and new features, in the end leading to more business.

System Setup UI

Background

To install System 800xA, CT's flagship system, the user needs to prepare each PC with a system setup app, which historically has looked unintuitive, off brand, and outdated.

I was asked by R&D to help design a new system setup screen.

Challenge

Lacking UI guidelines, in the borderland of product UI and visual identity marcomm, without inside access to prototyping beyond screenshots, I was to design a modern looking first impression of a high end product, which was also the crucial first step of a complex installation process.

Solution

Together with R&D we distilled the original UI to its most essential elements, and iterated in wireframes. I then created mockups with extensive guidelines for R&D to follow.

I also drew the icon for the mounted drive, depicting the USB drive itself.

Result

My work led to a modern looking setup screen which gives a more fitting first impression for the world class automation system it precedes.

Installation Manual

Background

Installing System 800xA has historically been a daunting task, even with its thick and dense installation manual. This is something R&D has worked hard to simplify.

Challenge

R&D approached me again, this time to work on a streamlined installation manual which would guide the user through the most basic steps.

The vision was to ”IKEA-ify” a seemingly complex process, to show that ’anyone’ can do it, and then distribute the manual together with the installation media, both in printed and digital form.

Solution

R&D delivered a draft, which I cleaned, refined, and created a new layout for. I iterated together with my colleague and client from R&D to simplify and optimize the visualization of the process.

I designed the manual around the already produced product box, deciding on a business card sized accordion fold.

Result

The result was a modern looking, streamlined, and tested nine step instruction manual which not only guides the user through a critical process, but also embodies the UX vision of System 800xA as a modern and user friendly system.

Service Icons

Background

CT Service offers multiple services in varying scope and complexity. Service marcomm felt the need to visually highlight and clarify these offerings, both internally and externally.

Challenge

My challenge was to create a set of icons that clearly and intuitively communicated CT Service's main offerings.

The icons had to be compatible with ABB's visual guidelines, internally coherent but individually distinct, universally suitable for screen and print in varying sizes, as well as expandable for future additions to the set.

Solution

Together with a colleague from Service marcomm, representing the client, we developed a simple icon system were each service, drawn as intuitive metaphores and/or minimalistic representations, were framed by a wrench icon, representing Service as a department.

Result

CT Service now has an array of icons and a system to build upon, to use in communications material to highlight and clarify its strongest service offerings, raising awareness both internally and externally.