SNL Solution

• The old website

  • Each smart board size has its own page, so comparing two sizes means going back and forth.
  • The menu goes three levels deep, and the pages use older tools (Bootstrap and jQuery).
  • Search engines were not given the basics: no sitemap, no canonical addresses, and unknown addresses answered “OK”.
  • Exact specs sat on separate pages, so there was no single place to see them side by side.

• The business

  • SNL sells smart boards, all-in-one computers, classroom cameras and digital signs to schools across India, and installs turnkey studios.
  • The goal is inquiries, not online sales. The buy buttons link out to SNL's Amazon.in listings.
  • Buyers need real specs, certificates and installations before they trust a company they haven't met.
  • Schools compare sizes and specs before they call, so the answer has to be on the page.

• The build

  • No frameworks, because the company's own code is PHP.
  • Every product claim must come from a real spec sheet.
  • The live site runs on a separate server I can't push to, so my changes reach it as packages.
  • Every page has to load fast on a phone and be easy for search engines and AI tools to read.

• What I wanted to improve

  • Make it easy to compare models and see exact specs.
  • Give every page one clean look, the Studio Setup pages included.
  • Build trust with certificates, clients and real factory photos.
  • Keep a clear way to book a demo on every page.

Version 1 menu

Home

Company

About usCareerNewsroomContact us

Products

Interactive flat panelone overview page55-inch page65-inch page75-inch page86-inch pageAll-in-one PCPTZ cameraDigital signageStudio setupSmart class studioHybrid studioPodcast studioYouTube studioConference studioGreen screen studio

Clients

Amazon.in buttonin the header on every page

• One product, five pages

  The flat panel has an overview page plus one page for each size. To compare 55 and 65 inches, a visitor opens two pages.

• A deep menu

  Products opens a list, and the flat panel and Studio Setup each open another list inside it. Reaching one studio takes three steps.

• Mixed page addresses

  Most pages have clean addresses like /about-us, but a few still end in .php, such as /signage.php and /studio-setup.php.

• Old menu code left behind

  Menu sections for schools, coaching and higher education are hidden in the page code instead of removed. Visitors never see them, but whoever edits the site next has to work around them.

• Any address answers “OK”

  Asking for a page that does not exist, such as /this-page-does-not-exist-xyz, returned a normal page with a success code instead of a 404. Search engines can index errors like that.

• No sitemap

  /sitemap.xml was a 404 and robots.txt had no sitemap line, so search engines had no list of the pages.

• No canonical addresses

  None of the seven key pages named its own address, and two different addresses (/snl-all-in-one-pc and /all_in_one) returned the same page.

• Two pages with the home page's title

  /contact and /about-us showed the home page's title and description in search results.

• What people search for

  Search Console lists 1,222 search phrases for the live site over the 90 days to 30 September 2026. Most of the visibility comes from blog articles, not product pages: eight of the ten pages with the most impressions are blog posts. The product pages that do rank are the all-in-one PC, the flat panel, the home page, the PTZ camera and digital signage.

• Phrases the pages lacked

  Of the 96 phrases that were not brand searches and had 20 or more impressions, 89 appeared word for word on no rebuilt page, such as “all in one pc under 50000” and “camera for classroom recording”. Moving the redesign onto the live address without them would have risked rankings the old pages already earn, so each phrase now has an answer on the page it belongs to.

• No way to count inquiries

  Analytics records no key events on any channel in those 90 days, so nobody can yet tell which visits led to an inquiry.

• Spec sheets

  SNL's own sheets for the flat panel, the all-in-one PC, the camera and the digital sign became the source of truth. Every product answer is written from a sheet. If a sheet says nothing, the answer says so instead of guessing.

• Content check

  I compared the copied text with SNL's sheets. Some claims didn't match, such as the number of touch points and the Android version. I corrected the questions and answers from the sheet and marked the rest of that page's text for the owner.

• Borrowed content

  Version 2 started from the design and pages of a sister brand. Some of its figures, testimonials and company history belong to that brand, not to SNL. I marked them for the owner to confirm instead of presenting them as SNL's.

