BACKGROUND

Shift from competition to education

In 2013, Pico ignited enthusiasm with its debut cybersecurity competition.

Yet, by 2020, after drawing in over 36,000 participants, Pico expanded its focus from strictly competition to education by introducing PicoGym.

PicoGym: an educational workspace

PicoGym, launched in 2020, offers a space where users can learn by tackling challenges. Each challenge requires users to read the prompt, uncover the hidden flag in the program, and submit it. With over 300 challenges spanning various topics and skill levels, PicoGym caters to a broad audience.

My role

Between January and May 2023, I took the lead in designing the Pico Playlist feature, working closely with four other designers.

After launching on May 31, 2023, PicoGym's user base grew by an impressive 58% in just two months.

My collaboration extended to a product manager and two developers. Together, we bolstered the design system, and I coded five components using React.

PROBLEM

The engagement gap

Despite the noble intentions behind PicoGym, it grappled with the challenge of sustaining user engagement.

Out of the 300+ challenges available:

41% of users completed fewer than 5 challenges;

72% of users completed fewer than 10 challenges.

A mere 5% engaged deeply, completing over 30 challenges.

This led us to formulate our problem statement:

How might we encourage users to complete more challenges?

KICKOFF THE RESEARCH

Hearing from users

While the engagement gap was clear, the root causes remained elusive. I adopted the user-centric approach, ensuring our design decisions were anchored in genuine user experiences. Together, our team conducted interviews with 10 newcomers and 8 regular users of PicoGym. We sought to capture their personal narratives, understand their pain points, and gauge their interactions with the platform.

DISCOVERY

Building personas

A deep understanding of our user base was paramount. Based on the interviews, I distilled the gathered information and crafted personas that embody the characteristics and aspirations of our primary user groups. Let's delve into the profiles of Alex and Rachel to grasp their goals and frustrations.

“Pico is for doers, not for learners.”

This quote captures a key perception from the user base: PicoGym is better suited for individuals who already possess a foundational understanding of cybersecurity and are looking to apply or hone their skills. For beginners embarking on their learning path, the platform might not seem as welcoming.

SYNTHESIZING INSIGHTS

Understanding the friction points in users’ journey

By analyzing the feedback from the interviews, I embarked on creating a journey map. This visual representation allowed us to empathize with users and identify opportunities for improvement.

FRICTION POINTS

Using the journey map, we identified distinct areas where users faced obstacles in their learning process with PicoGym

Overwhelming learning content

Users conveyed feeling overwhelmed with the sheer volume of learning content. Without a structured path or guidance, they often felt paralyzed, unsure where to begin or which challenge would suit their skill level.

Frequent context switching

The frequent need to toggle between learning materials and challenges disrupted the user’s flow. This constant context-switching acted as a deterrent, making users less likely to continue.

Loss of track

Users expressed feeling directionless due to a lack of clear progress indicators or pathways. Without visual cues or milestones, their journey on PicoGym felt aimless and less rewarding.

OPPORTUNITIES

Turning barriers into bridges

Recognizing the challenges users face was only half the battle. The next step was to reimagine these challenges as opportunities for enhancement. Each friction point and constraint highlighted avenues where PicoGym could innovate, while staying true to its educational mission and organizational realities.

Overwhelming learning content

Opportunity #1: Integrated learning environment

Minimize the need for frequent context switching by integrating learning materials directly within challenges. This seamless integration would likely keep users engaged and reduce the friction in transitioning between learning and doing.

Frequent context switching

Opportunity #2: Structured learning pathways

Given the overwhelming volume of content, there's an opportunity to curate guided learning paths. By providing a structured learning experience, users will have a clearer direction, which can potentially increase engagement and decrease dropout rates.

Loss of track

Opportunity #3: Progress Tracking

Introduce a progress tracking system with visual cues to keep users engaged and informed of their learning journey.

CONSTRAINTS

As an NPO, Pico needs to consider the financial sustainability

It was crucial to not only design with the user in mind but also within the realistic boundaries set by the organization's financial health. Through a detailed stakeholder mapping exercise, it became clear that Pico's standing as a non-profit organization meant a significant reliance on sponsorships and funding for its operations.

This awareness added another layer to our design challenge: creating impactful user experiences that are also financially feasible. While aiming for innovation, it was equally essential to ensure that the proposed design interventions were pragmatic and didn't overstretch the organization's resources.

Prioritizing tasks

The insights from our research yielded numerous potential improvements. Using the MoSCoW method, we streamlined our focus and tackled the most pressing issues first.

MUST HAVE

Structured learning paths: Given the feedback on overwhelming content, a guided and structured learning path is imperative to prevent users, especially beginners, from feeling lost or overwhelmed.

Integrated learning materials: This would minimize the context switching that users reported, enabling a smoother learning curve.

SHOULD HAVE

Clear progress indicators: As many users felt directionless, it's helpful to have visible markers of their learning journey.

COULD HAVE

Byte-sized learning content creation: Compact, digestible pieces of learning content that could be consumed quickly, catering to users who might be overwhelmed with vast content.

WON’T HAVE

Recommendation System: While a system that suggests challenges based on user behavior would have been beneficial, given the constraints, we decided to postpone its development.
Social Learning Features: Encouraging collaborative learning through features like group challenges or discussion boards was a feature set that, while valuable, we decided to set aside for the present.

