A concept e-learning platform designed to help people learn new skills in a clear, structured, and motivating way.
LearnHub is an e-learning platform for working adults who study in short sessions around a job and family. The goal was to make three things obvious at every step: where to start, what comes next, and how far you've come.
A self-initiated concept, designed end to end, from persona and user flow to wireframes, a component system and high-fidelity screens.
Many e-Learning platforms lack clear structure, making it hard for learners to know where to start or what to learn next.
The solution focuses on structured learning paths, progress visibility, and a calm interface to support focused learning.
Ana has worked in accounting at a mid-size company in Tbilisi for eight years and wants to move into data analysis. She studies Excel, SQL and Power BI online, about 40 minutes in the evening once her son is asleep, plus a lunch break or two a week. In the last two years she started four online courses and finished one. Each time she stopped at the same point: she lost track of where she was and what came next.
After log-in or sign-up, the dashboard offers two main paths: continue a course already in progress, or browse and filter the catalog to start a new one. Both end at the same point: completing the course and getting a certificate. Analytics sits one step from the dashboard, so progress is always a click away.
Before any color or imagery, I blocked out the core screens in low-fidelity to validate layout, hierarchy, and content priority.
Rubik was selected for its readability and modern feel. Its rounded forms and multiple weights make it suitable for learning dashboards and content-heavy screens.
The interface uses blue as the primary color, supported by multiple blue shades and neutral tones. This helps create a calm, trustworthy atmosphere and allows clear visual hierarchy across the interface. Different shades are used to separate sections, indicate progress, and highlight key actions without overwhelming the user.
Seven components cover every screen in the product: two course cards, a progress card, a stat card and three button types, each designed with its default and hover state, so new pages are assembled rather than redrawn.
The landing page leads with a clear promise, then builds trust through recognizable company logos, a curated set of popular courses, a four-step learning path, and an FAQ section that answers hesitations before they become drop-off points.
The first screen after log-in answers "where was I?" before anything else. One Continue Learning bar resumes the exact lesson. Weekly hours, streak and completed courses sit above it, and active courses show their progress on the side: both entry points from the user flow, on a single screen.
My Learning surfaces today's goals, an in-progress course list with visible completion percentages, and a learning-plan calendar, giving Ana the sense of progress she said she needed to stay motivated.
A searchable, filterable catalog with clear course cards: duration, level, and enrolled-learner count all visible before a click, so choosing a course never feels like a gamble.
Everything that affects the decision to enroll is visible in the first view: duration, level, language, price and what's included. The curriculum is split into modules with lecture counts, so the commitment is clear up front, and ratings and student feedback come last, as confirmation rather than persuasion.
Every key screen answers the same pain point: losing track. "Continue learning", visible completion percentages and the learning-plan calendar all came from it, which kept design decisions focused instead of feature-driven.
Ana's routine (short evening sessions, switching between phone and laptop) shaped the whole product. Next time I'd test those assumptions with real working learners before moving to high fidelity, not after.
Run a usability test of both main flows with five users, design the mobile experience Ana uses at lunch, and add Georgian localisation for the local market.