All work/Case 04 of 10/EdTech ecosystem6 min read

Shine Olympiad

Four parts of one product, finally designed as one.

Shine Olympiad runs online olympiad exams for students from Class 1 to 12 in ten languages. I redesigned the public website, the student dashboard, the mobile experience and the live exam screen.

Role
UI/UX designer
Scope
Website · Dashboard · Mobile · Exam
Surface
Responsive web + mobile
Status
Live
CoverThe new student dashboard: streak, active olympiad, leaderboard and weekly goals.
The short version
Challenge

The website, dashboard, plan pages and exam had each been built at different times with no shared design, and the dashboard gave returning students little reason to open it between tests.

Approach

I designed all four parts on one visual system, replaced static account details on the dashboard with progress and next steps, and merged three plan-related pages into one.

Outcome

A consistent product from homepage to exam, now live at shineolympiad.com, with a dashboard built around streaks, a leaderboard and weekly goals.

4parts redesigned on one system
3 → 1plan pages merged
10languages
1 to 12classes served
01 / Overview

A working product without an identity.

The old website ran on a generic template: a stock photo, a grid of “why choose us” icons and a carousel of quotes. Nothing about it said olympiad, or Shine. Inside, the dashboard showed a student’s username, password and registration date next to an empty “Test History” heading.

Redesigned screenOriginal screenBeforeAfter
DragHomepage, before and after.
02 / Homepage

Say what it is and what it costs.

The new homepage shows a real student surrounded by the features that matter (badges, leaderboards, community, tasks) instead of listing them further down. Study material, test types and detailed reports sit beside it, and the price appears on the first screen, because parents compare options quickly.

MotionThe homepage in motion.
What sets Shine apart.
01What sets Shine apart.
Finding an olympiad.
02Finding an olympiad.
Olympiad details.
03Olympiad details.
Subjects and syllabus.
04Subjects and syllabus.
Registration, step one.
05Registration, step one.
Registration, step two.
06Registration, step two.
Achievers.
07Achievers.
Rankings and recognition.
08Rankings and recognition.
01 / 08 · swipe or use arrows
03 / Dashboard

A reason to come back.

I rebuilt the dashboard around progress: a streak counter, the active olympiad with a one-tap Continue Learning button, a leaderboard, and weekly goals that reset each week. Each one supports something we want students to do: come back daily, finish what they started, and see how they compare.

Redesigned screenOriginal screenBeforeAfter
DragDashboard, before and after.
MotionCore features in motion.
04 / Plans and history

Three pages, one question.

My Plan, Study Material and the subscription page all answered one question: what am I enrolled in, and what do I do next? They’re now one screen, with the active plan on top and Quiz, Short Test, Mock Test and Study Material as tabs below. Test History became a single table with subject, score, date, status and a resume or report button.

My PlanStudy MaterialSubscription status
My Plans3 → 1
QuizShort TestMock TestStudy Material
Redesigned screenOriginal screenBeforeAfter
DragStudy material before, My Plans after.
Test History in one table.
Fig.Test History in one table.
05 / Mobile and exam

Built for thumbs.

The dashboard, plans and live exam use the same system on mobile. The exam screen is the quietest in the product: question, timer and progress, nothing else.

Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
06 / Results

Live at shineolympiad.com.

The redesign is live across the website, dashboard, mobile and exam, so students and parents see one product from the first visit to the final result.

Learnings

The hardest part wasn’t any single screen. It was treating a website, a dashboard and an exam as one product after years of being three.

Almost there+50 XP for finishing0 of 10 case studies cleared.
Next case · 05 / Test-prep platform

Test Series 24×7

A test-prep platform covering 150+ government exams.

+100 XP6 min read
Test Series 24×7 preview

Create a free website with Framer, the website builder loved by startups, designers and agencies.