StudynLearn

• The website

  • A content check found the site answered too few of the questions buyers ask, such as price, full specs and comparisons.
  • The headline promised help for four kinds of visitors but gave them one message.
  • Each product needed its own page with the same look and behavior.
  • Schools, colleges, coaching centers and a national Olympiad are served from one set of pages.

• The business

  • It competes with Teachmint, Next Education, LEAD Group, Extramarks, BenQ and ViewSonic, each stronger in some way.
  • Buyers spend a lot, so they want certificates, a government listing and proof from other schools.
  • It sells hardware, software and an exam, so the home page has to point each visitor the right way.
  • Trust has to be earned before the call, so the page must do the convincing a salesperson would.

• The build

  • The live site runs on a separate server that I can't push to, so my work reaches it as hand-off packages.
  • I build the front end only. There is no database on my side.
  • Videos and photos were heavy: 437 MB of video across 31 files.
  • Pages have to stay light enough for phones despite that media.

• What I wanted to improve

  • Answer buyer questions on the page: specs, sizes, comparisons and FAQs.
  • Speak to each kind of visitor, with its own clear page for every product under one design.
  • Show proof: certificates, clients and testimonials.
  • Be easy for Google and AI tools to read.

Live site menu, August 2026

Home

Company

Products

Clients

• A headline that names the brand

  The live home page said “Empowering the Future with Studynlearn”. That names the company but not what it sells.

• Fewer answers

  The earlier flat panel page has 10 questions and answers, and it publishes no price and no quote path.

• An earlier look on product pages

  The earlier flat panel page is a light page with pale-blue and yellow buttons and an Amazon.in badge in the header. Chat and payment bubbles float over the page.

• Three copies that disagree

  The live site, my working copy and the company blog said different things about the same topics: the headline, the menu, the FAQ answers and the warranty. There was no single source of truth.

• Competitor check

  I compared the company with Teachmint, Next Education, LEAD Group, Extramarks, BenQ Education and ViewSonic Education. Each is stronger somewhere: brand, curriculum, content library or spec depth. The gap I found is the one sentence nobody owns: one Indian partner for flat panels, AI teaching software and installation, training and support.

• The 50 questions

  I collected the 50 questions buyers ask about smart classrooms and flat panels and ranked them in three tiers. Tier A means competitors build whole pages for it, it appears in three or more of their FAQ lists, and it shows buying intent.

• Content gaps

  I scored ten gaps in priority order. At the top: a price or quote path, plain-HTML questions and answers, a “why this company” block, comparison content and a full spec table.

• Three copies

  A page-by-page comparison of the live site, my copy and the blog set the rule: agree one answer with the owner first, then update every copy to match.

Key findings

What changed

How a visitor moves through it

Home page, Level 1 · Desktop

Home page, Level 1 · Mobile

Home page, Level 2 · Desktop

Home page, Level 2 · Mobile

Blogs page, Level 1 · Desktop

Blogs page, Level 1 · Mobile

Blogs page, Level 2 · Desktop

Blogs page, Level 2 · Mobile

Flat panel page

Flat panel page wireframe

Coming soon

Flat panel page

Coming soon

Structure decisions

• One order on every screen size

  The home wireframe runs in the same order on desktop and on a phone. Cards that sit side by side on desktop stack in one column on a phone.

• Level 2 adds color, not new blocks

  Level 2 keeps the same blocks in the same order as Level 1. It adds a dark navy top, blue accent words in the headings, light-blue bands between sections and an orange main button.

• Blogs: search first, then the grid

  A search box and a category filter sit above a grid of twelve article cards, three across on desktop and one across on a phone. The latest-posts list sits beside the grid on desktop and drops below the page numbers on a phone.

• Headline, one button, one image

  The home wireframe opens with a headline, one main button, “Watch Demo”, and a hero image placeholder below it.

Colors

• Cyan

  #0bb6e7

  The brand accent.

• Deep navy

  #0b0a9b

  Dark accent and small labels.

• Orange

  #FF6B00

  The main button, so it stands apart from everything else.

• Indigo

  #4F46E5

  The active tab or filter, kept separate from the main button.

• Cyan to violet

  Highlighted words in headings.

Design principles

• Shared values, not one-offs

  Colors, spacing and type sizes live in one place. Pages reuse them instead of copying numbers.

• One part, one home

  Shared parts such as the question list, testimonials, blog cards and buttons are defined once and reused. A copy that drifted once quietly overrode the real one and broke a sticky sidebar.

• Motion with a budget

  Heavy hero effects run on desktop only. They skip under 768 px and for reduced motion, and they pause when the tab is hidden.

• Real content only

  No invented job titles, certificate numbers or dates. Missing information is marked as missing.

Home page

Flat panel page

Components

• Floating pill menu

  A dark glass bar with menus that flip sides to stay on screen. On a phone it becomes a rounded drawer.

