Code-Amooz

an online platform that empowers aspiring developers through interactive learning, community engagement, and career support

Designed with:

Role:

UI/UX Designer

Date:

Jul 2021 - Dec 2021

Highlights:

  • Online courses and code editor for practicing and learning

  • Earn degrees from prestigious institutions

  • Cater to students, professors and industry professionals

Main Challenges:

  • Balancing Needs of Diverse User Groups: The website needs to cater to three distinct user groups with varying needs and technical expertise: students (15-30 years old), professors, and industry professionals.

  • Minimizing Complexity: The design should be intuitive and user-friendly, especially for students and professors who may be new to the platform. Complex functionalities, particularly regarding online class creation, need to be streamlined for a smooth user experience.

  • Engaging a Competitive Market: Several similar programming education websites exist. Code-Amooz needs to stand out by effectively highlighting its unique features, such as the integrated online code editor and potential degree accreditation.

Process:

Inspired by empowering diverse learners and fostering a thriving online coding community, Code-Amooz prioritizes a user-centric approach. Here's our design journey:

  • Understanding Needs: We conducted in-depth interviews and user mapping to uncover the unique goals and challenges of students, professors, and industry professionals.

  • Learning for All: The platform caters to various learning styles by offering interactive lessons, online code editor access, and the potential to pursue accredited degrees. Professors benefit from easy-to-use online class creation tools. Industry professionals can connect with skilled graduates.

  • Seamless Collaboration: Code-Amooz fosters collaboration through features like online forums, project sharing, and potential team-based learning activities within courses.

  • Engaging Across Devices: Our responsive design ensures a smooth learning experience on any device, making coding education accessible to all.

User Research:

To start the journey, we begin with the discovery phase of the design thinking method. This report summarizes the findings from user research conducted to understand the goals and challenges of Code-Amooz's target audience: students, professors, and industry professionals.

Methodology:

  • User Interviews: We conducted 10 individual interviews with a balanced mix of students (5), professors (3), and industry professionals (2).

  • Online Survey: An online survey was distributed through social media channels and relevant online coding communities, receiving 51 responses (31 students, 12 professors, and 8 industry professionals).

Persona:

After user research, I made personas. Code-Amooz bridges the gap between learners, educators, and industry professionals in the coding world. It empowers students to develop practical skills through engaging learning experiences, offers professors user-friendly tools to create dynamic online courses, and connects industry professionals with a pool of qualified graduates.

According to the personas that I made, I wrote user stories and problem statements for each of them. User stories helped me to capture the needs and goals of specific users, and problem statements define the challenges users face. Together, they guide the development process by focusing on user-centric solutions.

User Story and Problem statement:

Storyboard:

Then we have the storyboard based on the user story and problem statement. The storyboard is a visual representation of how a user interacts with the platform. It outlines the key steps a user takes, from landing on the homepage to completing a coding project and finding a job. By visualizing the user journey, we can identify potential pain points and ensure a seamless experience for learners, educators, and industry professionals.

User Journey Map:

Code-Amooz bridges the gap between learners, educators, and industry professionals through a user-centric approach. Each persona's journey map unveils their unique experience with the platform:

  • Students: Explore learning options, engage with interactive content, and ultimately land their dream job.

  • Professors: Create dynamic online courses, foster student interaction, and efficiently track progress.

  • Industry Leaders: Identify talented graduates with verified skills, connect directly with promising candidates, and build a strong talent pipeline for future recruitment needs.

Low-Fidelity Prototype:

Sneak peek at Code-Amooz! This basic prototype showcases the website's core functionalities for our users. It prioritizes user flow and features over design.
For a high-fidelity prototype, We refine it based on the feedback to create the ultimate coding education and talent connection platform!

The most challenging part:

The most challenging part for me was making online courses without complexity. Code-Amooz offers a streamlined process with a user-friendly interface in 2 parts.

1. Making the course: Simply follow our 4-step guide to define the course structure:

  • Basics: Title, description, target audience - set the foundation.

  • Features & Pre-reqs: Outline learning objectives, unique features, and prerequisites.

  • Enrich the Learning: Specify materials, requirements, and other details.

  • Introduce Your Course: Capture attention with a compelling video and photo.

2. Add course sessions: Follow the 3-step guide to define each session:

  • video lectures and text explanations

  • codes and examples

  • quizzes
    Focus on your passion for teaching. We take care of the complexity. Create exceptional online courses with ease on Code-Amooz.

High-Fidelity Prototype:

Card Sorting:

This test evaluates how users categorize functionalities within the Code-Amooz platform to learn and practice coding skills.

Method: Open Card Sorting

Participants receive all card terms and sort them into categories based on their understanding of how functionalities are grouped on the Code-Amooz platform.

Functional Focus: By conducting the card sorting test, Code-Amooz can gain valuable insights into how aspiring developers expect to find and utilize the platform's features. This will ultimately lead to a more user-friendly and effective learning environment.

Impact:

  • Seamless Course Creation with user-friendly tools

  • Boosts Student Learning with interactive Learning Experiences

  • Enhances Engagement by fostering collaboration between learners, educators, and industry professionals.

Key Learnings:

  • Design a comprehensive website for different target groups

  • Design a clear & easy structure for making online courses

  • Prioritizing essential features ensures a strong foundation before adding complexity.