• One fact, three answers

  The warranty period was written three different ways across the pages. I didn't pick one myself. I flagged it for the owner to decide.

Key findings

What changed

How a visitor moves through it

Studio Setup page · Desktop

Studio Setup page · Mobile

Studio detail page · Desktop

Home and product pages

Home page wireframe

Coming soon

Product page wireframe

Coming soon

Home page

Coming soon

Product page

Coming soon

Structure decisions

• One main action

  The header and the top section both say “Book a Site Survey”, as a filled button, with an outlined “See setup types” for the second choice.

• Six cards, one page each

  The six studio types sit in a three-by-two grid. Each card has a photo, a name, one line and a “Learn more” link to its own page. On a phone the cards become a swipe row.

• A detail page in the buyer's order

  A studio page runs from what it is, to the benefits and key features, to what is included, where it is used, how installation works and the technical specs, then past work, why SNL, questions and one closing call to action.

• What the build changed

  The built studio pages reorder a little and leave out the specs table, the featured-installations gallery and the “why SNL” block. An equipment list takes the place of “what is included”, and a row of the other five studios closes the page.

Colors

• Mint to blue

  Every filled button, the active tab and badges.

• Mint

  #00f3b5

  Text and lines on dark sections.

• Teal

  #0aa8c7

  The middle of the gradient, and rings and glows where a gradient can't go.

• Royal blue

  #1354db

  Links, text and borders on light sections (6.3 to 1 against white).

• Ink

  #0a0f1e

  Headings and strong text.

• Night

  #060a12

  The dark top section and dark bands.

• Cool grey

  #f8fafc

  Alternate bands and form fields on light pages.

• Amazon orange

  #ffa41c

  Only the Buy on Amazon button, in Amazon's own colors, at the owner's request.

Design principles

• Colors by role, not by value

  A stylesheet never writes a color for a surface, a text step or a border. It reads a named role, so the whole site can change look in one block of code.

• One look everywhere

  Every page uses the same header, footer and top section, so a visitor never wonders if they left the site.

• Facts before slogans

  No product claim goes on a page without a spec sheet behind it.

• Easy to tap

  Buttons and tabs are at least 44 px on touch screens, and text boxes use 16 px text so phones don't zoom in.

• Motion with manners

  Things only fade and slide, in three set speeds (0.15, 0.3 and 0.6 seconds), and all of it switches off for visitors who choose reduced motion.

• Light pages, dark bands

  Pages read on white. Dark bands, such as the top section and the support block, add weight, and each one is listed in a single place so it takes the right colors.

Home page

Product pages

Studio Setup

Company

Components

• Floating menu bar

  A rounded dark bar that shrinks slightly as you scroll, with Buy on Amazon in Amazon's own colors at its end. On a phone it becomes a drawer.

• Top section

  A big headline with gradient words and one main button, dark with a slow dot-and-line background on most pages and white on Studio Setup, OPS and the company pages.

• Model picker

  Tabs with a gradient active pill. Each model shows its own text, badges and photos, with a zoom on hover.

• Spec list

  Groups of exact specs that open and close. A blank cell on the sheet shows a dash with the note “Not listed on the specification sheet”.

• Question list

  Searchable, with category tabs and a count on each.

• Studio cards and process

  A photo card for each studio type, an accessories grid, and an installation process that stays pinned while you move through its steps.

• Help bar

  “Ready to Experience the Future of Technology?” with a Book a demo button, above every footer.

• Tools

  Plain PHP, hand-written CSS and vanilla JavaScript. There is no framework and no build step, because the company's own code is PHP.

• Start from the sister brand, and flag what can't be checked

  The pages started from the sister brand's design system and page structure, rebranded for SNL. Anything that could not be checked for SNL, such as figures, history, testimonials and legal text, is flagged in the page notes instead of being published silently.

