Mobiotics
Frontend engineering for Mobiotics' enterprise marketing website — 22 pages, 9 OTT product lines, React 18 + MUI v5. JSON content layer for client self-service. Live at mobiotics.com. Design by Zerozilla in-house designer; engineering solely by Tabrez.
My Role
Sole Frontend Developer
Duration
2–3 months
Year
2023
Tools
React 18 · MUI v5 · JavaScript · EmailJS · Tawk.to · Lottie · Formik
Project Brief
Build the complete Mobiotics enterprise marketing website in React 18 — pixel-perfect implementation from Figma dev copy — 22 pages covering 9 OTT product lines, multi-persona B2B messaging, enterprise lead generation, and JSON-driven content management for client self-service post-handoff.
Frontend engineering for Mobiotics' enterprise marketing website — 22 pages, 9 OTT product lines, React 18 + MUI v5. JSON content layer for client self-service. Live at mobiotics.com. Design by Zerozilla in-house designer; engineering solely by Tabrez.
The Problem
9 OTT products. Multiple B2B buyer personas. Static website. A media tech company selling enterprise infrastructure to broadcasters in 30+ countries deserved an enterprise website.
Mobiotics serves broadcasters, pay-TV operators, telecoms, and media companies with OTT infrastructure. Each of 9 product lines (vLive, vLite MOOC, Sounds, vApps, vDRM, vCMS, etc.) needed distinct landing pages with persona-specific messaging — and the team needed to update content post-launch without engineering support.
9 products, undifferentiated website
vLive, vLite, vApps, vDRM — each targets different enterprise buyer personas but the existing site treated them as a feature list.
No self-service content layer
Post-handoff content updates required re-engaging engineering — unsustainable for a company shipping product announcements regularly.
Multi-persona messaging not structured
Broadcasters and telecoms buy OTT infrastructure differently — the site needed architecture for persona-targeted messaging.
UX Audit
What was broken before we redesigned
A heuristic evaluation of the existing system identified these critical issues before any design decisions were made.
Product pages were feature dumps
Existing product pages listed capabilities without addressing buyer persona pain points.
Messaging GapContent not self-serviceable
Every copy update required engineering involvement — not scalable for a company with active product marketing.
Maintenance GapEngineering solution: JSON content layer + modular React architecture
Built a JSON-driven content architecture where all product descriptions, feature lists, client logos, and page copy are stored in structured JSON files — allowing the Mobiotics team to update content post-handoff without engineering. Implemented 22 pages in React 18 + MUI v5 with EmailJS lead forms, Tawk.to live chat, Lottie animations, and a mid-project mega menu redesign delivered within timeline.
Process & Approach
How I approached the challenge
Figma-to-React Engineering
Pixel-perfect React 18 implementation from Figma dev copy provided by Zerozilla in-house designer. Engineering translation, not design.
JSON Content Architecture
Designed and implemented JSON content layer — all product names, descriptions, feature lists, client logos, and CTA text in structured JSON files for client self-service post-handoff.
Third-Party Integrations
EmailJS (lead gen forms with Formik + Yup validation), Tawk.to (live chat widget), Lottie (hero animations), react-multi-carousel (client logo carousel), Google Analytics.
Mid-Project Scope Change
4-panel mega menu redesigned mid-project at 80% completion — absorbed and delivered within original timeline.
Design Principles
Engineering decisions that enable the design
No design ownership — but the JSON content layer was an engineering UX decision that made the whole product maintainable.
JSON as content management
Storing all page copy in structured JSON files wasn't a technical requirement — it was a product decision that made the Mobiotics team self-sufficient after handoff. Engineering as product thinking.
Pixel-perfect as a professional standard
Implementing a Figma file created by another designer to exact spec requires discipline. Every spacing value, colour token, and interaction state was matched precisely.
Scope change without scope extension
The mega menu redesign at 80% completion was absorbed without timeline extension — a project management and technical decision made simultaneously.
The JSON content layer was the most valuable thing I shipped on this project — not the code, the architecture decision.
Why This Was Hard
Complexity signals
What set this project apart from standard product design work — the technical, systemic, and domain-specific challenges that demanded real depth.
JSON content layer for client self-service
All product descriptions, feature lists, and page copy stored in structured JSON — enabling client self-service content updates post-handoff with zero engineering involvement.
9 OTT product lines, multi-persona IA
vLive, vLite MOOC, Sounds, vApps, vDRM, vCMS + 3 more — each with distinct landing pages, persona-targeted messaging, and product-specific feature architecture.
Mid-project scope change absorbed
4-panel mega menu redesigned at 80% completion without extending the original timeline — simultaneous technical and project management decision.
Third-party integration stack
EmailJS + Formik + Yup (lead forms), Tawk.to (live chat), Lottie (hero animations), react-multi-carousel — all integrated and configured from scratch.
22 pages. 9 OTT product lines. JSON content layer. React 18. Live at mobiotics.com. Engineering-only engagement.
UI Screens
22 pages
Enterprise OTT marketing website — React 18, JSON content layer, live at mobiotics.com.
Feature Highlights
Engineering capabilities
JSON Content Architecture
All product copy, feature lists, and client logos in structured JSON — client self-service content management post-handoff with zero engineering involvement.
Engineering UX9 OTT Product Landing Pages
vLive, vLite MOOC, Sounds, vApps, vDRM, vCMS + 3 more — each with persona-targeted messaging and feature-specific layouts.
Product ArchitectureLottie Hero Animations
High-fidelity Lottie animations on product hero sections — lightweight, scalable, and brand-consistent across all 9 product pages.
Motion DesignLead Gen Forms
EmailJS integration with Formik + Yup validation — enterprise contact forms across all product pages with field-level validation and success states.
ConversionDesign System
Tokens, typography & components
A shared token-based system built to ensure consistency across every screen and state.
Color Tokens
Type Scale
Components
User Flow
Enterprise prospect journey
Homepage
9 product overview
Product Page
vLive / vDRM / etc
About
Company + team
Contact
Lead gen form
Live Chat
Tawk.to
Tech Stack
Frontend engineering stack
Frontend Engineering
React 18
MUI v5
JavaScript
CSS3Third-Party Integrations
My Contribution
Engineering-only engagement
01
Sole Frontend Developer
React 18 + MUI v5 implementation of 22 pages from Figma dev copy. JSON content layer architecture, EmailJS lead forms, Tawk.to live chat, Lottie animations, mega menu. Live at mobiotics.com.
Impact & Performance
Engineering scope
22
Pages built
9
OTT product lines
Live
mobiotics.com
JSON
Content model
Timeline
2–3 months: Figma to live domain
Setup + Core Pages
React 18 scaffold, MUI v5 theme, JSON architecture, homepage, product pages (9 lines), About.
Integrations + Scope Change
EmailJS forms, Tawk.to, Lottie animations. Mid-project mega menu redesign absorbed and delivered. QA + launch.
Outcomes
The impact we shipped
Measured results from usability testing, stakeholder reviews, and post-launch adoption tracking.
22
Pages built
9
OTT product lines
Live
Status
JSON
Content model
"Delivered Mobiotics enterprise marketing website — 22 pages, React 18, JSON content layer enabling client self-service — live at mobiotics.com."
Learnings & Reflection
What I'd do differently
01
Propose the JSON architecture, don't wait for it to be asked
No one asked for a JSON content layer — it was an engineering decision made proactively. The best engineering contributions come from product thinking, not just task execution.
Interested in working together?
Let's talk about your project or open role.
Live Prototype