Secure Code Warrior Devlympics welcomes developers from all levels of expertise. From easy to hard, you’ll get to showcase your expertise while accumulating the most amount of points to be crowned The Ultimate Warrior.
The international secure coding championship.
Overview: Getting Ready for the 2023 Devlympics
On October 17th, 2023 during Cyber Security Awareness Month, Secure Code Warrior will host its 3rd annual global secure coding tournament - Devlympics. Devlympics allows thousands of developers from around the world to compete, learn, and have fun while putting their security skills to the test.
Suppose your organization employs dozens, hundreds, or maybe even thousands of developers. In that case, it can feel like finding a needle in a haystack to identify those who prioritize security and write the most secure code. Secure Code Warrior helps you to achieve shipping code successfully and securely, without significant delays, starting at the beginning of the Software Development Lifecycle.
During the 24-hour tournament, developers from around the world competed in offensive and defensive coding challenges in their choice of programming languages. Developers have the opportunity to compete against their peers across a range of skills, from hobbyists to professionals within their chosen languages.
Objective
In preparation for the upcoming 2023 Devlympics, my role entails conducting a thorough analysis of the preceding events in 2021 and 2022. The task involves collaborating with key stakeholders, including representatives from Marketing, Customer Success Strategy, Engineering, and Customer Support.
The primary focus of this initiative is to revamp the user experience by revising UX copy, identifying immediate UI enhancements, and optimizing the registration and tournament onboarding processes. The overarching goal is to streamline the user journey, ensuring a seamless transition from initial interest to active participation.
As the UX designer responsible for this endeavor, my objective is to synthesize insights and creative solutions. This involves working closely with cross-functional teams to align technological capabilities with user-centric improvements. Through this process, I aim to elevate the overall Devlympics experience, leveraging data-driven decisions and design principles to achieve impactful outcomes.
Navigating the Project Constraints
The initial project scope centered on modifications to UX copy, accompanied by a limited number of projected UI improvements. As the Lead Product Designer spearheading this project, I was entrusted with the mission of unearthing supplementary quick-wins capable of enhancing user experience, mitigating user friction, and driving user engagement through cost-effective, interactive enhancements.
My role commenced with the initiation of preliminary copy evaluations involving leaders from the Marketing strategy team. Swiftly, I unearthed feedback that extended beyond the original scope, offering substantial potential for enhancing the Devlympics UX. Subsequently, I was entrusted with the task of strategising the integration of these supplemental enhancements within a compressed six-week timeline.
Improvements to the Devlympics UI encompassed:
Elevating the registration flow with refined UX copy.
Introducing UI alerts and banners for enhanced communication.
Revamping the login flows to optimize user interaction.
Streamlining modals to minimize interruptions.
Enhancing tournament cards to heighten engagement.
Implementing progress indicators to guide user navigation.
By maneuvering within these constraints, I was challenged to align these proposed enhancements with our overarching objectives. Collaborating with cross-functional teams, I embarked on a journey to integrate these improvements seamlessly, ensuring that the Devlympics experience was both intuitive and engaging for users. This process exemplifies my commitment to strategic problem-solving and agile execution, yielding impactful results within a demanding timeframe.
My Role
As Lead Product Designer, I organized crucial meetings with stakeholders, aligning perspectives across Marketing, Customer Success, Engineering, and Support. Serving as the primary designer and point of contact, I strategized and executed UI enhancements through seamless cross-functional collaboration. This role showcased my prowess in design leadership, adept communication, and translating vision into impactful outcomes.
Primary Tools
Discovery: Unveiling Insights
In the pursuit of efficient discovery, I harnessed feedback from Marketing, Customer Success Strategy, and Customer Support to uncover potential UX copy and UI enhancements. Through Figma mock-ups of the 2022 Devlympics landing page, modals, and Miro boards outlining registration and onboarding flows, stakeholders actively engaged in sharing insights. I synthesized this input into an Affinity Map, distilling it into three core areas: UX Copy Improvements, UI Refinements, and Engagement-Boosting Quick Wins.
UX Copy Improvements - Words of Wisdom
Revising hero banner copy to include exciting tournament details such as; prizes, available languages and Ultimate Warrior championship.
Incorporate eye-catching overviews that entice users; think iconography and concise bullet points.
Less is more; remove unnecessary or confusing copy and replace with labels/badges.
UI Refinements - Eye of the Beholder
Create an engaging user experience with eye-catching value propositions such as point values, tournament languages and progress indicators.
Introduce a new Missions only tournament and make it pop but special call-outs.
Apply a new space-aged aesthetic with updated background and updated design system additions.
Engagement-Boosting Quick Wins - Get Users in the Driver's Seat
Leverage space-aged aesthetic by incorporating more dynamic tournament card UX; think visual indicators such as progress and card state.
Missions only tournaments to be presented as a Bonus Level to earn additional points or prizes.
Devlympics 2022: In Review
Devlympics attracted attention from across the world, from security professionals and developers across multiple industries and programming disciplines.
However, 16.7% were students - showing the importance of building foundational skills in
secure coding to supplement a typical CS education.
Development managers and AppSec managers also signed up, showing interest in bolstering their secure code knowledge and willingness to compete against their peers in
a like-minded community.
Registrations from India made up the single largest group of sign-ups, with 39.7% joining, 21.2% joining from the United States and Canada, and 11% from Australia and the UK.
In terms of levels of difficulties, players were almost evenly split between the two playing Arenas - with 56.2% of participants playing the Champions Arena and 43.8% in the Ultimate Warrior Arena.
The Ultimate Warrior Arena was a place for seasoned developers who are confident in their secure coding skills. The Champion Arena was for those new to secure coding and students. Developers could compete in either arena in their chosen framework, and compete for Gold, Silver, or Bronze. They could play in multiple tournaments to earn the most points and crush vulnerable code, with the goal of being crowned the Ultimate
Warrior to score a $2,000 cash prize.
Devlympics 2022 Review: Validation
The Devlympics 2022 review validates that while the international secure coding championship was a success, there are significant opportunities to further drive engagement, specifically among seasoned professionals and countries outside the India, the U.S. and Australia.
Leveraging these findings from Marketing, in conjunction with feedback from key stakeholder groups, specifically Customer Strategy and Customer Support, give confidence to UX Copy Improvements, UI Refinements, and Engagement-Boosting Quick Wins, areas of improvement.
Design: Devlympics 2023 Readiness
To achieve targeted UX copy and UI enhancements within the constraints, adaptability became key. By immersing in Figma artboard annotations, Miro boards, Slack discussions, and short video conferencing, I collaborated intimately with stakeholders. This approach ensured comprehensive feedback by swiftly generating low-to-mid fidelity wireframes and mock-ups. Sharing these visuals with stakeholders enabled prompt input, expediting design refinement and aligning execution with vision. This agile process showcases my capacity to harness diverse channels for effective design iteration.
Wireframes
Example of a low-to-mid fidelity wireframe used for design iterations:
Userflows: User Registration & Tournament Onboarding
Example of a low-to-mid fidelity userflows used for design iterations (originally from Miro, recreated using Figma):
Registration flow streamlined
Tournament onboarding flow streamlined
Devlympics 2023: Final Design - Landing Page
Devlympics Landing Page - Active
The Devlympics landing page for 2023 with improved UX copy, value propositions and dynamic tournament cards. With its new enhancements, Devlympics is now an eye-catching UI with several improvements that will help increase registrations and drive engagement amongst developers.
Tournament Cards
Here, see how the tournament cards are clearly labeled with several key visual indicators that inform users of the state, status and value of each tournament option.
Default Card State
Active Card State
Boss Level - Bonus Missions
Comments