• Two destinations, one rule

  Version 2 deploys from git to a preview site. The company's own server changes only through a package its developer applies, so before writing anything for that server I ask for his current files. Version 2 is now the live site at snlsolution.com.

• 27

  Pages

• 1,479

  Questions answered

• 106

  Icons, stored on the site

• 1

  Server functions on Vercel

• Shared parts

  Every page is one PHP file that pulls in the same header and footer, plus one top-section function that takes a title, text and buttons. A page's own styles load only on that page.

• Content and data

  There is no CMS or database. Each page keeps its questions in one list in the code, and that one list draws both the visible answers and the data search engines read, so the two can't disagree.

• Where things live

  The pages sit in the project root. Shared PHP and the structured data for each page live in one folder, and the styles, scripts, images, videos, fonts and vendored libraries in another. Pages and files taken out of use go to an archive folder that is never deployed.

• Built for phones first

  One set of screen widths, 360, 480, 768, 1024 and 1280 px, designed from the phone up. The menu turns into a drawer on small screens, and full-height sections use the visible screen height so phone address bars don't cut them off.

• A small motion layer

  Fade-and-slide reveals, hover lifts and menu transitions. It moves only opacity and position, watches one marker instead of listening to scrolling, and switches off for reduced motion. The dot-and-line top background loads only on wider screens, once the browser is idle.

• Pick a model, see exact specs

  Flat panel sizes, all-in-one processors, camera models and sign sizes each have a picker. A blank cell on a spec sheet shows a dash instead of an invented value.

• Searchable questions

  Every page with questions has at least 60, such as 72 on the all-in-one PC page and 68 on the PTZ camera page, with category tabs and a search box. Where a sheet says nothing, the answer says so.

• Studio Setup

  A hub and six studio pages (smart class, hybrid, podcast, YouTube, conference and green screen), each with its own equipment list, installation steps and questions.

• A slot-in PC for the flat panel

  The SNL OPS page explains the optional Windows module that slides into a flat panel, with a ports table that fits a phone.

• A menu that stays on screen

  Flyout menus flip sides so they never leave the screen. On a phone, Escape closes the drawer and puts focus back on the menu button.

• Trust badges

  Three short looping videos (GeM, Make in India and CMMI Level 5) that load only when the footer is near.

• Pay online

  A footer pop-up with a payment link and a QR code.

• Certificates and downloads

  A certificates page and a downloads page with filter tabs. Photo galleries open in a lightbox that loads only when needed.

• Blogs and newsroom from the company's feeds

  The Blogs and Newsroom pages load from the company's blog and news feeds, cached for an hour, with a saved copy as backup. Visitors see the company's own posts and stories with a category filter, even if a feed is slow.

• Contact by WhatsApp

  The Get in Touch form opens a ready-written WhatsApp message.

• One store link, one helper

  Product pages link out to SNL's store on Amazon.in through one shared setting and one helper, so changing the store address is a one-line edit.

• Maps are the only outside requests

  The Google Maps embeds are the only outside requests left on the site, and they load only when someone taps.

• Prove it, don't eyeball it

  I drive the site in a headless browser from a script. For a visual change I compare measured styles and positions with a frozen copy of the previous commit. For behavior I use real key presses and check what is under the pointer. Screenshots are for looking at, and numbers are for checking.

• Page weight first

  Lighthouse scores and timings moved a lot between identical runs on a busy machine, so I trusted page size, request count and outside connections, which do not wobble. A move of less than about 5 points or 300 ms I treated as noise.

What the checks found

• Problem

  My first speed test found the smart board page was 7.2 MB, mostly one video, and every page loaded fonts and icons from other websites.

  Solution

  I shrank videos and photos for phones, hosted fonts and icons on the site, and made maps load only when tapped.

  Result

  The smart board page went from 7,151 KB to 672 KB, and the home page from 2,290 KB to 480 KB.

• Problem

  I split a large script to help phones load faster, but that could change how the animation looks.

  Solution

  I built a test that replays the animation frame by frame and compares it with the old one.

  Result

  57 of 66 checks matched exactly. The other 9 were changes I meant to make.

