Product Design · SaaS · Web App

SnapOps — Operational Intelligence Platform

Designing the landing page and product interface for a next-gen SaaS platform that centralizes time tracking, task management, AI-powered stock control, team communication, and real-time analytics — built for field teams in restaurants, retail, and hospitality.

View Live Site
Role
UI/UX Designer
Timeline
2026
Platform
Web App (SaaS)
Deliverables
Landing Page, UI Design, Product Interface
01 Home Page

The landing page hero

A bold, dark-mode hero with the orange brand accent, immediately answering "what is this product" through clear positioning, a sector marquee, and a before/after value prop below the fold.

snapops.ma/landing SnapOps Contactez-nous Se connecter L'intelligence opérationnelle nouvelle génération. Pointage, tâches, stocks, communication, analytics, tout centralisé, tout automatisé. Conçu pour les équipes terrain. Essayer 14 jours gratuits Demander une démo SnapOps Tableau de bord Live CA DU JOUR 14,850 MAD +12% En service 8/10 Tâches 89% Retards 2 TOP EMPLOYÉS DU JOUR YK Youssef K. Serveur 98% SM Sarah M. Manager 95% AN Amina N. Serveuse 87% 3 3 sites connectés Comparatif multi-sites actif Restaurants Boulangeries Bars & Lounges Hôtels Fast-food & QSR Automobile Retail & Commerces Pharmacies Salons Cafés

snapops.ma/landing — Hero section, desktop view

02 Overview

One app to run all field operations

SnapOps is an operational intelligence platform for businesses with field teams — restaurants, retail chains, hotels, and multi-site operations. It replaces paper checklists, scattered WhatsApp groups, and manual stock counting with a single, structured, mobile-first application.

The product needed a landing page that communicates the breadth of features clearly, a product interface that feels fast and intuitive for non-technical field workers, and a visual language that balances professionalism with approachability across multiple industry verticals.

03 Diagnosis

From operational chaos to structured control

✕ Challenges

  • Complex product with 6+ modules — risk of overwhelming users on first visit
  • Target audience spans multiple industries with different needs and terminology
  • Landing page must convey AI capabilities without feeling overly technical
  • Product interface used by non-technical field workers who need zero friction
  • Multi-tiered pricing structure that needs to feel simple and transparent

✓ Design Direction

  • Progressive disclosure — reveal complexity gradually through scrolling sections
  • Industry marquee and sector cards to let visitors self-identify immediately
  • Before/After comparison to make the value proposition visceral and concrete
  • Interactive UI mockups embedded in the landing page to demo the product in context
  • Dark SaaS aesthetic with clean data visualization for the analytics-driven positioning
04 Mobile Screens

Mobile-first product interface

Three flagship modules from the SnapOps app — designed for field workers who need to act fast, with one thumb, in noisy environments. Pointage, Tâches & HACCP, and the team Feed.

9:41 Pointage Restaurant Maarif En service 08:02:47 Restaurant Maarif Vérifié Pause Fin de shift ÉQUIPE EN SERVICE YK Youssef K. Serveur · 08:00 AN Amina N. Serveuse · 08:08 KL Karim L. Cuisinier · 07:55 ⏱ 📋 📦 💬 📊

01 — Pointage géolocalisé

9:41 Tâches Aujourd'hui 18 / 25 complétées 72% Toutes (25) En retard (2) À faire (5) Ouverture cuisine 06:00 · Fait ✓ Contrôle températures 07:00 · Fait Mise en place salle 08:30 · En retard ! Inventaire bar 10:00 · À faire ⏱ 📋 📦 💬 📊

02 — Tâches & HACCP

9:41 Feed Équipe Maarif Publier 3 3 nouveaux messages non lus SM Sarah M. Épinglé Manager · Il y a 12 min Rappel équipe : nouvelle procédure d'ouverture en vigueur dès demain. Consultez le document en pièce jointe. ♡ 5 💬 3 KL Karim L. Cuisinier · Il y a 45 min Menu du jour mis à jour : tajine poulet-olives + salade marocaine S SnapOps Système Alerte automatique · Il y a 1h Alerte stock : Saumon frais en dessous du seuil critique (1/3 restant) Lu par 6 personnes YK AN KL ⏱ 📋 📦 💬 📊

03 — Feed d'équipe

05 Process

Designing for complexity, delivering simplicity

01

Product Audit

Mapped all 6 modules (pointage, tasks, stocks, feed, analytics, AI assistant) and defined the feature hierarchy for the landing page narrative.

02

Information Architecture

Structured the landing page as a conversion funnel: hero → problem → solution → features → sectors → pricing → CTA. Each section answers one objection.

03

UI Design

High-fidelity designs in Figma. Dark theme with embedded product mockups, interactive pricing cards, and sector-specific imagery. Mobile-first responsive.

04

Handoff & Iteration

Delivered annotated specs for Next.js implementation. Iterated on the AI assistant section and pricing tier presentation based on stakeholder feedback.

06 Tarifs

Pricing, simple and transparent

Four tiers with progressive feature unlocks. Each card uses the same structural rhythm so visitors can compare top-to-bottom in seconds — and the "Pro" tier carries a subtle glow as the recommended plan.

TARIFS Simple, transparent, sans surprise Mensuel Annuel −20% Starter Équipe unique, premiers pas 10 utilisateurs 600 DHS/mois Facturé 7 200 DHS/an Pointage géolocalisé Tâches & checklists Feed équipe HACCP compliance Crédits IA · 10/user Voir le détail RECOMMANDÉ Pro Intelligence opérationnelle 50 utilisateurs 4 950 DHS/mois Facturé 59 400 DHS/an Tout Starter + Scan IA stocks Analytics & exports Multi-établissements · 3 sites Crédits IA · 15/user Voir le détail Business Chaîne & multi-sites 100 utilisateurs 9 900 DHS/mois Facturé 118 800 DHS/an Tout Pro + Multi-établissements illimité Comparatif inter-sites Stockage 2 GB/user Support dédié 4h Voir le détail Enterprise Groupes & grandes structures > 1 000 utilisateurs Sur devis Tarif adapté à votre volume Tout Business + Users & sites illimités Intégrations POS & compta SSO / SAML · SLA 99.9% Account manager dédié Nous contacter

snapops.ma/landing — Tarifs section, 4-tier structure

07 Impact

A SaaS landing page that converts

−40%
Temps de saisie
−60%
Écarts de stock
100%
Conformité HACCP
5 min
Inventaire flash
08 Toolkit

What I used

Figma Prototyping Design System Landing Page Design SaaS UI Responsive Design
Next Project

VGK Village Karting

View case study →