Highlight — Product Design Case Study

Context

Highlight is one of Kyrgyzstan's largest online academies for ORT prep (the national university entrance exam). The platform combines video lessons, practice, tests with mistake breakdowns, and curator support into a single learning journey.

The product spans three surfaces: a web app for students, a mobile app with the same functionality, and an admin panel for curators. The audience is school students and applicants preparing for the ORT who want a high score to enter top universities.

My role

I was the sole in-house product designer. I owned the design of all three platforms and the design system that tied them together. I also coordinated two remote designers working on the games — guiding the visuals and keeping them consistent with the overall system.

The challenge

The product grew fast, which created three problems:

Three platforms evolved without a shared design system — no consistency, colors applied chaotically.
The curator admin panel was outdated: heavy to read, cluttered layout, unwieldy long tables.
Students lacked engagement — prep needed to feel less tedious.

Design system

I started with the foundation — the design system. There was a real color problem: colors were applied inconsistently, and developers didn't know which color served which purpose. I built a system of variables and colours modeled on Untitled UI: semantic tokens (not “blue” but “action color”, “error color”, etc.) and a component library.

The key value: the system became a shared language between design and development — developers got unambiguous rules for which token goes where. It also kept all three platforms (web, mobile, admin) visually consistent from a single source.

Color scales with WCAG contrast ratios on every swatch

Typography sheet: the Inter typeface with a scale from Display 2xl down to Text xs in four weights — Inter type scale: Display 2xl to Text xs, four weights

Input field states: email and phone fields shown default, typing, focused, filled, disabled and error — Input fields from default to error

Admin panel redesign

I fully reworked the curator admin panel. The old version had perception issues (light, contrast) and a cluttered layout — sidebars, tabs, and cards followed no shared logic, with no consistency. I brought everything into one coherent system built on the new components.

I also solved the pain of long tables. Curators work with large volumes of data, and the tables were hard to use. I added filters and column sorting, plus the ability for each curator to choose which columns to display. Now each curator tailors the workspace to their task instead of scrolling an overloaded table.

Old curator admin: a dense students table with small low-contrast text and a bare sidebar — Before

Redesigned admin: students table with a role sidebar, a total of 8,211 students, search, filters and a 19-column picker — After

Four sidebars side by side, one per role: Admin, Main Curator, Curator and Debtor, each showing only its own sections — One sidebar component, four roles: each person sees only what their job needs

The full students table with all 19 columns in the light theme: contacts, subject, subscription, curator, manager, status and freeze dates — The full 19-column table, in light and dark themes

The same 19-column students table in the dark theme — The full 19-column table, in light and dark themes

Student experience

The home screen now leads with what's next: continue the lesson, keep the streak, grab a certificate, try a mock test.

Old student home: a weekly streak, the current lesson and three course cards with progress bars — Before

New student home: a continue-learning card, the streak with the bot mascot, a certificate card, a mock test card and course cards — After

Gamification

To boost student engagement, we added games right inside the platform. In spirit they're close to Duolingo Math: students solve math problems in a game format rather than through dry tests. I owned the game experience design and coordinated the two designers building them.

The goal was simple — make ORT prep less monotonous and give students a reason to come back. The games landed well: students played them actively.

Games list on web and mobile: game cards with a short description, level, coin reward and a play button — The games list, with level and coin reward on every card

Match the pairs game: tap an expression and the number it equals, with a progress bar and five lives — Inside a game: matching pairs, multiple choice, a number line and the reward at the end

Multiple choice game: 2 + 2 + 2 with four answers and a red Wrong answer panel showing the correct one — Inside a game: matching pairs, multiple choice, a number line and the reward at the end

Engagement

Leaderboard: the top three students crowned on a violet banner, above a table with the student's own row highlighted — A leaderboard with crowns for the top three and your own place always in view

Mobile app

The mobile app mirrors the web functionality, but a small screen demands discipline. I brought it to minimalism and usability: removed clutter, simplified navigation, and leaned on the design-system components so mobile and web feel like one product.

Mobile home screen: a 22-day streak, coins, the weekly streak tracker, the shop, a recommended lesson and a subscription reminder — The home screen, plus the streak reminder, test Live Activity and Dynamic Island that bring students back

Dynamic Island showing the chapter and a 05:00 test timer — The home screen, plus the streak reminder, test Live Activity and Dynamic Island that bring students back

Outcome

Curators: lots of positive feedback — the interface felt more modern and usable.
Students: actively used the games — engagement went up.
Team: the design system became a backbone for further development and sped up design-to-code alignment.
Overall — positive feedback from the team, curators, and students.

Next case

Doki