StudyML: UX/UI for a Machine-Learning Practice Platform

StudyML is a learning platform for data science and machine learning. We designed its desktop and mobile interfaces across problem discovery, coding practice, scheduled review and progress tracking.

Keep the learning hierarchy clear as users move from a topic to an individual problem

Bring problem context, coding and feedback into one workspace

Make review status and learning progress easy to find

Carry the core experience across desktop and mobile

UX/UI design, low- and high-fidelity screens, responsive mobile layouts and a Figma design system.

We organized the desktop workspace around the topic navigation, problem description and code editor. Test cases and terminal output sit alongside the exercise, while Run and Submit remain in the top bar. The layout keeps the problem, the work and its feedback visible together.

We designed the deck overview to show concept status, difficulty, upcoming reviews and recent activity. Selecting a concept opens its detail panel within the same page, with difficulty tracks, interval progression and review history. The two screens show that relationship in context.

The motion preview shows transitions between the deck overview, concept detail and mobile mastery views.

We designed dedicated mobile layouts for browsing problems, coding and session completion. Description, solution and code move into tabs, and the main product areas remain accessible through the bottom navigation. Each screen keeps its task and primary actions together.

We brought topic summaries, difficulty-level progress, the skills overview and the rating trend into one progress page. Shared dark surfaces, typography and orange accents connect this view with the practice and review screens.

Desktop UX/UI designs

Responsive mobile designs

Low- and high-fidelity screens

Figma design system

Interface content and figures shown are sample design data.