Website to View and Browse Coding Tutorials

Project Background

The project was part of a Google UX Certificate course on Coursera. The goal was to design a responsive website that provided users with a personalized learning experience for coding tutorials. This project involved building a platform that helps users find tutorials, track their learning journey, and connect with mentors.

My Role

Product Design: Creating the website's layout, ensuring responsiveness and ease of navigation.

UX Research: Conducting interviews, creating personas, and using empathy maps to understand user pain points and goals.

Tools

Adobe XD

The Problem

The problem identified was the lack of user-friendly platforms for coding enthusiasts, where they could:

  • Access up-to-date coding tutorials.
  • Track learning progress.
  • Connect with a coding community or mentors.

Existing platforms failed to meet these needs, lacking the comprehensive and immersive experience that learners desired.

The Goal:

The goal of the project was to create a responsive website that would address the shortcomings in current platforms. The platform aimed to:

  • Help users easily discover and access coding tutorials.
  • Provide tools for users to personalize their learning journey.
  • Foster a community where learners could connect and find mentors.
How might we create a user-friendly and intuitive application that enables users to discover and access coding tutorials, fostering a seamless learning experience?

User Research

I conducted 10 in-depth interviews with individuals from various coding backgrounds to understand their pain points and needs.

Key Pain Points identified:

  1. Difficulty finding tutorials that matched their skill level (beginner, intermediate, advanced, expert).
  2. Outdated content in available tutorials.
  3. A desire to be part of a coding community where they could find mentors.
  4. The need for personalized learning plans to track their progress.

Personas

To understand user needs better, I created empathy maps to align design decisions with user challenges.

Sketches & Iterations

I began the design process by sketching low-fidelity wireframes both on paper and digitally. These initial sketches focused on key features like:

  • Search and filtering options.
  • Course organization (by levels, type, etc.).
  • Mentor connection features.

After several rounds of usability testing, I incorporated feedback to refine the design.

Explore the Prototype