Case study · Website
Square One Media
A company that combines technology, video production and artificial intelligence, presented on a single page: its product suite, its services and its results.
- Client
- Square One Media
- Scope
- Web design
Front-end development - Format
- Bilingual one-page site
Spanish · English - Site
- sqone.media ↗
“Your vision, our technology.” A home page with full-screen video and a direct message.
The suite: each product with its own interface, recreated and in motion.
Iconik, digital avatars and AI indexing, each explained with an example you can watch in action.
OnAir Sports, plus the platforms the company integrates into a single workflow.
Four audiovisual services, from live production to consulting.
Results, ISO certifications and, to close, an invitation to talk to the team.
The challenge
Explain complex technology on a single page, and make it clear the first time.
Square One Media works across technical production and streaming, generative AI, cloud video management and its own software for events and sports broadcasting. The site had to fit a product suite (its own products and its technology partners’), four services, its results and its certifications onto a single page, in Spanish and English. And it had to have the visual polish you’d expect from a media company.
Show
Every product appears in action: dashboards, search tools and publishing flows, recreated and animated rather than described in the abstract.
Organize
A linear flow—suite, services, AI, standards, contact—with an anchor menu to jump to any section.
Convert
Every product ends with “Request a demo,” and the page closes with an invitation to talk to the team or an AI specialist.
The home page
Your vision, our technology.
The page opens with full-screen video, the company’s message and two paths: explore the suite or go straight to the services. Just below come the clients who already trust them. Between the suite and the services sit the leading platforms they integrate into a single workflow.
The suite
Six products, each with its own interface.
-
01
EventHub Sites
Corporate event websites deployed in the client’s own cloud. A recreated management dashboard tells the story: speakers, attendees, languages, analytics and the day’s schedule.
-
02
EventHub Distribution
The Iconik add-on that publishes content to the web and social media, shown through its own publishing window.
-
03
Iconik
The cloud media asset management (MAM) platform they partner with, shown through its search results and an asset detail page with AI tags.
-
04
Digital avatars
AI-generated video spokespeople, with their own look and voice. No explanation needed: the avatar speaks for itself, right on screen.
-
05
AI indexing
A natural-language search types itself out, scans the video library and pinpoints the exact moment you were looking for.
-
06
OnAir Sports
Automated graphics, stats and highlights for football broadcasts, with its widgets shown over match footage.
In detail
Product interfaces, shown as the real thing.
The suite’s dashboards aren’t pasted-in screenshots. They’re interfaces rebuilt on the page itself, with their own data, lists and states, and they animate as you scroll to them. The AI search types out its query, the event dashboard fills in its numbers and the publishing window completes itself step by step.
Services and results
From what they do to what they achieve.
After the suite, the page shifts tone: four audiovisual services in a restrained grid, a dark results section whose counters tick up as it scrolls into view, the ISO certifications, and a closing video section that invites visitors to get in touch.
The full page
Top to bottom, as you scroll
Under the hood
Lots of motion, little weight.
A page full of video and animation still has to be fast and easy to read.
Interfaces built in code
The product dashboards are real interfaces, with actual text and data rather than images, so they stay sharp at any size.
AV1 video
Every video is served in lightweight AV1, with an H.264 fallback for browsers that don’t support it.
Scroll-driven animation
Headlines, sections and figures animate in as you reach them, and the interfaces start up once they’re on screen.
Bilingual
The whole page in Spanish and English, with a language switcher in the header.