IDEATION

Exploring options for the integration

To address the friction point of disruptive context-switching, our design goal was to integrate learning into solving challenges seamlessly. This would eliminate the need for users to switch interfaces and provide a fluid user experience.

1. Sequential Learn-and-Apply Modules

Break down content into bite-sized modules, where learning and application occur in tandem. After each learning module, users immediately apply what they've learned through a relevant challenge.

2. Split-Screen Integration

The screen is divided into two. One side provides the learning material, while the other presents the corresponding challenge, allowing users to reference materials easily as they work on a task.

Decision making: a systematic approach

Having delved into two layout options, it was paramount to anchor our decisions within a structured process. In collaboration with key stakeholders, we identified criteria for successful integration. To ensure our evaluations were comprehensive and balanced, we solicited input from our cross-functional team. This collaborative approach ensured our evaluations encapsulated technical feasibility, user-centricity, and efficient content delivery. After a systematic analysis of the options, we converged on the sequential learn-and-apply modules as our preferred choice for integration.

Pinpointing the ideal locale

A primary concern emerged when transitioning abstract ideation to tangible design: Where should this new feature live?

Inside picoGym

As a separate page

Replace picoGym

We opted to embed this feature inside picoGym, because our overarching goal was to amplify PicoGym's engagement factor, nudging users towards completing more challenges. By integrating this feature directly into PicoGym, we could harness existing user familiarity while offering them an enriched learning experience.

Introducing Pico Playlist

Post-ideation, as we conceptualized integrating sequential learn-and-apply modules embedded in PicoGym, we named this feature “Pico Playlist.” Much like a musical playlist that crafts a journey through an arrangement of tracks, our "Pico Playlist" is designed to guide users through a sequence of challenges and learning modules.

DESIGN

Designing structured learning paths

We initially faced a pivotal design choice: how would Pico Playlist visually present itself? Two layout options arose: An "expander" that would unfold content as users progressed or a "sidebar" that remained static on the side.

Expander

Sidebar

Considering the edge case where the material is extensively long, the sidebar could handle the content while maintaining a focused learning experience. The expander structure might lose track of the overall structure.

Expander

Sidebar

Multifaceted sidebar views

The sidebar was envisioned to cater to diverse types of learning content, including:

Learning content

Textual and graphical educational materials are presented, allowing for in-depth topic exploration.

Media

This view integrates relevant videos, audio, and other multimedia resources, enhancing the learning experience through varied formats.

Challenges

Practical, hands-on challenges that apply the learned concepts are made accessible, encouraging users to test their knowledge immediately.

The inception of playlist within PicoGym

Weaving the Pico Playlist into the fabric of PicoGym required a thoughtful approach. The introduction of three sub-tabs was a strategic decision:

  • Challenges: For users looking to engage with PicoGym's traditional, self-directed challenges.


  • Playlist: For those who prefer a guided learning experience, combining structured content with relevant challenges.


  • Progress: A dedicated space to visualize one's learning journey, mapping achievements and future endeavors.


The Playlist sub-tab was particularly crucial, conceived to address the user-reported pain points of content overwhelm and lack of clear learning pathways.

Card design for clarity

Within the playlist, card design was pivotal. I explored a few options with different sizes:

We opted for longer cards, which allowed for ample space for information and the progress of the learning pathway. This decision was grounded in our aim to alleviate the reported user frustration of content fragmentation and to provide a visually cohesive learning journey.

Progress tracking refined

In the realm of e-learning, progress tracking is not just a feature but a cornerstone of the user experience. Recognizing its importance, we delved into the intricacies of progress indication, exploring varied levels of detail to serve different user needs. The objective was to strike a balance between providing comprehensive progress insights and maintaining a clean, uncluttered user interface.

Our exploration led us to two distinct designs in different contexts:

Users want to see more details about their progress

Users want to browse their progress

By offering two levels of progress tracking, we cater to both the user seeking a detailed understanding of their learning journey and the user requiring a quick overview to aid in decision-making.

Putting together

EVALUATION

Validating with users

I made a prototype and tested it with 20 students. The design was well-received. Users thought the playlist feature was a game-changer, which kept them motivated and engaged. As stated by one of the users,

“It shows how far I've come and what I need to tackle next.”

Our team also quantitatively assessed the design's success before implementation by establishing a questionnaire. The before-and-after analytics showcase our design positively impacted key metrics.

IMPLEMENTATION

Shipping the design

I embarked on the implementation phase of the solution by developing production-ready React components that were finely tuned to the needs of the playlist feature. The playlist feature went live in May 2023.

  • Responsive design: I crafted the playlist cards with meticulous care, ensuring they provided users with clear, accessible information. 

  • Quality assurance: I constructed a visual testing ground for each component using the Storybook framework. By creating a ".stories" file for each one, I could experiment with various states and scenarios, honing the user interface to perfection.

  • MVP Launch: Rather than creating new content, I proposed a lean approach by restructuring existing content into more manageable pieces. This pilot test led to a notable 30% increase in user engagement in the first month. Beginners engaged more actively with the structured content; even experienced users reported a refreshed learning experience.

  • Expansion: Encouraged by the MVP's success, I worked with the product management team to allocate additional resources, expanding the Pico Playlist offering to over 15 diverse cybersecurity topics by July.

Example storybook component

Announcing new feature on social media