Product Design Case Study / Concept case study
Final Year Project -
Educational Website
shaped into a story.
A study-abroad education website concept with structured browsing and academic discovery.
Project Overview
The work starts before the polished shot.
I treated Final Year Project as a product problem first. The Dribbble image is the final visual layer, but the useful story sits underneath it: who the screen is for, where a user might pause, and what needs to be checked before the interface can feel ready.
Problem Discovery
The real risk was hesitation.
Students needed a clearer way to explore education options and understand next steps. I focused on the moment before the click: does the page explain itself quickly, does the next step feel natural, and does the visual hierarchy support that decision?
Discovery, program browsing, trust, inquiry flow
Journey notes, content priorities, and expected user behavior.
Interface choices tied back to user hesitation and action clarity.
A good-looking screen is only useful when the user knows what to do next.
User Journey
Mapped a first-time student journey from country curiosity to course comparison.
Content Logic
Grouped content into decision stages: destination, program, requirements, proof, and inquiry.
Decision Risk
Identified trust gaps where students need university context, eligibility signals, and clear support.
Design Process
From first intent to a clearer product flow.
I moved from intent to structure before pushing the visual style too hard. That kept the work grounded: every section needed a job, every action needed a reason, and every polished screen needed a quality check behind it.
Discover
Map
Frame
Prototype
QA
Refine
Problem and user intent
Mapped a first-time student journey from country curiosity to course comparison.
Journey and content hierarchy
Grouped content into decision stages: destination, program, requirements, proof, and inquiry.
Browse before commitment
The hero and program sections prioritize exploration first, then inquiry, so the user does not feel pushed into a lead form too early.
Inquiry path checks
Reviewed whether every major browsing area gives the student a clear next step without duplicate or competing CTAs.
Handoff and next steps
Validate program-card labels with students.
Dribbble Screen Gallery
All project visuals now live inside the case study.
The real images from the Dribbble detail page are pulled into this case study, so the reader can review the actual UI screens without leaving the portfolio. No repeated crop placeholders here.

This is the main presentation image from the project detail page.

Flow depth
This screen comes from the same Dribbble project detail, not a repeated crop.
UX Decisions
Why the screens were shaped this way.
Browse before commitment
The hero and program sections prioritize exploration first, then inquiry, so the user does not feel pushed into a lead form too early.
Trust next to action
Eligibility, university, and support cues sit close to action areas to reduce doubt before the student clicks.
Scan-friendly hierarchy
Large category blocks and repeated CTA rhythm make the page easier to skim for students comparing multiple destinations.
QA Lens
I looked for the places the flow could break.
Inquiry path checks
Reviewed whether every major browsing area gives the student a clear next step without duplicate or competing CTAs.
Responsive risk review
Checked the mobile flow for stacked content order, tap target spacing, and whether trust cues remain visible before inquiry actions.
Content clarity pass
Flagged vague labels and replaced them with student-facing language around programs, requirements, and support.
Outcome
What the concept proves, and what it still needs.
This is still a portfolio case study, so I am careful not to fake product metrics. The value is in the clearer flow, the visible UI system, and the checks that would guide the next iteration.
A clearer path from exploration to inquiry.
Stronger credibility moments around student decision points.
A reusable structure for future education landing pages.
Visual Source
Want to review the original shot?
This page documents the UX and QA thinking. The original visual presentation is still available as supporting work evidence.