Cisco Security Academy learning portal redesign

Deliverables:

• One (1) finalized mockup of the course card design
• Thirty plus (30+) course icons for publishing alongside courses

The challenge: 

Cisco Secure spans more than twenty cybersecurity products, and many of these products originally had its own learning portal. This division of content across multiple websites left customers confused and frustrated, as most were users of multiple Cisco Secure products that wanted to be able to view everything in one place. Some customers didn’t even know that customer enablement content even existed for their products due to the confusion of navigating multiple different websites. Each learning portal additionally had a different approach to design and content, further adding to user fatigue. 

‍

Cisco Security Academy aimed to solve these issues by consolidating all Cisco Secure customer enablement content into one singular learning portal. My team was tasked with redesigning the course card for the new website. This task was particularly important as these course cards would become the faces of our content on the new website.

With a looming deadline to publish our new learning portal, how did we design and create these course cards? 

Process:

We started by looking at the different course cards on the existing Cisco Secure learning portals. We identified what worked about them as well as aspects to improve. For example, we really liked course cards that:

• Have unique course descriptions that draw the customer into the content. 
• Have a button that clearly calls the user to take an action, such as launching the course. 
• Display the user’s course completion status, which allows customers to easily identify courses they’ve started. 

On the other hand, we didn’t like course cards that:

• Contain images of the product GUI, as the product GUI images were often too small to be recognizable. 
• Didn’t contain a visual element at all, failing to draw attention. 
• Overwhelm users with images and colors that are too busy and lack coherence. 
• Are inaccessible due to failing color contrast checks. 

Although we would have loved to look at existing user data or conduct user interviews to gather more information about what customers needed, realistically we faced our biggest constraint: time. We only had one quarter to design, build, and publish the entire website. This extremely short timeline meant we only had around a month to design the whole website, and the course cards were only one small element that needed to be designed. We could not sacrifice any of this time to gather data and had to make decisions based on our own intuitions.

‍

We therefore jumped straight into brainstorming all different possibilities for our course cards. For the initial ideation, I focused on the course card image possibilities. Below are some of my initial ideation sketches, and the resulting mockups from these sketches. 

While many of the elements I initially included in my mockups did not reach the final design, these elements were still valuable because they clarified the vision of what was necessary. 

• The course title in the course card image was unnecessary because the course card would already contain the course title in text, so this would be repetitive. 
• Adding the product logo in the image seemed like a useful distinguisher for customers to quickly scan courses. Cisco, however, rarely actually uses these product logos in customer-facing materials. Customers therefore are most likely not familiar with these product logos in the first place, so adding them just ends up adding clutter to the image. 
• Similarly, adding a badge containing the product name seemed like a useful distinguisher as well. The course cards, however, were going to be displayed on course catalog pages already divided by product, so further differentiation seemed redundant. We used this badge idea later on for marking the user’s completion status on the course. 

Our stakeholders liked the minimalist collage design that aligned with the Cisco Secure branding. These images, however, could not visually represent the abstract cybersecurity concepts in our enablement content. We opted to place more emphasis on the course title and course description so that customers can quickly understand the course content from the course card. 

We decided to remove the course type information from the course card. Although in the past a course might have only used one type of media, our team was shifting towards a more multimodal approach to learning experiences. Most of our newer courses contained text, infographics, and videos altogether, so there was no need to differentiate based on course type. 

‍

We also decided to remove the course duration information from the course card. Our data from past learning portals showed that displaying course duration time often discouraged customers from engaging with the content they might have actually needed.

‍

The short time constraint again meant that we were unable to test our solutions with users. As soon as stakeholders liked a design, we had to keep moving forward with it; otherwise, we would not meet the deadline for launching our new website. 

‍

Solution:

Below is our final solution for the course card design, as well as the element embedded into the broader context of the new website. 

Takeaways:

No design process is perfect or linear

Although the design process is often presented as a linear progression when learning product design, I learned that the design processes in real-life projects are never perfect. There will always be many stakeholders to please, crunched deadlines, and a lack of resources, as well as backtracking and starting all over when the requirements change. These constraints will dictate how the design process happens in actuality. The real challenge therefore becomes navigating all of the constraints and still producing a solution that satisfies the user. 

‍

‍

‍

☆ Next: HP+ Youth Champions Policy Advocacy course →‍

‍