Sli.se Play — Case Study

Project statement

Redefining how students consume knowledge.

The goal: design an educational app that delivers high-quality video and audio content tailored for school students — simplifying learning through engaging, interactive multimedia accessible anytime, anywhere.

A rich library of videos, podcasts and audio lessons across all grade levels, paired with progress tracking, quizzes and playlists, so students can learn at their own pace in a distraction-free environment.

Roles & Responsibility

UX Designer

User research with students, teachers & parents

Personas, wireframes & hi-fi prototypes

Video/audio players with speed, subtitles & bookmarks

Usability testing & iteration

Android Developer

Built in Android Studio with Kotlin

Clean architecture for maintainable, scalable code

RESTful API integration & user-data sync

The challenge

Quality learning content was scattered and hard to navigate.

Problems

No single home for contentStudents struggle to find accessible, engaging and structured resources in one centralized platform.

Rigid or limited appsTraditional methods lack flexibility, and existing apps are either too complex or focus on limited formats.

Missing audiovisual depthStudents lack interactive, audiovisual materials tailored to their curriculum.

No oversight for adultsTeachers and parents lack tools to monitor progress and support the learning journey.

Solutions

One unified libraryHigh-quality educational videos and audio across every subject and grade level.

Personalized recommendationsSurface content based on a student's grade, subjects and progress.

Offline accessLet students download videos and audio lessons to learn anywhere.

Tools that support learningSpeed control, bookmarks, closed captions and progress tracking built in.

Research · Personas

Designing for the learner and the guide.

Needs

Understand science & math through engaging videos
Quickly access subject-wise lessons to revise before exams
Save favourite lessons for offline learning while travelling

Pain points

Hard to find structured, reliable video content for her curriculum
Loses focus on apps with cluttered, busy designs

Needs

Recommend reliable video lessons for better understanding
Use the app as supplementary material for difficult topics
Encourage students to track learning and finish assignments

Pain points

Existing apps lack subject-specific, quality content
Hard to monitor which students engage with the material

Empathy map · Isabel

Inside the head of an 11-year-old learner.

Thinks

"Will I be able to understand this topic for my exam?"
"How can I find the best videos to help me learn?"
"I need to revise before the test — but where do I start?"

Uses

Video/audio content for topics hard to grasp from textbooks
Educational apps and websites for subject videos
Her phone or tablet anytime, especially while commuting

Does

Actively searches for helpful videos when struggling
Revisits difficult concepts to make sure they stick
Takes notes while watching to reinforce learning

Feels

Stressed when she feels unprepared or confused
Frustrated when resources aren't engaging enough
Motivated when content is visual, clear and easy to follow

User flow

A clear path from sign-in to learning.

Colors & typography

Soft, playful and easy on young eyes.

A violet-led palette on a light lilac surface keeps the experience calm yet joyful. Vibrant mint, blue, sun-yellow and pink are reserved for categories, key actions and rewards — enough energy to delight without overwhelming young learners.

#6D4AE6

Primary · Violet

#5B8DEF

Secondary · Blue

#1FC9A0

Support · Mint

#FFC83D

Highlight · Sun

#FF6FA5

Accent · Pink

#F4F2FC

Surface · Lilac mist

Baloo 2

A friendly rounded display face for headings and titles — warm, confident and made for young readers.

HeadingsLearn · Watch · Play

Plus Jakarta

A modern geometric sans for the interface — crisp, highly legible and neutral across every screen.

Body / UIAa Bb Cc · Watch lessons at your own pace

Hi-fi mobile app · Final designs

The learning experience, screen by screen.

Nine screens — onboarding, sign in, home, categories, search & filter, video detail, the immersive player, progress & badges and the profile — covering the full journey on iOS & Android.

Branding & system

One identity, two modes.

The SLI Play brand carries from a bright, playful library into a focused, cinematic player — same logo, same palette, two moods tuned to the moment.

Browse & discover — a personal home feed, bento subject browsing and grade-aware search & filtering.

Player & library

Built around watching and revisiting.

Every lesson is a few taps away, organized by subject and grade. Students bookmark favourites, download for offline learning and pick up exactly where they left off — with subtitles, speed control and a distraction-free, full-screen player.

Behind the build

Problems I faced — and how I solved them.

Designing and shipping SLI Play meant balancing a young audience, a sprawling content library and the realities of school devices. A few challenges shaped the final product the most.

01Design

Too playful, too distracting

Early concepts leaned hard into gradients and saturated color. In testing, younger students got over-stimulated and lost focus on the lesson itself.

Solved: restrained everything to a light surface and reserved bright color for categories, progress and primary actions only — energy without the noise.

02UX strategy

One app, two very different users

Students just want to watch and learn; teachers and schools need accounts, enrolment and oversight. Surfacing both risked a cluttered, confusing interface.

Solved: kept the learner experience front-and-centre and tucked school-account tools — wallet, enrolment, monitoring — neatly behind the profile tab.

03Interaction

A player that does a lot, simply

Speed control, subtitles, offline download, resume and saving all had to coexist on one screen — without overwhelming a seven-year-old who just pressed play.

Solved: a calm full-screen player with one obvious primary control and four clearly-labelled options, so power features never get in the way.

04Information architecture

Discovery across a huge, mixed library

Content spans every grade and subject. Flat lists buried the good lessons and made it hard for a student to find what fit their level.

Solved: grade-aware filtering, a bento browse layout and a continue-watching shortcut so the next relevant lesson is always one tap away.

05Development

Offline & low-end school devices

School Wi-Fi is unreliable and many devices are modest. Streaming-only would have left a lot of students unable to learn when it mattered.

Solved: a clean Kotlin architecture with local caching and downloadable lessons, so watching and revising continues fully offline.

06Development

Keeping progress in sync

Watched history, saved lessons and quiz results all needed to follow a student across phone, tablet and school accounts without ever feeling lost.

Solved: RESTful API integration with reliable user-data sync, so progress, streaks and badges stay consistent on every device.