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.
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.
BeforeAfter
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.
shineolympiad.com
MotionThe homepage in motion.
shineolympiad.com
01What sets Shine apart.
shineolympiad.com
02Finding an olympiad.
shineolympiad.com
03Olympiad details.
shineolympiad.com
04Subjects and syllabus.
shineolympiad.com
05Registration, step one.
shineolympiad.com
06Registration, step two.
shineolympiad.com
07Achievers.
shineolympiad.com
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.
BeforeAfter
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
BeforeAfter
DragStudy material before, My Plans after.
shineolympiad.com/history
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.
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.