Overview
Coding Warrior is an app that aims to make learning to code more engaging and accessible for users of all skill levels. The app utilizes a gamified approach to break down programming classes into short segments, making it easy for users to fit learning into their busy schedules.
My Role
Solo UI/UX designer
Duration
2 Months
Project
University Brand Project
Why?
I decided to create this app because it addresses a gap in the market for a more accessible and engaging way to learn coding. In today's job market, coding skills are in high demand, yet many people still feel intimidated by the complexity of traditional coding courses, or may not have the time or resources to commit to a full-time coding program
Tools
Adobe XD
Research
To better understand the needs and pain points of potential users, I conducted user research through surveys and interviews. I found that many users had an interest in learning to code but were intimidated by the complexity of traditional coding courses. They also reported a lack of time as a major barrier to learning.
User Persona
Information Architecture
The primary objective in creating an Information Architecture is to provide a seamless and user-friendly experience while learning to code.
Wireframes
Before proceeding to detailed wireframes and mockups, I wanted to have a clear visual of the fundamental layout of the app
Wireflow
To gather accurate user feedback and conduct usability testing, a mid-fidelity interactive prototype of the application was created. The prototype mimicked the functionality of the actual application and allowed users to interact with it as if it were the final product
Testing
To validate the design, I conducted usability testing with a group of my classmates. Some of the questions I asked were:
To validate the design, I conducted usability testing with a group of my classmates. Some of the questions I asked were:
-
How easy is it for you to navigate the app?
-
Can you find the information you're looking for?
-
Are the lessons engaging and effective in helping you to learn?
-
Are the segments of the lessons easy to fit into your schedule?
-
Are the interactive elements effective in keeping you engaged?
-
Are you able to understand the material being taught?
-
Are there any features that you would like to see added or improved?
-
Are you experiencing any technical difficulties with the app?
The testing revealed that users found the app easy to navigate and appreciated the interactive lessons and quizzes. I also found the time-based approach to be convenient and effective in helping them to learn at their own pace.
High-fi Wireframes
High-fi Wireframes
Onboarding UI
During onboarding, users can easily personalize their content by answering a few questions
Lesson section
The lessons and quizzes are designed with a gamified approach to enhance the learning experience and make it more interactive and enjoyable for users
Takeaways
Coding Warrior app is a valuable tool for individuals of all skill levels looking to learn coding in a more accessible and engaging way. The app's instructional approach and interactive lessons and quizzes make learning coding more approachable and effective. The app's gamified approach also helps to keep users motivated and engaged. Additionally, the app's personalized approach allows users to learn at their own pace, making it more accessible for individuals with busy schedules. The user personas described in the case study highlight the different types of users who may benefit from using the app, including stay-at-home parents, high school students and working professionals.