FILE №002 / CampusGroom Redesign

Project Record No. 002 — Web Design & Development

CampusGroom, rebuilt.

A self-serve career-prep site for engineering graduates in India — soft-skill courses, interview questions, and fresher job listings — restructured from a stacked blog into a fast, navigable study companion.

View Live Site Read the Case File ↓
CERTIFIED WORK • CASE FILE 002 • A+ SHIPPED

Overview

The assignment

CampusGroom's content — soft-skill lessons, interview questions, job postings — was live but flat: everything lived in one long scroll with inconsistent styling and no clear paths through it.

The brief was to give students three legible tracks — Learn, Prepare, Apply — supported by a consistent visual system, and to get the site loading fast on the low-end phones most visitors use. Everything here reflects the front-end design and build work delivered against that brief.

ClientCampusGroom
RoleWeb Design & Front-End Dev
Focus areasCourses, Interview Prep, Jobs
StackHTML5 · CSS3 · JavaScript
StatusLive

Scope of Work

Four subjects, one transcript

Tap a row to see what each piece of work actually involved.

IA · 101

Information Architecture

Regrouped courses, interview Q&A, and job listings into three clear tracks — Learn, Prepare, Apply — so a visitor reaches relevant content in two clicks instead of scrolling a single feed.
A
UI · 204

Visual System

Replaced page-by-page styling with a small component library — cards, tags, buttons, section headers — reused across every template, so new pages match without rebuilding CSS each time.
A
PERF · 310

Performance

Compressed and lazy-loaded images, removed render-blocking scripts, and simplified layout markup to bring mobile load times down for visitors on slower connections.
A+
CMS · 118

Content Templates

Built reusable templates for interview-question guides and job postings, so new entries can be published by filling in content rather than hand-coding a page each time.
A

Before / After

Same content, a different structure

An illustrated comparison of the layout logic — swap the tab to see the shift from a single dense feed to a modular grid.

Results

Marks on the record

0

Pages on new templates

0

Content tracks, from 1 feed

0

Pages mobile-responsive

0

Faster mobile load time

Materials Used

Tools on the desk

HTML5 CSS3 JavaScript Responsive Design Figma Git On-page SEO Google Fonts

Remarks

Faculty comment

OKAPPROVED

"Clear structure, and students can actually find what they're looking for now. Exactly the reorganisation the site needed."

— CampusGroom Team