• Problem

  The copied stylesheet carried rules that no page used.

  Solution

  I removed 1,392 unused style rules, then checked that nothing changed on screen.

  Result

  A lighter stylesheet with no visible change.

• Problem

  On phones, the “Why choose” cards were squeezed into two columns about 85 px wide, and a comparison table ran off the screen with its last column out of sight.

  Solution

  A one-column rule for phones existed, but a later four-column rule overrode it. I fixed the order of the rules and fitted the tables to the phone width.

  Result

  Both now fit a phone with nothing to scroll sideways.

• 27

  Pages checked

• 18

  Open to search engines

• 9

  Held back on purpose

• 1,479

  Questions answered on 24 pages

• Every page says what it is

  Each page has its own title of about 50 to 60 characters, a description of about 140 to 160, a share preview and one main heading. None of the 27 pages shares a title with another.

• One set of data per page

  A single helper builds what every page tells search engines: the company, the website, the page itself (typed as About, Contact or a collection where it fits), a breadcrumb trail and the question list. I added no product or review markup, because there is no first-party price or review data to back it and Search Console would flag it as errors.

• Questions that match what people type

  Every page that has questions has at least 60: 72 on the all-in-one PC page, 68 each on the PTZ camera and digital signage pages and 67 on the flat panel page. Google retired the special search result for question lists on 7 May 2026, so the markup earns no extra feature. The value is the words on the page, which now include the phrases that were missing.

• Open to AI tools

  robots.txt names the main AI search crawlers, such as ChatGPT, Claude and Perplexity, and welcomes them. The sitemap and robots.txt are built from one page list, so they never hard-code a domain, and a plain llms.txt file says in words what the company sells.

• A check that catches drift

  A small script crawls the running site and compares every page's title, description, canonical address, robots rule, main heading, data types and question count with a saved snapshot. It flags a change that would hurt search, so a copy edit can't quietly break a page.

• Held back on purpose

  The seven Studio Setup pages stay out of search until the owner replaces five placeholder testimonials with real quotes, and the Development Center page is held back by the owner's decision. The Experience Center is a coming-soon page.

The keyword map

• Interactive flat panel

  smart board, interactive flat panel, IFP price, best interactive panel in India

• All-in-one PC

  all in one pc for schools, all in one pc under 50000, computer lab

• PTZ camera

  camera for classroom recording, PTZ camera India

• Digital signage

  school digital signage, digital notice board

• SNL OPS

  OPS module, slot-in PC

• Studio Setup and six studios

  studio setup, podcast studio, YouTube studio, green screen studio (held back from search for now)

What the audit found

• Found

  Any address, even one that does not exist, answered “OK” with a normal page.

  Fix

  Version 2 sends a real 404 for an address that does not exist, such as a studio that isn't there.

  Result

  Done in the build. The live server still needs the same rule.

• Found

  No sitemap, and robots.txt had no sitemap line.

  Fix

  Both files are built from one page list, with the production addresses.

  Result

  Ready. The company's developer deploys them and submits the sitemap in Search Console.

• Found

  No canonical addresses, and two addresses served the same all-in-one page.

  Fix

  Every page names one canonical address, the one it would have on snlsolution.com. The all-in-one page uses /all_in_one, the address Search Console already shows ranking.

  Result

  In every page of my build. snlsolution.com now serves Version 2, and I have not re-checked each address there.

• Found

  Contact and About showed the home page's title.

  Fix

  Each page has its own title and description.

  Result

  All 27 pages have a title no other page shares.

What every page carries

• Hosting

  The review copy runs on Vercel through one PHP function that routes every page. Files get a new address on every update, so nobody sees an old version. The company's own server is separate, so my changes reach it as packages its developer applies.

• Caching

  The edge keeps a page for 5 minutes and may show an older copy for up to a day while it fetches a fresh one. Stylesheets and scripts are cached for a year, because each deploy gives their links the deploy's commit number. Images and videos are cached for 30 days, so a replaced image gets a new file name.