• Top section with a product video

  A headline with a gradient accent, one orange button, and a looping product video in a device frame.

• Size picker and spec table

  Five size tabs (55 to 98 inches) with photos, key specs and a full table that compares every size side by side.

• Peek carousels

  Hardware and software cards you can drag, with dots and auto-play, and the middle card highlighted.

• Question list

  Searchable, with category tabs and counts. 61 answers across four pages.

• Testimonials

  A video carousel and a review lightbox.

• Tools

  PHP and vanilla JavaScript, with no jQuery, and hand-written CSS with shared values. Bootstrap's grid is used on one page only. Icons come from Lucide and Font Awesome, and galleries use a lightbox library.

• Questions kept in one place

  Each page's questions live in one list that draws both the visible accordion and the search-engine markup, so the two can't drift apart.

• A working copy and a hand-off package, kept apart

  The repository holds a front-end-only working copy that runs on my machine and on Vercel. The company's server developer's own versions of the files live in a separate hand-off folder that is never served, and the two are never merged into one.

• 21

  pages, each one PHP file

• 1

  shared stylesheet, plus one per page

• 0

  databases

• Structure

  Every page is one PHP file with the same header and footer. Everything else is static content plus PHP lists for questions, specs and testimonials. There is no database.

• Styles and cache-busting

  A shared stylesheet holds the colors, spacing, header and footer, and each page has its own stylesheet. Pages link minified copies, which I regenerate by hand after each edit, and every stylesheet link carries a version tag that changes with the edit so browsers fetch the new file.

• Animations written from scratch

  I wrote the engines in plain JavaScript: one master frame loop, neural-network backgrounds, a drag carousel, a WebGL light-rays hero and a starfield hero. They pause when the tab is hidden and skip on phones under 768 px or for reduced motion.

• Responsive layout

  The header becomes a floating pill with a rounded drawer on phones. One spacing value tightens at 992 px and again at 600 px, so every section gets the same rhythm.

• Size picker and spec table

  Five flat panel sizes from 55 to 98 inches, each with photos and key specs, plus one table that compares every size side by side.

• Flat panel versus projector

  A comparison table that answers a question buyers ask before they choose.

• Searchable questions

  61 questions and answers on four pages (AI 21, flat panel 12, K-12 20, Olympiad 8) with category tabs, marked up for search engines.

• The Olympiad page

  A landing page for the national Olympiad with ten subject cards, a three-month exam calendar by subject and its own questions.

• A video series

  A page for 26 conversation episodes, each described for search engines as a video.

• Testimonials

  A video carousel of customer stories and a lightbox for review screenshots.

• Regional offices

  Nine regional offices can be filtered by zone.

• Blog and downloads

  A blog with a case stories filter, and a downloads hub for apps, firmware and content.

• A demo page with a chaptered video

  The Book a demo page holds the form and a demo video. The player sits on the left and a chapter list on the right, with a menu to pick 1080p, 720p or 480p. Chapter images are WebP. The three video files are served from studynlearn.com.

• The blog, with two fallbacks

  Blog posts come from the company's WordPress blog, then a feed, then a saved list if both fail.

• Contact through WhatsApp

  The contact form does not send an email. It opens WhatsApp with a ready-written message, so an inquiry reaches the company without a server on my side.

• Loading behavior

  Gallery images load lazily and the hero image loads straight away. The icon and font stylesheets are loaded in a way that does not block the first paint, and the icon script is deferred.

• A check after every edit

  After editing a PHP or CSS file I check the PHP for syntax errors and ask the local server for the page, to confirm it answers with a 200.

Fixes from checking weight and phones

• Problem

  Heavy media: 437 MB of video in 31 files, 17.7 MB of photos, and two badge posters of 1.6 MB shown at a tiny size.

  Solution

  I re-encoded the videos, converted 304 images to WebP, and cut the posters and icons to the size they are shown.

  Result

  Video fell from 437 to 211 MB and images from 17.7 to 9.0 MB. The two posters went from 1.59 MB to 86 KB.

• Problem

  On phones the screen went white and blinked when scrolling to the last case-story card.

  Solution

  I traced it to a page-height estimate that went stale at one screen width, and corrected the estimate at that width.

  Result

  The freeze is gone.

• 21

  pages, each with its own title and description

• 19

  pages with a share preview

• 61

  questions published as search-engine data

• 2

  placeholder pages held back (noindex)

• Every page says what it is

  Each of the 21 pages on studynlearn.com has its own title and description, and 19 of them also set a share preview (the card that appears when a link is pasted into a chat). The two placeholder pages, the development center and the experience center, are marked noindex, so they are hidden from search until they are ready. I checked these on the live site on 20 October 2026. Some titles and descriptions run longer than the usual 60 and 160 character guides, so that is still to tidy.

