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
Research
Define
Brainstorming
Keywords & Strategy
Idea sketches
Moodboard
Ideation
Distill
Wireframe
Column grid
Visual exploration
Colors & typography
Shaping
Deliver
Final design
Finalization
Determine
What I have learned
Lessons
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.
User information
The organization qualifies all attendees to ensure the best possible event while also limiting the number of total attendees.
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/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.
Challenges
I organized challenges based on their complexity and urgency and mapped out how they should be approached and what were the possible solutions.
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.
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.
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.
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.
Idea sketches
With the keywords and visual strategy, I sketched out the ideas and the homepage structure.
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.
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.
Column grid
During the wireframe exploitation, I built the grid system that helps to organize the event details on one page.
Visual exploration
I created different graphic options for the hero image. The visual represents people gathering and interacting to exchange their ideas.
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.
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
The Differences
As I mentioned above, the big difference is that I merged the two previous pages and made it the homepage.
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.
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.
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.
Thank you for watching
bottom of page