Elisa Saltini

Octy

Web app d’aide administrative

Design et interface • Développement web

Deux écrans de l'application Octy entourés de bulles corail

Présentation

Réalisé en groupe, Octy est un projet de web app d’aide administrative, en mobile first et destinée aux jeunes. Grâce à des parcours simples expliqués étape par étape, elle les aide à mieux comprendre leurs droits et à gagner en autonomie.

  • Illustrator
  • InDesign
  • Jira
  • Astro
  • Tailwind CSS
  • Figma
  • Photoshop

Un projet collectif réparti en 3 pôles : communication, création et développement.

Mon rôle : Création & UX/UI

MOODBOARDS 3 axes créatifs retenus et 1 anti-axe

Moodboard fonctionnel : formes géométriques, pictogrammes, couleurs primaires

Axe 1 - Fonctionnel

Simplification • ergonomie • accessibilité • formes géométriques

Moodboard ludique : personnages, gamification, couleurs chaleureuses

Axe 2 - Ludique

Personnalisation • gamification • personnage • univers chaleureux

Moodboard pédagogique : accompagnement, orientation, repères visuels

Axe 3 - Pédagogique

Accompagnement • orientation • création de repères

Anti-axe : codes administratifs institutionnels et univers gaming trop enfantin

Anti-axe - Institutionnel et infantilisant

Éviter les codes administratifs trop officiels et rigides, qui renforceraient la distance avec les jeunes. À l’inverse, un univers trop enfantin, chargé ou inspiré du gaming ferait perdre en clarté et en crédibilité au projet.

MASCOTTE Déclinée en 6 formes

  • Mascotte Octy neutreNeutre
  • Mascotte Octy heureuxHeureux
  • Mascotte Octy intelligentIntelligent
  • Mascotte Octy enervéEnervé
  • Mascotte Octy choquéChoqué
  • Mascotte Octy tristeTriste

Charte graphique Univers graphique d’Octy

Nuancier

  • FFCFA5Beige
  • EB6856Corail
  • E44D4CRouge
  • C22D2BRouge foncé

Typographies

OCTY - Comprendre pour agir

Source sans 3 - titres

Octy aide à comprendre les démarches administratives grâce à des parcours simples, expliqués étape par étape !

Inter - texte

Logotype

Logotype Octy
Logotype principal
Icône Octy
Icone de la marque

Guide de style

Guide de style d'Octy : couleurs, typographies, boutons et icônes

Résultat Final Maquette de l’interface

  • Écran de connexion d'Octy

    Connexion

    Accéder à son espace

  • Écran d'accueil d'Octy

    Accueil

    Retrouver ses parcours en cours

  • Écran carte d'Octy

    Carte

    Trouver un organisme à proximité

  • Écran d'un cours d'Octy

    Cours

    Comprendre une démarche simplement

  • Écran questionnaire d'Octy

    Questionnaire

    Tester ses connaissances

Landing page En direct

Ouvrir le site dans un nouvel onglet ↗

Mes autres projets

Une idée ? Écrivez-moi

Réseaux sociaux