• Questions that answer themselves

  The 61 questions on the AI, flat panel, K-12 and Olympiad pages (21, 12, 20 and 8) are also published as search-engine data, built from the same list that draws the visible question list, so the two can't drift apart. I rewrote the 8 Olympiad answers from about 20 words to 87–98 so each one makes sense when an AI assistant quotes it alone. I also fixed a bug that showed raw code such as — inside the published answers.

• Product data in the words buyers type

  The flat panel is described to search engines with the other names buyers use: digital board, interactive whiteboard, smart panel board and touch screen board. Buyers rarely type the company's own product name.

• Open to AI tools, with a plain summary

  The live robots.txt allows the main AI crawlers by name, such as GPTBot, ClaudeBot and PerplexityBot, plus Bingbot, and an llms.txt file tells AI tools in plain language what the company sells and who it is for. I corrected one line in it that still promised home page questions that no longer existed. The live sitemap is out of date: it lists 18 addresses, leaves out the K-12 page, and still names the earlier flat panel address.

What every page carries

• One function for every page

  Vercel runs the new build through one PHP function with a list of allowed pages. A new page needs two small entries: one in that list and one route.

• Hand-off to the company's server

  The real domain runs on the company's own server, so I keep a hand-off folder that mirrors its file layout, and I list changed photos and videos separately from code.

• Caching on the Vercel copy

  Stylesheets and scripts are cached for a day, fonts for a year, and images and videos for 30 days. The live server sent none when it was checked in September 2026, and its settings belong to the company's developer, so these apply to the Vercel copy only.

From address to page

• Problem

  Every deploy failed for more than two days in July 2026. The first design gave each page its own Vercel function and went over the free plan's limit of 12.

  Solution

  I moved to one gateway function that routes every page from a list of allowed pages.

  Result

  One function serves all the pages, and a new page needs only two small entries.

• Problem

  Cards on some pages jumped up and down when the pointer rested near their bottom edge.

  Solution

  Lifting a card also moved the area that reacts to the pointer, so the card slipped out from under it, dropped back, and lifted again. I removed the lift everywhere and kept the shadow and border change.

  Result

  The jitter is gone, and there is a rule for every new card: never lift on hover.

• Problem

  Two new animations didn't move after their first deploy, and there was no error.

  Solution

  A temporary “stop all animation” style was overriding them. I added the new animations to its exceptions, and later removed that kill switch and replaced it with a small phone-only motion budget.

  Result

  Motion returned, and it now follows one rule: off under 768 px or for reduced motion.

• Problem

  My notes said the big videos were stored with Git LFS, but nothing was, so the repository grew. It was about 965 MB in August 2026 and is about 6 GB on 20 October 2026.

  Solution

  I checked the setup instead of trusting the note, corrected the docs, and wrote down the real fix. Moving videos to LFS rewrites history, so it needs a planned day.

  Result

  The docs now match reality. Git LFS is still not set up, so the fix itself is still open.

• Video weight

  211 MB

  Was 437 MB

• Photo weight

  9.0 MB

  Was 17.7 MB

• Two badge posters

  86 KB

  Was 1.59 MB

• Twelve feature icons

  53 KB

  Was 279 KB

What changed for visitors

• Design

  • A hover effect can break a layout. Lifting cards moved their hit area and caused jitter. Test with the pointer resting, not just passing.
  • Shared parts beat copies. Fixing the question list once fixed it on every page that shows it.
  • Dark sections carry impact and light sections carry reading. Mixing both keeps long pages easy on the eyes.

• Building

  • Check the setup, not the note. I wrote down Git LFS as done, but nothing was tracked.
  • When something “does nothing”, look for a global override first.
  • Check minified files. One stray comment ending silently deleted a heading rule.

• Working with others

  • Never send a file to someone else's server without their current version. My draft cache file could have overwritten their routing rules, so I pulled it, and I no longer propose changes to that file.
  • List changed photos and videos separately from code in every hand-off. Two updated photos were once missed that way.
  • A green Vercel build doesn't mean the live site changed. They are two separate copies.

• What I'd improve

  • Move the videos to Git LFS on a planned day. The repository is now about 6 GB.
  • Add a real price or quote path and a visible WhatsApp number.
  • Get real names and roles for the ten testimonial videos.
  • Connect a keyword tool or Search Console so questions can be ranked by real volume.
  • Remove the dead styles that are still in three stylesheets.

• What I designed

  • The design system: colors, type, spacing and shared parts.
  • The floating menu and the top section with a product video.
  • The size picker, spec table and comparison tables.

• What I built

  • 21 pages and the shared header and footer.
  • The animation engines, written from scratch.
  • 61 questions and answers and the search data on every page.
  • The Vercel setup and the hand-off process for the company's server.

• Provided by others

  • Product photos and videos, spec sheets, certificates and company text, from the company.
  • Team headshots, supplied by the owner.
  • The live server and domain, run by the company's developer.