top of page

CIO/CISO Interchange

Building security into the digital transformation – not bolting it on.

2020

Rebuild a new home

Role

 

Timeline

Team  

 

Tools  

Event landing page visual design, branding

Three weeks


Qualys Marketing team

Sketch, Adobe Illustrator, Photoshop, Invision Studio

CIO/CISO Interchange is an invitation-only, exclusive event that promotes discussions, debates, and exchanges with C-level executives centered around the challenges and opportunities Digital Transformation brings to security. As an elite event, attendance is limited to senior technical executives.

The event opened on Feb 24th Monday 2020 in the Four Seasons hotel in San Francisco and it successfully ended with about 150 A-list attendees.

 

Since it had a complicated web structure and user experience, the website needed to be redesigned and restructured. I redesigned the website from the bottom up, including registration and confirmation pages as well as other marketing materials.

Design process

00

Beginning of the journey

There were five steps to the creative process of the CIO/CISO Interchange event homepage, registration and confirmation pages.

Discover

Project background

User information

Competitors

CIO/CISO old look

Challenges

Goals

Group 39.png

Research

Define

Brainstorming

Keywords & Strategy

Idea sketches

Moodboard

Ideation

Group 27.png

Distill

Wireframe

Column grid

Visual exploration

Colors & typography

Shaping

Group 36.png

Deliver

Final design

Finalization

Group 24.png

Determine

What I have learned

Lessons

Group 26.png

01

Discover

Research

Background exploration of the project included the study of the users and competitors. Also, I analyzed the problems of the old design and the user experience. After that, I could identify the challenges that I need to overcome and solve, and the goals that I need to achieve within this project.

Project background

CIO/CISO Interchange is a non-profit, non-commercial organization that was Co-founded by the CEO of Qualys and the Cloud Security Alliance (CSA). It’s an open forum for discussion, debates, and exchanges between C-level executives: CIOs, CTOs, and CISOs.

 

In Feb 2020, I started to work on the CIO/CISO Interchange conference event page including registration and confirmation flow. Since the previous homepage was divided into several pages and it was inefficient for the user flow, they wanted to make the event page uncomplicated and more efficient.

CIO-10.png

User information

The organization qualifies all attendees to ensure the best possible event while also limiting the number of total attendees.

CIO-11.png

Competitors

I researched similar tech-generated and cybersecurity-related annual conferences. I looked at how they organize the items such as agenda, speakers and maps to the conference as well as which graphics they used.

 

Oktane is an IT technology conference that is held by Okta. Oktane introduces different visual concepts for their annual conference and the design concepts are simple and modern.

 

Splunk.conf is the premier education and thought leadership event for thousands of IT, security and business professionals looking to turn their data into action. I like their design for the event but I think the homepage has too much general information instead of introducing the event itself such as speakers and agenda, etc.

 

Knowledge now is held by ServiceNow and the event is where people come together to take work to the next level. They didn’t separate the event’s homepage and visual concept from their parent website, instead, they added an event section on the company’s website with the same visual ideology.

CIO-12.png

CIO/CISO Interchange old look

After I looked at other event homepage designs, I closely looked at the CIO/CISO’s website itself. The director and I thought the homepage was too short so we decided to merge the homepage and the event details page. The website also needed its own visual concept which would appeal to the targeted audience.

CIO-35.png

Challenges

I organized challenges based on their complexity and urgency and mapped out how they should be approached and what were the possible solutions.

CIO-14.png

Goals

I organized the business and project goals to have a clear vision of the website I needed to create and what criteria would be necessary to make it successful.

CIO-15.png

Define

02

Ideation

This process shows how I came up with the keywords, visual strategy and the concept. 

Brainstorming

During and after the research I made notes that would help to narrow down keywords and visual concepts. I tried to think about the project broadly, not limited to the event homepage design.

Group 13.png

Keywords

I have gotten three keywords that were extracted from the event concept, overview, tagline, and research. The keywords are exchange, interaction, and gathering: the event gathers like-minded people to encourage the exchange of knowledge through focused interactions.

CIO-18.png

Visual strategy

During brainstorming sessions, I consult Dribbble, Pinterest, Shutter stock, Behance and more. I wanted to be more abstract with the visual strategy so I sought out unique and fresh ideas. I made sure to avoid direct searches for event-related landing pages or template generated designs.

 

I found these images based on the three keywords. Using my understanding of the company’s design requirements I extracted symbols from the images to narrow down intriguing designs.

CIO-43.gif

Idea sketches

With the keywords and visual strategy, I sketched out the ideas and the homepage structure.

Group 14.png

Moodborad

During the idea sketches, I also researched visual references and created a moodboard that has visual direction and color concept. Since the event is aimed at high-level executives, I decided to make this design a dark and sleek theme that represents advanced and professional values.

CIO-19.png

Distill

03

Shaping

Iterating the visual ideas and homepage structures allowed the full shape of the design to take its final form.

Wireframe

I built several different wireframes for the website. Since we merged two pages it was important to identify which items we wanted to add, remove and combine.

CIO-22.png

Column grid

During the wireframe exploitation, I built the grid system that helps to organize the event details on one page.

CIO-23.png

Visual exploration

I created different graphic options for the hero image. The visual represents people gathering and interacting to exchange their ideas.

CIO-24.png

Color palette & typography

The color palette is pretty simple because I wanted to take advantage of the natural representation of these colors. The main color is dark navy, point color is red which is usually used for CTA and sub colors are bright grey, blue and white. 

 

I chose one font which was Gotham because the website doesn’t have a lot of text, so I can make hierarchy by using this structured and modern font.

CIO-25.png

04

Deliver

Finalization

Now is the time to introduce the new look of the website! CIO/CISO website consists of details of the event, speakers, agenda and CTA, etc. It also contains links to the finalized designs for the registration and confirmation pages. 

Same voice, new look

CIO/CISO Interchange website is designed to provide practical event information so that the users get the event details right away. From the keywords and the event title itself, I was inspired by the literal meaning of “Interchange” and visualized it with other elements such as people and digital transformation

CIO-45.png
CIO-28.png
CIO-47.png

The Differences

As I mentioned above, the big difference is that I merged the two previous pages and made it the homepage.

CIO-29.png

Register here

I created the Register and Confirmation pages based on the previous structure and current visual designs. I kept the same dark theme and made the page as straightforward as possible.

Register.png
Confirmation.png

360 Approach

I also worked on physical designs such as the stage, signages and posters by using the same visual concept. I wanted to draw in the attendees and surround them with the core values of the event through the imagery that they encountered.

CIO-38.png
CIO-39.png
CIO-50.png
CIO-53.png
CIO-55.png

Determine

05

Lessons

Branding an entire event is always exciting because it involves both digital and printed designs. When I design for both, the most important thing is to understand how the visual will appear on such totally different mediums. Since they have different color settings, it's important to adjust the colors carefully

 

Another enjoyable aspect about this project was how I visualized the event branding and missions by using my creative skills. I tried to be abstract at the beginning of the project and symbolized the abstract elements and achieved a unique result. I fully relished this process and would love to flex my skills for another event or other design projects.

CIO-31.png

Thank you for watching

bottom of page