qualys.com

Everything visible. Everything secure.

since 2018

Qualys reimagined

Role  Visual Design, Branding, Graphic design, Marketing

 

Timeline  From 2018 Feb - present

 

Team  Qualys marketing team, Develop team,  Communications team 

 

Tools  Adobe Illustrator, Adobe Photoshop, Adobe Efter Effects, Adobe InDesign, InVision, Sketch, PowerPoint, Excel

Qualys is a global IT security company that provides cloud-based security service. Qualys has more than 1400 employees and over 11,000 customers around the world.


I have been creating Qualys’ marketing collaterals including the company’s web pages, promotional booklets and other printed materials, email templates, and event branding by using their newly renewed logo and the brand guidelines. At the same time, I have been optimizing and enhancing the branding by adding new visual assets including new illustration styles - company characters, Isometric icons, and other graphics.

This page presents my creative process while also displaying what I have achieved in the past two years with this company.

Qualys illustrated

01

Communicating the values and personality of the brand

To promote the Qualys Cloud Agent and the company’s chatbot I designed original characters, including Agent Q, from scratch. The illustrations are used on the company’s webpages and printed materials.

Qualys Cloud Agent webpage

 

After I created the Agent characters, I redesigned the whole Qualys Cloud Agent webpage. It had more text and fewer images which weren’t effective for viewers. Now the page has more images that grab the users’ attention and make the content look more interesting.

Other pages

 

The company also featured them on other web pages. The characters are becoming beneficial in introducing the company’s new products and services because without them these web pages would be too text-heavy and overly sober.

Animated illustrations

 

By adding movement to the illustrations we intended to immediately capture the eye of the user and make the content more accessible. To make these animated illustrations, I collaborated with an animator. I created the illustrations and provided the files and she added the movement.

Designed responsively

 

The illustrations and the characters are generally omitted from tablet and mobile versions because of the smaller screen sizes. However, to avoid text-heavy content, we still display the characters on a small portion of the page.

The process

One challenge during this process was that Qualys did not have any style guidelines for illustration and character development. I had to create the characters from scratch through research and ideation, simultaneously developing an illustration style along the way. I personally did almost all of the designs, including the ideation, hand drawing, and digital sketches, and I finalized these with the creative director.

Sketches

 

After we gathered the initial ideas for the characters - a man and woman in a suit - I hand drew the sketches. During this phase, I was able to figure out some key gestures and movements for the characters.

 

The main gesture for the male agent is of him looking through binoculars, which represents his efficiency as a problem solver. The female agent is standing and holding a tablet, which represents her readiness to analyze the customers' pain points and what they need.

Iterations

 

To finalize the characters I have experimented with different colors and coloring styles, to find the boundaries of each character’s expression.

Initial sketch

Refine sketch

Digital sketch

Coloring option-1

Coloring option-2

Coloring option-3

Coloring option-4 & finalizing

Initial sketch

Refine sketch

Digital sketch

Coloring option-1

Coloring option-2

Coloring option-3

Coloring option-4 & finalizing

Taking it easy

02

Derive simplicity from complexity

To make the company’s promotional materials more interesting, I created a simplified version of UI illustrations.

 

When a company promotes its services and applications, it might want to show the products that it offers. However, showing the actual product immediately, presenting it everywhere, or using it on promotional materials could overwhelm viewers. It also wouldn’t be very visually engaging. Thus, by creating an artistic version, the company’s promotional materials seem more intriguing.

UI illustration in 2D

This 2D version is a simpler version of the actual products. Working with what the company provides, I decide which widget I want to keep and emphasize. I then reorganize the items and simplify the designs with brand colors. We use these for marketing materials, i.e. landing pages, emails, and printed materials.

UI illustration in 3D

The other UI illustration style is 3 dimensional. After creating the 2D simplified version of the products, I distorted the graphic and readjust the elements. The 3D UI illustrations are used especially for free app services to create a more inviting look that incites user interest in the apps extensive features.

The Showstoppers

03

Setting the trend

In the past, Qualys had only used 2D icons. While I was redesigning and creating a promotional website and other visual materials, I realized that we needed to adopt an Isometric illustrations style, to keep up with the most current trends in the tech industry. I created some icons and illustrations using a more contemporary style which gave the product pages and promotional collaterals a more executive look.

04

Website graphics

Make something of nothing

As the sole designer, creating the hero graphics for the company’s website and promotional landing pages is one of my main and exciting jobs. I created abstract graphics, typographies, diagrams and manipulated photos based on the contents. I usually get ideas for the graphics from the materials the company wants to promote.

Main icon style

This is the main icon style that existed before I was hired. Although they had this solid style they didn’t have specific guidelines, for example, the spacing and line weight. I have defined them and updated the brand guidelines.

Sub icon styles

Since there are so many different cases in which I couldn’t use the main style, we have created these three sub icon styles which we can use flexibly for media characteristics and situations. The one on the far left is for the cases where the color red is inappropriate. The middle icon is for darker background visuals and the far-right icon is for the cases that require a more subtle icon.

Icon usage - digital designs

The icons are used for the products’ descriptions, the website’s navigation menu and other visual collaterals. 

Icon usage - Executives' presentation & keynote / Printed materials

Most importantly the icons are also used for executives’ keynote presentations. The icons and diagrams play a significant role in these presentations to ensure the accurate relay of information.

05

Say it with icons

Loud and clear

In line with Qualys’ branding, I created 2D icons as well. The company had 20 main icons when I was hired, and I have added more than 200 icons which are practical and reflect Qualys’ brand identity since I joined.

06

Reflection and the future

My journey in the company

In creative lines of work, nothing happens overnight. I have gradually developed the brand images and adopted new styles during my tenure at the company. Through this experience, I have realized a new appreciation for the small steps of a process.

 

It was fascinating to witness the expansion of the brand assets and how they pushed our boundaries, ultimately leading to a tighter, more concrete vision of Qualys’ entire brand. I have learned the flexibility and versatility of branding and I take this perspective with me in everything I do.

 

I’m excited by the prospect of continuing the extensive process of defining brand guidelines and web design system guidelines to help shape the future of Qualys.