TIMELINE
August 2023 - December 2023
FORMAT
Web & Mobile
ROLE
UX/UI Specialist
Background
ISC2 is a member association for cybersecurity professionals. They provide certifications for cybersecurity professionals who are looking to up-skill. Their most popular certification, the CISSP, is a highly respected credential in the field. As competition increased and low-cost certifications entered the market, ISC2 needed to evolve. To remain a leader and reach new audiences, we set out to modernize the legacy website and refresh the brand—positioning ISC2 as more than a certifying body, but as a forward-thinking force in cybersecurity.
Responsibilities & Key Contributions
Product Design
I was the sole designer on the project where I was responsible with refining user journeys, restructuring the information architecture, managed the UI design, and ensuring site accessibility.
User Researcher
I conducted interviews with cybersecurity professionals and students to learn more about their aspirations, motivations, and pain points. Also read market research provided by the our team’s market researcher.
Web Developer
Due to time constraints, I also assisted our web developers with building some of the new pages in our website.
Design System Contributor
I built scalable UI components, assisted with typography, iconography, images, and overall site accessibility.
Collaborator
I collaborated with an international team spanning Europe, North America, and Asia of 30+ developers, comm specialists, directors, marketers, and creatives.
Problem Identification
The main challenge within our organization is member retention and member engagement. ISC2 has always been known for being a provider of a specific cybersecurity certification called the CISSP which is geared towards people who are further along in their career, but we offer other benefits and services, such as professional development opportunities, that are overlooked. The issue with this is that members don’t feel the need to keep interacting with us past the point of maintaining their certifications. The CISSP is also for a very specific demographic and we wanted to pull in a wider customer base, such as people who are just getting into cybersecurity and don’t know where to start. Other problems include:
Difficult to navigate
The items placed underneath the different groupings in the navigation bar didn’t align with the name of the group that were placed underneath.
Unclear offerings
It was difficult to understand what our products were. We would use jargon that was unclear to people and didn’t provide descriptions of the certifications themselves at a glance.
Neglecting diverse user appeal
There was a lack of emphasis placed on highlighting different items that would appeal to different user groups such as those who are new to cybersecurity or students.
Goals
To reposition our brand beyond being just a certifying company
We wanted to showcase our additional offerings and establishing ourselves as thought leaders in addressing the cybersecurity workforce gap.
Turn ourselves into a platform that cybersecurity professionals at all stages of their career can utilize
We wanted to ensure that we were highlighting offerings that appealed to experienced cybersecurity professionals as well as students who were interested in pursuing the career.
To enhance membership retention
We needed to find ways to increase retention
To boost brand recognition and familiarity
We wanted to become more recognized in the academic and workforce spaces
Audience
Students and working professionals interested in cybersecurity, professional organizations invested in cybersecurity
Process
Project Scope & Research
The project kick-started with defining KPIs, business objectives, and the framework through a series of cross-functional meetings.
We collaborated closely with the agency to prioritize a list of hypotheses on what our problem areas were and recommendations on how we can address them, aligning them with our organizational goals and those of our audience. Afterwards, we assessed their feasibility based on budget, bandwidth, and time constraints. This list guided us in identifying areas that required revamping. This list guided us in identifying areas that required revamping. For example, a problem area we encountered was people not engaging with or aware of the content we produced surrounding news in the cybersecurity field. A recommendation we prioritized was to highlight our insights and content pieces on the home page.
Once we understood our business goals, we moved on to trying to understand the needs of our users. Research played a pivotal role during the early phases of the project. In partnership with the design agency, we conducted screening surveys and user interviews. I also led an independent research study to understand the career aspirations and pathways of one of our potential new audiences which were students who were looking to get into the cybersecurity field for the first time. During this research process, I contributed to the design and approval of the third-party's research questions, conducted interviews for my independent research, designed my own questions, and handled the recruitment of all participants for both my research project and the third party agency’s. I was able to recruit around 25 participants that consisted of lapsed members, current members, students who just entered into college, mid-level cybersecurity professionals, executive level professionals, and people who had transitioned into cybersecurity from another field. Based on the collected data, we created new user personas.
Information Architecture
After we established the full scope and areas for opportunity, we started off the design work with a revamping of our site architecture. We wanted to address how difficult the site was to navigate based off of the feedback we received. We produced a sitemap of the current state of our site and had several meetings to address these pain points and brainstorm on how we can improve. One of the biggest changes we made was to create an entire section that was geared toward newcomers. This provided a clear starting point for our users. We also had a problem in the past where pages hidden behind a member login weren’t clearly marked. We’ve fixed this problem by adding a lock icon next to pages that require users to sign in. This was to ensure that the delineation in journeys were clearly marked and people's experiences weren’t interrupted
I engaged with relevant stakeholders to design the first round of pages for MVP1. Product strategy was at the forefront when it came to this process. Some of the questions I would ask myself throughout the design process were:
Can we scale with this design? How is it addressing the pain points we have identified earlier? Is there another way we can go about this that is more beneficial? What design projects should be pushed off to MVP 2? What can we realistically accomplish in such a short time frame? Is the copy on this page portraying the right message?
I had to hold meetings with multiple departments to showcase my creations and explain my design decisions.
To ensure user concerns were addressed post-launch, I created a list of items we needed to review and tests we needed to conduct. It was crucial to conduct research to measure the impact of these changes on our audience and organization. A roadmap was established for the design of pages not included in the MVP 1. A significant effort was made towards achieving Section 508 compliance, ensuring our pages were accessible.
Design Process
My team and I created a comprehensive list of all the website pages on the site, followed by decisions on which pages required redesigning, removing, or redirecting.
I engaged with relevant stakeholders to design the first round of pages for MVP1. Product strategy was at the forefront when it came to this process. Some of the questions I would ask myself throughout the design process were:
Can we scale with this design? How is it addressing the pain points we have identified earlier? Is there another way we can go about this that is more beneficial? What design projects should be pushed off to MVP 2? What can we realistically accomplish in such a short time frame? Is the copy on this page portraying the right message?
I had to hold meetings with multiple departments to showcase my designs and explain my decisions. All the designs were built to be responsive and translate well to mobile phones. We would constantly test how designs looked on handheld devices and I would make edits when we noticed something didn’t translate well. An example of this were the videos we had on the site. They didn’t scale down properly and the close button got cut off so we had to fix this problem.
Design System
Our team then undertook several design sprints with the agency to visualize the final components and design system. My role when it came to the design system was helping to determine font sizing, approve the iconography, image styles, updating accessibility rules, and determining the full range of components. The principles of the design system were simplicity, transparency, trust, consistency, inclusivity, and functional beauty. We design for a global audience so we have to ensure that everything translates properly across different cultures. As a result, we had to account for things like line height for non-latin characters, for example.The site components we created were based on conversations with different departments and their needs as well as in-depth conversations with key stakeholders. If I determined a need for a component, I would create a mockup and collaborate with developers on the execution once it was approved.
Homepage
We wanted the homepage to highlight our other offerings outside of the CISSP certification. We decided to include and highlight entry points to our content hub, other certifications, a quiz for people who are unsure of what they are looking for, our membership, courses, advocacy, and more. We made plans for implementing localization later on in order to provide targeted messaging for our different user groups.
Continuing Education
The previous continuing education pages were disjointed. Users were forced to choose the education item which resulted in them being taken to a different page for that item. Instead of having to choose the education item you’re interested in, users can now filter between them all on the same page, this allows for greater discoverability. I met frequently with our director of education to gain more context, learn more about the products, and ensure that the designs were aligning with the department’s needs.
OLD CONTINUING EDUCATION PAGE
NEW CONTINUING EDUCATION PAGE
Certification Details
The purpose of this page is to allow users to learn more about the certification they are interested in and proceed with next steps. We wanted to pull the main CTAs to the forefront so we included them in the header. We also wanted to educate users on what to expect, who the certification is geared towards, and the training at a glance through the implementation of a Quick Glance section.
Constraints
Time was a huge constraint. There were certain processes that could not be implemented because the new version of the website needed to be fully launched in just a few months. An example of this was our inability to perform tree testing when going through the process of redesigning the navigation. The tree test would’ve provided insight into our users' mental models and how they naturally group content.
Post-Launch
To ensure user concerns were addressed post-launch, I created a list of items we needed to review and tests we needed to conduct. Usability testing is a top priority to see how effective these updates were for the user journey and to help identify problem areas. It was crucial to conduct research to measure the impact of these changes on our audience and organization. A roadmap was established for the design of pages not included in the MVP 1. A significant effort was made towards achieving Section 508 compliance, trying to make sure our pages were accessible.