A.I. Coding Challenge
A secure web based application for the US Army to provide engaging and stimulating coding puzzles for education, skill enhancement, and recruitment
Disclosure
Due to some classified information that was used to build this application, certain features, research, interactivity, final designs, and content was left out on purpose to protect the property of the US Government. Certain final development and design processes will not be displayed.
The information presented has been curated and parsed through by a security officer to make sure all information presented isn’t a detriment to US Security. Other than that enjoy your stay =)
Overview
The Coding Challenge is an interactive platform designed to provide programmers with engaging and stimulating coding puzzles, much like a coding crossword or Sudoku. The primary aim is to offer a fun and productive break from work, allowing users to hone their coding skills, think critically, and compete with peers on a global leaderboard. The challenges are designed to cater to various skill levels, ensuring that both beginners and experienced developers find value and enjoyment.
Challenge
The main challenge of the Coding Challenge was developing a full stack application on a constricted network that looked professional and inviting while still providing entertaining content. Another challenging aspect of that is ensuring the platform could handle multiple users simultaneously without performance issues.
Another challenge has been ensuring that the puzzles are appropriately balanced in terms of difficulty. Creating puzzles that are neither too easy nor too difficult requires a significant amount of testing and feedback.
Additionally, integrating a seamless and intuitive user interface to enhance the user experience was challenging.
Objective
Enhance Coding Skills: Provide a platform where users can improve their coding skills through regular practice and problem-solving.
Encourage Collaboration: Foster a community of programmers who can collaborate, share ideas, and solve challenges together.
Promote Continuous Learning: Create an environment that encourages continuous learning and development in a fun and engaging way.
Background
The idea for the Coding Challenge was born out of a desire to create a stimulating and fun environment where programmers could take a break from their regular tasks while still engaging their minds in productive activity. Recognizing that traditional breaks often do not contribute to skill development, the project aimed to fill this gap by providing puzzles that are both entertaining and educational. We wanted to create and deploy this application using the organization’s new full tech stack including React, Django, and Postgres, which ended up being one of the first complete apps to demonstrate the full capability.
My Role
UI/UX Designer - User Research, Discovery, User Experience Design, Testing
Team Size
CPT Blaine Kuehnert – Project Manager/Senior Developer
CPT Andre Michell – Databases and networking
AJ Moreno – UI/UX Designer
Timeline
8 weeks
Tools
Figma, Adobe Photoshop, Adobe Illustrator, Sketch, Google Forms
Overview
Research
Empathize
Design
Developer Handoff
Reflection
Researching the problem space
According to soldiers and civilians within the U.S. Army, there isn’t a user friendly or fun learning system to enhance skill sets in Artificial Intelligence, Machine Learning, Software Engineering and Computer Science. The U.S. Army has also stated that its difficult to find skilled soldiers and civilians with the necessary experience, knowledge and skill set to recruit for their Software Factory and Artificial Intelligence Integration Center. Thus, the Artificial Intelligence Integration Center aimed to tackle this issue by researching competitors, assessing internal resources, and understanding user pain points in enhancing coding skill sets.
Research Goals
Understand who this will be targeting within the organization
Identify the frustrations for civilians and soldiers who are trying enhance their skills within the U.S. Army
Identify exploration features that would be the most valuable for new users
Analyze current resources within the U.S. Army organization that allows users to enhance their skills
Analyze the current pipeline for recruitment into the AI2C branch
Validate the need for a coding challenge application
What are existing coding app resources?
Analyzing some of the most popular coding resources revealed that some applications tended to have niche functionality, with LeetCode being the most thorough resource. Each app typically focused on a specific key need, whether it was identification, community database, or coding based challenges.
Interestingly, this divide was highlighted by participants in my later user interviews, underscoring the necessity for a more holistic digital solution. Notably, one user mentioned Google's past recruitment approach where the company used to engage with universities, by being creative and presenting problems on whiteboards for students to solve, students would solve these problems in passing and eventually this lead students to an online recruitment page to apply for available positions where Google actively hired from.
“My father used to work at Google, when he got recruited he went around the university white boards at UC Berkley and solved high level algorithms, It was like a game for him and that lead to Google recruiting him. I would love it if the Army did something similar, imagine the talent that would come from something like that?” - Major Elizabeth Ford-Pomorski
Comparing features between top coding apps revealed niche functionality
Interviewing users on code learning experiences
“How did you learn to code?” To understand this question, I conducted several interviews in person and video call to learn about:
Processes and resources that experienced developers use to help them plan and learn how and where to code.
Concerns or barriers that are preventing soldiers and civilians from learning, enhancing their skills, becoming developers and furthering their careers.
An unprecedented challenge during this phase was finding active developers within the U.S. Army (whether that was soldiers or civilians) many of the developers were outsourced military contractors. Eventually, I found participants by contacting scholars within the U.S. Army’s Software Factory who were part of the Artificial Intelligence Integration Center group.
The user interviews revealed 6 key insights:
Soldiers are actively seek new job opportunities
Soldiers are always seeking new pathways and opportunities to enhance their skill sets, whether that’s promotions and new jobs within the U.S. Army or reintegrating into the civilian private sector.
Finding new career paths within the U.S. Army is Impossible
Soldiers find it almost impossible to find jobs or tasks that help them get into the tech industry. Many individuals seek an accessible and flexible method for learning to code, along with a means to augment their technical skill sets.
Complicated and old systems get in the way of enhancing skills
For many soldiers within the U.S. Army’s Software Factory, it was a gauntlet to learn how to code effectively, old systems mixed with outdated and unrelated training videos made it unenjoyable and stressful. Any digital tool needs to be simple and fast.
Trial, training, and teaching programs
The U.S. Army made it almost impossible to learn and find ways to enhance their skillsets or pathways to new opportunities in software development. They did offer programs that allowed soldiers to acquire their Bachelors, Masters and Ph.D.’s in Computer Science at universities (like Carnegie Mellon University). However soldiers didn’t have a resource to see if coding is right for them.
The U.S. Army recruiting issue
The U.S. Army is facing a recruiting & promotion crisis and a lot of this is fueled by internal soldiers not having opportunities to enhance their skillset for the world today.
Coding can be a daunting boring challenge
Soldiers are people too, and they want what anybody wants, a simple tool that allows them to learn by making the experience enjoyable while also enhancing their skillset. The challenge of learning how to code should feel like they are learning in an exciting way without making it boring.
“I want to know if there are better opportunities within the Army that lean more into my software development background. When I get out of the Army or if I want to stay and get promoted, I want to be able to earn more, learn more, and be passionate about what I do. Artificial Intelligence is expanding rapidly and I feel like if I don’t have a good way to learn or a way to educate myself before going back to school, I feel like I’ll be left behind.”
— 1st LT. Amber O’Riley
Overview
Research
Empathize
Design
Developer Handoff
Reflection
Building user empathy
The competitive analysis and user interviews gave me a better understanding of who the users were and how they might use the Coding Challenge application. I focused on expanding those findings into concrete visualizations that would help me empathize with users and define the product.
Persona Development
Based on patterns from my user insights I developed two personas - a job seeking soldier looking at getting into coding and an experienced developer that’s looking at getting into Artificial Intelligence. Since the goal of the project was to make coding more accessible to everyone, it was important for the features to be intuitive for beginners. As such, the Coding Challenge Recruit was the primary persona I focused on for the rest of the project’s development.
Soldier in the career field/the Ideal persona was used as the primary persona
The secondary persona could be used in the future for further development
Most of the journey happens outside the coding challenge
Talking to soldiers helped me realize the developer journey started and ended much before and after the soldier discovers a need for A.I. knowledge and developer knowledge. The user’s actions and decision-making began from planning in advance to exploring more resources days later.
I created a user journey map to graph out the thoughts, feelings, and sights that my interviewees had shared with me to identify main touch points the application would need to cover.
Mapping out the user journey map showed important touch points before and after discovering the want and need for coding
Translating needs into features
From the touch points and needs gleamed from the empathizing phase, I created a Product Feature Roadmap to outline specific application features and organize upcoming design efforts.
Explore the "All Features" view on Airtable.
Prioritization was determined based on the alignment of a feature’s value proposition with the project’s goals and user’s needs. Due to project limitations, I had to focus on features that would be required in an MVP product according to the primary persona.
Overview
Research
Empathize
Design
Developer Handoff
Reflection
Design & Prototype
With a better understanding of the users and priority application features, I began designing how those features would be realized. The Coding Challenge would focus on three main capabilities -
Create a way for soldiers to enhance their coding skill set
Learn how to solve problems and think of solutions
Introduce soldiers to a fun and intuitive system that tracked their progress.
Bonus: A way for U.S. Army’s Artificial Intelligence Integration Center (AI2C) to recruit from.
Sketching users flows & understanding recognition technology
To establish user flow and content layout, I sketched out wireframes for screens that users would need in order to complete the three main tasks. One of the biggest considerations was designing how the identification flow would work, as I wanted to bring together multiple methods of species identification.
This part of the process required doing a bit of research into photo and audio technology to understand the basic limitations of what the app would be able to achieve. For example, I later built in a selection and zoom step in the photo ID flow, based on methods to increase accuracy in AI photo recognition software.
Sketches showing wireframes - desktop, mobile, challenges, and layout.
Certain key features, research and sketches are left out of security purposes.
Being playful with UI design
While designing the product’s logo, branding, and user interactions, I focused on creating a visually friendly, gaming and inviting feeling to welcome developers of all levels and backgrounds.
This part of the process required doing a bit of research into what makes other applications personable, fun, and engaging with a gaming feel to it. For this I looked into Duolingo and what made their branding so successful. For example, I later designed and implemented a trophy system to bring in a competitive aspect to the application to boost engagement and comradery between users.
Overview
Research
Empathize
Design
Developer Handoff
Reflection
Developer Handoff
Developer Handoff
The final step was to annotate the screens and add measurements for the developer to build out what we created.
This was to provide developers with detailed documentation outlining the product's design, functionality, and user flow and to ensure consistency between what we imagined and what will be used.
Developer frames are currently being re-reviewed by Army Security officers for security purposes.
Examples will be presented at a later time.
Annotation and measurements provided to the developers.
Overview
Research
Empathize
Design
Developer Handoff
Reflection
Reflection
What’s Next
Following the first round of testing, the next steps would be to iterate and design for features beyond the MVP.
Build out phase 2 & 3 features - Special events, mobile, customizations and community social media sharing
Conduct second round of user testing in the field, to identify active usability issues
Prepare deliverables for development handoff
Project Takeaways
I knew going into this project that it would be a challenge. What features are most important? How would the application work with the current technology and security limitations? Given the recruitment and education enhancement problems that the US Army community faces, what are some ways the application can provide relief and solutions? I found myself truly enjoying the process of designing and strategizing flows and user interactions.
Some key takeaways are:
Create a well-organized project plan. With so many issues to consider, a good strategy will prioritize on what’s needed for the MVP and keep track of backlogs.
Understand tradeoffs in decision-making. Knowing when and why to use a particular tool or research strategy is part of the critical-thinking needed to successfully deliver.
Use existing patterns to decrease cognitive load. Spending time designing a unique interaction for a common function isn’t necessary if users already expect it to work a certain way.
While the application cannot solve all the needs of the recruitment of developers for the US Army as of right now, I believe that a good user experience can facilitate more community action and discussion that is sorely needed. I’ve come to the conclusion that the US Army should focus on education and skill enhancement efforts within the military to fill gaps in tech and software developer positions by increasing access to learning, education and awareness of programs like the A.I Coding Challenge. The first steps in objective awareness often begins by bridging the gap between what the soldier needs and the US Army wants.