At this time, there was a military-wide push to recruit for cybersecurity experts. The DoD's advertising arm wanted us to position the military as a viable career option for young people interested in cybersecurity, but left the "how" largely up to us.
We appealed to "young cyber warriors," who we defined as high school and college students are in the stages of exploring their interests in computer science or other logic-oriented disciplines. These cyber warriors are typically active online, whether it be on major social media platforms (Reddit, Instagram, Facebook) or in gaming communities.
We created a web-based game focused on the intrigue of being a cyber warrior in the military, while educating our audience about the basic principles of cyber security. Our game consisted of three "mini games," each focused on a problem-solving skill used in the cyber security field, an "ultimate challenge" and a backdoor easter egg.
We saw a higher than expected level of engagement, with an average of 15:22 minutes spent on the site and over 56K levels played. We were also shortlisted for 2018 Webby in Best User Experience.
My role: Lead UX Designer (all assets displayed are mine, unless specified)
At the time of this project, there was a military-wide push to recruit new cyber security personnel. We noticed that other branches of the military, such as the Air Force, created small decrypting exercises to engage our target audience. We analyzed other forms of military outreach, which were promoting a flashy, "hacker-like" vision of cybersecurity in the military. We wanted to leverage this ethos while still educating game players.
This is a spread from the 2016 Futures Magazine, a publication sent to high schools by the military
To determine the broad 'arenas' of gameplay, we assembled an Avengers-esque team of developers, a content strategist, UX (me), an art director, and our digital producer.
Our developers provided institutional knowledge as to foundational games to strengthen logic and problem-solving skills within the cyber security field. We then sketched out the game ecosystem and individual game flows.
From these sessions, we determined we'd build games with the themes of Protect (build a secure server environment), Defend (assess users trying to access a system as good or bad actors) and Strike (use binary code to uncover an IP address). If a player passed all the levels in each game, they would unlock the Ultimate Challenge, a story-based run through of the most difficult versions of each game.
After a couple of whiteboarding sessions, we situated these three games and the Ultimate Challenge within the greater ecosystem of the experience, which would involve ads on social media, in the military's magazine, and on their owned digital properties.
We also needed to include contextual CTAs linking to the cyber careers page on todaysmilitary.com, as well as including share functionality for when someone won a level / game.
Our dev team and I wrote functional requirements and this user flow in tandem.
We needed to spec out how each user could move through each game while establishing functionality before wireframes. This practice helped us streamline and choreograph the experience. In this process, I worked very closely with our content strategist to determine the key story blocks of the game.
This user flow provided the blueprint for each screen and state I'd need to design. For each game, I had to design an instructions page, a default game state, success messages, error messages, a hint modal, and contextual animations for when a user didn't interact with the screen for a set period of time.
I designed a wireframe for each state in our user flow. Given our limited UX team (just me!), I only designed mobile wireframes for the Protect, Defend, Strike, Ultimate Challenge, and our backdoor easter egg with desktop in mind. Later, I worked with our production team to build out the desktop version and ensure the integrity of interface elements remained.
These wireframes accompanied our functional specs, so these annotations are more descriptive of user behavior than total functionality.
Our incredible art director came up with an impactful look and feel based on the visuals from a HUD. I did not make these comps.
My role in this stage was to ensure that all look and feel elements reflected the same intention as their wireframe counterparts. Key areas where I contributed were concerning success/error color contrast, spacing between elements (to ensure proper content grouping and hierarchy), and how the interactions worked for different games (would we use drag and drop or just click states?).
Throughout the design phase, I completed three rounds of testing. The first, with a basic prototype to ensure our fundamental game play was sound. The second, with our first round of visual designs on our staging site. The third, with our optimized site to validate our findings.
I wanted to test how playable each game was—did people understand how to play, were they interested in winning, were they able to strategically win? I also examined usability heuristics of specific UI (such as drag and drop icons) I thought may be problematic.
We tested only people under the age of 25. We also segmented our user test groups by "members of IT" and others, to gauge the clarity of the computer concepts we wanted to educate people about.
From my user testing, I was able to distill my findings into key feature, flow, and structural optimizations.
From there, I worked with our developers and our producer to determine the level of effort involved in each change, and then ranked each optimization according to its impact and relative effort.
Key optimizations we made included making our game instructions more clear with visual aids, making our Gold/Silver/Bronze scoring more obvious, and adjusting gameplay mechanisms to make the games easier/harder to play, depending on the success rate.
We developed a strategy for deploying ad placements for our cyber game experience. Our media team selected display ad placements, while we our copy team wrote ads for Facebook and Reddit.
On the DoD's owned platforms, I wireframed a new page for a cyber security job page on todaysmilitary.com.
We saw a higher than expected level of engagement, with an average of 15:22 minutes spent on the site and over 56K levels played. We saw an increase in visits to the cyber careers page on todaysmilitary.com. We were also shortlisted for 2018 Webby in Best User Experience.
