Playpen School.
A Cambridge-curriculum school in Bashundhara, Dhaka, teaching from Playgroup to A Level. All the content a parent needs was already on its website, spread across 48 pages that were hard to navigate. We reorganised it into 14 pages and wrote the brand rules the school's crest never had.
- Client
- Playpen School
- Sector
- Education, English medium
- Location
- Bashundhara, Dhaka
- Live preview
- playpen-school.vercel.app ↗
The information was all there. Finding it was the problem.
playpen.edu.bd had 48 pages. Some held a single paragraph: "Multimedia Projector" and "The Identity Card" each had their own menu slot. The O Level and A Level subject lists, the first thing a prospective family looks for, sat inside one long Senior School page. The four school stages were on four separate pages, with no overview linking them.
Before a parent saw anything, the homepage loaded 24 stylesheets and 24 scripts. It had no search summary, no structured school data for Google, and five competing main headings. The banner read "Inspring young minds", and the photo gallery said "gallery was not found". There was no enquiry form, so a parent browsing in the evening had to write down a phone number and call during office hours. The school's history also contradicted itself: the site gave a founding year of 1977 in one place and 1997 in another, and said "48 years" on one page and "49" on another.
Playpen already had a strong crest: a crimson shield, a gold border, five stars. What it lacked was any written rule for colour, type, clear space or use at small sizes.
14 pages, one voice, and a brand system taken from the crest.
We mapped all 48 old pages into 14 pages, with sections inside each page that can be linked to directly. Nothing was dropped: every fact from the old site has a documented new home. The O Level and A Level subjects now have 21 subject cards of their own. We rewrote the copy in one consistent voice and documented a house style so it stays that way.
The design direction is editorial heritage. Crimson and gold are sampled from the school's own shield and set on a warm parchment background. Headings use Fraunces and body text uses Plus Jakarta Sans. The pages are static HTML, generated by a small Python script with no dependencies. The header, navigation, footer and structured data are defined once and reused on every page. Motion is plain JavaScript, and the page still works as plain HTML if the script fails. Every page has its own title and search summary, and the site includes School structured data, a sitemap and 46 permanent redirects, so old bookmarks and Google results still land on the right page.
The brand work produced an 11-section guideline, a one-page brand board and 7 logo files, including a simplified shield mark that stays readable at icon size. We added Bronze #8A5C22 to the palette because the crest's gold measures 2.4:1 on a light background and fails WCAG AA. Bronze is in the same colour family and measures 5.4:1.
- Website and brand auditFindings checked against the live site
- Information architecture48 old pages mapped to 14
- Brand guidelines11 sections, brand board, 7 logo files
- Website14 pages, 360 px to ultrawide
- Redirect map46 permanent redirects on Vercel
- Verification checklistFacts only the school can confirm
A redesign that discards a school's history is a replacement.
- The crest, which we didn't redraw or modernise.
- The school's own words, including "We assure you of the best possible care and education for your child".
- The school's own photographs. We added no stock images.
- Crimson and gold, sampled from the crest rather than replaced.
- Every existing web address, redirected to its new page.
Measured on both homepages as they stand today.
The new site is live as a preview. It will replace playpen.edu.bd once the school confirms the facts listed below. Enquiries and rankings can only be measured after launch, so they aren't claimed here. Everything below we measured ourselves on 16 September 2026.
| Measure | playpen.edu.bd | New site |
|---|---|---|
| Pages | 48 | 14 |
| Stylesheets and scripts on the homepage | 48 | 3 |
| Homepage code | 163 KB | 45 KB |
| Pages with a search summary | 0 | 14 of 14 |
| Structured school data for Google | None | Address, phone, founding year, curriculum |
| Main headings on the homepage | 5 | 1 |
| Online enquiry forms | 0 | 3, ready to connect |
| Google Lighthouse, mobile | ||
| Performance | 46 | 64 |
| Accessibility | 82 | 98 |
| Best practices | 77 | 100 |
| SEO | 92 | 100 |
| Largest content visible | 69.4 s | 5.6 s |
| Homepage download size | 12.6 MB | 1.9 MB |
| Network requests | 93 | 19 |
Lighthouse 13.4.1, mobile emulation, two runs per site. We report the old site's better run and the new site's worse run. Performance is the weakest result: 3.3 s of the 5.6 s is the hero photo waiting to render, not downloading. That's the first fix after launch.
Five facts only the school can confirm.
- The founding year (1977 or 1997), and whether to show a year count at all, since it goes out of date every September.
- The 12 O Level and 9 A Level subjects offered for the coming year.
- All 11 phone numbers and 8 email addresses published across five departments.
- Which classes are open for admission, and whether the two downloadable forms are current.
- Consent on record for the 12 students named on the achievements page.
Two items are for whoever hosts the site: connecting the three forms to the school's email, and testing on a real phone.
| Stack | Static HTML, CSS and vanilla JavaScript · Python 3 site generator, no packages · Fraunces + Plus Jakarta Sans · schema.org School data · sitemap.xml · Vercel with redirects and cache headers |
|---|---|
| Duration | 15–16 September 2026 · content capture to live preview |
| Team | Brand · Content and information architecture · Front-end engineering |