SmartSchool Corporate Website

• The business objective

  • Show SmartSchool Education as the company behind two brands.
  • Send institutional buyers to one clear action: Book a Demo.
  • Give investors, press and job seekers a proper place to look.
  • Keep the two brands, StudynLearn and SNL, visible without hiding the company above them.

• The earlier site

  • It mixed in pages inherited from StudynLearn.
  • It risked reading like a product catalogue instead of a company.
  • The parent company was hard to see behind the two brand names.
  • Several facts conflicted between pages, such as the customer count and founding year.

• The constraints

  • Plain PHP on Vercel, no framework and no database.
  • Content the company has not approved cannot be shown: figures, documents, names.
  • The header, phone drawer and footer must always agree, so all menus come from one data file.
  • Every page has to work at phone, tablet and desktop widths.

• What I wanted to improve

  • Make the company, its brands and the demo action clear on the first screen.
  • Use one design across every page.
  • Build the menu around the company, not the product list.
  • Keep Brands, Clients, Company, Blogs and Investor Relations easy to reach.

The path I designed for a buyer

• Keep it plain PHP

  No framework or database: each page is one PHP file with shared header and footer parts. It deploys as one serverless function behind clean web addresses.

• Honest content

  Where the company has not approved a figure or document, the page shows that it is not published instead of a placeholder.

• Page-level styles

  The dev team asked for each page to carry its own styles. A build script trims each page's CSS to only what it uses.

• 21

  Page files

• 60

  Newsroom stories

• 16

  Investor sections

• 4

  Widths checked

• One design system

  Colors, spacing and type are shared tokens. A single change to the tokens turned the whole site dark while the homepage hero stayed light.

• One menu file

  The header, the phone drawer and the footer render from one data file, so adding a link is a one-line edit.

• One routing function

  Every page goes through one gateway file, because the hosting plan limits how many functions a project may have.

• Investor Relations

  Sixteen sections with a sticky section bar. Documents appear only if the file exists, with filters and search once there are some. Financial figures show only when approved.

• Newsroom

  Listing with search, category and year filters and pagination, plus one template for every story. Each story keeps its old address so existing links still work.

• Blogs

  The latest StudynLearn posts, fetched and cached for an hour.

• Responsive homepage

  The desktop and phone layouts are composed separately: the hero text comes first on a phone, and the logo strip becomes a swipeable row.

• Cookie choice and demo contact

  A consent banner with Accept and Decline, and a contact form that opens a ready-made WhatsApp message.

• Layouts at 390, 768, 1024 and 1440 pixels

  Checked for sideways scrolling, a working phone menu and missing images. The checks found a hidden overlay that was blocking clicks, which was fixed.

• Accessibility scan

  An automated WCAG 2.2 A and AA scan (axe) came back clean at 1440 and 390 on the homepage, about, careers, clients, downloads and newsroom pages.

• Keyboard and motion

  Visible focus rings, menus that close on Escape, scrolling areas reachable by keyboard, and a hero video that pauses when reduced motion is on.

• Per-page metadata

  Each page sets its own title, description, canonical link, Open Graph and structured data. The homepage describes the company and its two brands.

• Newsroom sitemap

  A sitemap lists the newsroom and every story with its real update date.

What changed for visitors

• What I learned

  • A single menu data file saves more time than any visual polish.
  • An honest empty state is better than a made-up number on an investor page.
  • Fix overflow at its source: hiding it on the page only masks the problem.
  • Large visual changes are safest through shared tokens, not page-by-page edits.

• What I built

  • The V2 design and frontend: homepage, menu and footer, investor relations, newsroom and the dark restyle.
  • The checks at four widths and the accessibility scan.

• Provided by SmartSchool Education

  • The company, its brands, products, logos, photographs and news stories.
  • The earlier site and its content.
  • Decisions on facts such as customer counts and the legal name.