91CoderStreet – An E-learning Platform

Overview

91CoderStreet is a comprehensive e-learning platform designed to teach Full Stack Product Development using the MERN (MongoDB, Express, React, Node.js) stack. It’s the brainchild of the agency’s founder, envisioned as a specialized resource for aspiring developers to gain in-depth, hands-on knowledge of building real-world applications using modern technologies.

My Role

As the UI/UX Designer on the project, I was responsible for designing the overall user experience, wireframes, and the UI of both the website and the learning dashboard. I collaborated closely with developers, content creators, and stakeholders to ensure that the platform met the educational and business goals while providing a seamless user experience.

The Challenge

The agency's founder identified a gap in the market for focused, project-driven learning in Full Stack development. Most e-learning platforms provided scattered tutorials or lacked the structure needed to prepare students for real-world jobs. Our goal was to design an engaging platform that not only teaches the MERN stack but also provides users with the tools to build portfolio-worthy projects and gain job-ready skills.

The agency's founder identified a gap in the market for focused, project-driven learning in Full Stack development. Most e-learning platforms provided scattered tutorials or lacked the structure needed to prepare students for real-world jobs. Our goal was to design an engaging platform that not only teaches the MERN stack but also provides users with the tools to build portfolio-worthy projects and gain job-ready skills.

Process

1. Research & Discovery

Understanding the target audience was critical to the platform’s success. I conducted interviews with aspiring developers, instructors, and hiring managers to identify their needs. Key insights included:

  • Students wanted more interactive learning, such as coding challenges and real-world projects.

  • Instructors emphasized the need for simplicity in course creation and student tracking tools.

  • Employers highlighted that they valued practical skills, especially demonstrated through real-world projects.

2. Design & Ideation

With these insights, I started sketching and wireframing different user flows. I prioritized a simple and intuitive design to ensure that users could easily navigate between learning modules, challenges, and their personal progress dashboard.

Key Features I Focused On:

  • Course Overview Page: Clean and structured, displaying course content, instructor details, and project requirements.

  • Interactive Code Editor: Students can write, test, and submit code directly on the platform, making learning more hands-on.

  • Progress Tracking: Visual progress bars and checkpoints to help students track their learning milestones.

  • Project-Based Learning: Each module ends with a real-world project, allowing students to apply the concepts they learned and build a portfolio.

3. Prototyping & Testing

I created high-fidelity prototypes using Figma, ensuring they reflected real interactions such as navigating through lessons, submitting code, and checking project results.

To validate the designs, I conducted usability tests with a small group of students and developers. The feedback helped me refine:

  • Onboarding flow: Simplified the registration process and added tooltips for easier navigation.

  • Project submissions: Enhanced clarity in the project submission process by introducing clear visual cues.

Results & Takeaways

This project taught me the value of aligning user needs with business goals. I also realized the importance of iterative design and the power of user testing in uncovering design flaws that would otherwise go unnoticed. Moving forward, I aim to incorporate more collaborative features into the learning experience, such as peer reviews and group projects.

Tools Used:

Social Media Marketing Campaign (Instagram & Facebook)

In addition to designing the platform, I spearheaded a social media marketing campaign for 91CoderStreet on Instagram and Facebook to increase brand awareness and drive user sign-ups.

Key Tactics:

  • Engaging Visual Content: I created eye-catching visuals and promotional videos that highlighted the platform’s unique approach to Full Stack learning. Posts included interactive quizzes, course previews, and testimonials.

  • Targeted Ads: I set up targeted ad campaigns on both platforms to reach aspiring developers, focusing on key demographics like early-career professionals and students.

  • Community Engagement: Through regular posts, stories, and comments, I engaged with followers and built an online community, encouraging user interaction and questions about the platform.

Results:

  • 500+ sign-ups in the first two weeks.

  • 30% increase in website traffic driven from social media.

  • 1,000+ new followers across both platforms.

This campaign helped establish 91CoderStreet as a go-to platform for MERN stack learning while increasing user engagement and conversion.