Go back Case study

SkillPath

Asks users about their career goal, current skill level, available study time, and target timeline — then creates a personalized roadmap with learning phases, skills, weekly goals, projects, and milestones.

Role
UX Designer, AI-assisted build
Type
Web app
Tools
Figma, Claude
Output
Working application
Web app · AI-assisted

Problem

Learners often know what career they want to pursue but don't know what to learn, in what order they need to learn.

Solution

SkillPath asks users about their career goal, current skill level, available study time, and target timeline. It then creates a personalized roadmap with learning phases, skills, weekly goals, projects, and milestones.

Role

UX designer, AI-Assisted Design and Development.

I designed the product concept, user experience, visual style, and interactions. I used Claude as an AI tool to help build the application. I reviewed and refined the design to create the final interactive experience.

Expected outcome / impact

  • Help learners create a clear learning path from their career goal.
  • Make learning easier to manage with weekly goals and time-based planning.
  • Help users stay on track by adapting the roadmap when their schedule changes.
  • Give learners a clear view of their progress, milestones, and upcoming tasks.

Design outcomes

  1. 01

    Four-step onboarding

    Created a simple four-step onboarding flow to understand the learner's goal, level, available study time, and target timeline.

    Mockup
  2. 02

    Personalized learning roadmap

    Designed a personalized learning roadmap with phases, skills, lessons, projects, and milestones.

    Mockup
  3. 03

    Calm & Accessible Interface

    Designed a dashboard that brings together progress, current phase, study streak, weekly goals, milestones, and next actions.

    Mockup
  4. 04

    Responsive layouts

    Created responsive layouts that adapt across desktop, tablet, and mobile screen sizes.

    Mockup
  5. 05

    Progress tracking

    Included progress tracking through completed tasks, milestones, study streaks, projects, and weekly learning hours.

    Mockup

Key learnings & takeaways

This project helped me understand how to design a personalized learning experience without overwhelming users with too much information.

I learned to organize complex information into simple phases, goals, projects, and progress. I also learned how adaptive features can adjust to changes in a user's time and progress.

Building SkillPath with AI helped me turn an idea into a working app faster. It also taught me the importance of making my own design decisions and refining the AI output.