All work/Case 07 of 10/Website template · Built in Framer5 min read

Vertex Academy

A ready-made website for government-exam coaching centres.

Vertex Academy is a template website for white-label clients, aimed at coaching centres that prepare students for government exams. It covers what a student looks for: classes, study resources, faculty, results and a full exam catalogue. I designed and built it in Framer.

Role
UI/UX designer + Framer build
Scope
Template website · Exam pages
Stack
Framer · React components
Status
Live preview
The homepage: a clear promise next to recent selections.
CoverThe homepage: a clear promise next to recent selections.
The short version
Challenge

Most coaching-centre websites are a phone number and a list of courses. Students comparing institutes want to see batches, teachers, results and what each exam involves before they enquire.

Approach

A student-facing site that follows the questions a student asks, from “can I trust you?” to “which batch fits me?”, with a searchable exam catalogue and a detail page for every exam.

Outcome

A complete template with a catalogue of 39 exams across 11 categories, a reusable exam page, and a look that adapts by changing the name and two colours.

39exams
11categories
7sections on every exam page
3brand settings: name, main colour, accent
01 / Overview

Built for the student, sold to the institute.

Vertex Academy is the sample brand for a template coaching centres can make their own. The site speaks to students preparing for SSC, Railways, Banking, Teaching and state exams, and it’s designed so an institute’s name, colours and content can replace the samples without breaking the layout.

02 / Homepage

Classes, resources, proof. In that order.

The homepage follows a student’s questions in order: can I trust you, what do you teach and when, what study material is there, and who has been selected before. A deep navy with a lime accent keeps the page calm and makes every main button easy to find.

Everything a student’s preparation needs, in four parts.
01Everything a student’s preparation needs, in four parts.
Classes by goal and timing.
02Classes by goal and timing.
Study resources with search and filters.
03Study resources with search and filters.
Faculty.
04Faculty.
Student experiences, marked as samples.
05Student experiences, marked as samples.
01 / 05 · swipe or use arrows
03 / Exam catalogue

39 exams, one search away.

The catalogue groups exams into central, state and school categories, with counts in a sidebar and a search box that matches exam, state or category.

Exam catalogue with category sidebar and search.
Fig.Exam catalogue with category sidebar and search.
04 / Exam pages

One template, a page for every exam.

Every exam opens the same detail page: overview, exam pattern, syllabus, eligibility, selection process, FAQs and a free mock test. A sticky menu jumps between sections, and a plan card stays in view while students read.

Exam page with the plan card.
Fig.Exam page with the plan card.
Section menu and exam pattern.
Fig.Section menu and exam pattern.
05 / Built to be reused

Change three settings, keep the design.

The whole site rebrands from three settings: institute name, main colour and accent. Every sample result, testimonial and price is labelled as a sample, so an institute can’t accidentally publish placeholder claims.

06 / Results

Ready to hand over.

The template is complete and live as a preview, with the homepage, the 39-exam catalogue and the exam page template ready for an institute to make its own.

Learnings

A template is finished when someone else can change the name, colours and content and it still looks designed.

Almost there+50 XP for finishing0 of 10 case studies cleared.
Next case · 08 / Content platform

Naukri Connect

A current-affairs section added to a live job-alerts site.

+100 XP5 min read
Naukri Connect preview

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