• Security headers, and no source leaks

  Every response carries four security headers. Only the gateway function runs PHP, so any other PHP file that reached the host would be shown as plain text. To prevent that, every page has a route, an address ending in .php/ answers 404, the include and data folders answer 404, and notes, archives and design mockups are kept out of the upload.

From address to page

• Problem

  One day every page broke after a deploy. The error looked like a bug in someone else's tool, and I spent a day on that.

  Solution

  Comparing my setup with a similar site that still worked showed the real cause: a large video folder I had forgotten to leave out of the build.

  Result

  One line fixed it.

• Problem

  I was asked to keep only front-end code, so I turned every page into plain HTML.

  Solution

  I explained the trade-offs. It became clear the real goal was speed, not removing PHP, so I undid it the same day and got the speed another way.

  Result

  The site stayed on the company's PHP setup and still got faster.

• Problem

  The pages I copied from the sister brand had claims that didn't match SNL's own spec sheet.

  Solution

  I wrote the product answers from SNL's sheets, said so where a sheet is silent, and marked the rest for the owner.

  Result

  Product pages now carry only claims that trace to a sheet. Open items are listed for the owner.

• Problem

  Over time the project folder collected files no page used, including old videos and photos.

  Solution

  I checked every file twice, once by scanning the code and once by crawling the running site, then moved the unused ones to an archive folder that is never deployed.

  Result

  94 images (92 MB) and 23 videos (283 MB) left the deployed folder, and nothing on screen changed.

• Smart board page size

  672 KB

  Was 7,151 KB

• Home page size

  480 KB

  Was 2,290 KB

• Lowest phone speed score

  94

  Was 82

• Longest wait before a page responds

  104 ms

  Was 502 ms

What changed for visitors

• Design

  • Buyers ask “which one is right for me?” first, so the picker comes before the long text.
  • Saying “the sheet doesn't list this” earns more trust than a confident guess.
  • Reusing a sister brand's design saved weeks, but it brought its weight and its claims too. Check both before you reuse.
  • Name colors by the job they do. Moving the whole site from dark pages to light ones, and from orange to a gradient, took one block of code.

• Building

  • Compare before you blame. A similar site that still worked showed my own mistake faster than a day of doubting the tool.
  • Prove a change, don't just look. A frame-by-frame test settled what my eyes could not.
  • Know who controls the live site, say which version something is on, and ask for the current files before writing anything for it.
  • Check unused files twice, by code and by running the site, before moving them.

• Working with others

  • Ask what the goal is. The request to remove PHP was really a request for speed.
  • Flag what you can't confirm. The owner decides on figures, testimonials and the warranty term.

• What I'd improve

  • Replace the five placeholder testimonials on Studio Setup with real quotes, so those pages can be shown to search engines.
  • Check the studio pages' equipment claims against the spec sheets before they go public.
  • Fix the trade-off where the main content showed 0.2–0.4 seconds later on some pages, and measure every page again.
  • Connect the demo form to the company's inbox. It needs server code that I can't reach from here.
  • Set up an Analytics key event for the demo and contact buttons, so visits can be tied to inquiries.
  • Replace the sister brand's figures and testimonials with SNL's own, once the owner confirms them.

• What I designed

  • SNL's version of the sister brand's design: wordmark, the mint-to-blue gradient and light pages with dark bands.
  • The shared top section and the small motion layer.
  • How the four product pages and the Studio Setup pages are organized.

• What I built

  • All 27 pages, from the shared header and footer to the model pickers and the studio pages.
  • 1,479 questions and answers on 24 pages, the product ones written from the spec sheets.
  • The search data on every page, the sitemap and robots files, and the check that catches drift.
  • The speed work, the frame-by-frame test and the Vercel hosting.

• Provided by others

  • The design system and page structure, from the sister brand Study'n'Learn.
  • The mint-to-blue gradient, from a reference image the owner supplied.
  • The spec sheets, product photos and company text, from SNL.
  • The live site's server and domain, run by the company's own developer.