MARK.

Prototype d’application & Landing Page

Main tenant un smartphone affichant une application en français sur la gestion de l'impact numérique avec options pour réduire l'impact, gérer les mails et activer des notifications push.
Le projet Mark est une application d’éco-responsabilité conçue pour sensibiliser et informer. Réalisé en équipe de 4 dans le cadre de mon projet de fin d’études, avec une approche créative centrée sur l’éco-conception.

L'objectif est de sensibiliser les utilisateurs à l’impact environnemental du numérique de manière ludique et engageante.

La version mobile n'est pas encore disponible.

CLIENT

LISAA

ROLE

UI Designer

EMPLACEMENT

LISAA Design Graphique (Paris 5e)

BRIEF

Concevoir un prototype d’application mobile répondant à un besoin spécifique et réaliser sa landing page promotionnelle. Le projet inclut la création d’un parcours utilisateur fluide, un design soigné et une communication efficace. L’objectif est de développer une solution fonctionnelle tout en appliquant les meilleures pratiques UX/UI.

Challenge

Le principal défi était de transformer un sujet technique et parfois moralisateur en une expérience interactive et gamifiée, tout en respectant les principes de l’éco-conception pour réduire l’impact énergétique de l’application elle-même.

Logo Mark

Solution

Nous avons conçu une application qui fonctionne comme un jeu, où l’utilisateur peut mesurer son empreinte numérique, relever des défis afin d'adopter des comportements plus durables. L’expérience utilisateur repose sur plusieurs choses : un design interactif inspiré des mécaniques de jeux vidéo (points, récompenses, progression), des conseils personnalisés basés sur les habitudes numériques de l’utilisateur et une interface optimisée pour limiter la consommation énergétique de l’application elle-même.

Interface d'une application écologique appelée Mark affichée sur une tablette et un smartphone, montrant un tableau de bord de gestion d'empreinte carbone numérique.

Design Système

L’interface a été pensée pour être minimaliste et optimisée, avec :

•  Une palette de couleurs adaptée
•  Un mode sombre pour réduire la consommation énergétique
•  Des animations légères (svg, Lottie)
•  Un design épuré pour limiter l’impact sur les performances des appareils
•  Des images compressées (ASCII)

Système de design montrant une grille de 12 colonnes, palette de couleurs, styles de boutons primaires avec états par défaut, survol, focus, désactivé, boutons radio, champs de recherche en mode clair et sombre, transferts de fichiers avec états de téléchargement, entrées texte avec et sans icônes, et divers styles de puces attributs.

Implanter l'ADN

L’application se concentre sur 3 objectifs fondamentaux :
Éducation : sensibiliser sans culpabiliser
Ludification : rendre l’expérience engageante avec des défis et des récompenses.
Action : donner des solutions concrètes et applicables immédiatement.

Tableau de bord de l’impact numérique montrant l’option de choisir un pack de limite, l’économie de Co2 en gigawatts pour ampoules et frigidaire, et des sections pour gérer ses mails et activités.Page d'inscription de l'application Mark présentant trois avantages écologiques à gauche et un formulaire d'inscription à droite avec champs pour nom, date de naissance, email, mot de passe, choix compte entreprise, et bouton continuer.
Page d'accueil de Mark, application en français pour illustrer l'empreinte carbone numérique avec statistiques, graphiques et incitation à rejoindre la communauté.
Interface de gestion des limites avec résumé sur limitation des envois mails, WhatsApp et iMessages, règles de restriction et économie possible de kilomètres en RER.Tableau de limites écologiques avec options comme désactiver l'autoplay vidéos, convertir applications en mode sombre, limiter messages, illustrant économie de CO2 en km ou mails.

Résultat

L’application a été bien accueillie par les utilisateurs test, qui ont apprécié son approche pédagogique et son côté interactif. En combinant UX/UI soigné et engagement environnemental, nous avons démontré qu’un sujet aussi sérieux que l’empreinte numérique peut être traité avec une approche ludique et impactante.

Ordinateur portable blanc affichant une application illustrant l'empreinte carbone numérique avec le texte « Petits Clics, Grosses conséquences. »

Autres Projets

Site web & Image de marque

Got questions? 
We’ve got answers

What services does Awake Agency offer?
How long does a typical project take?
How is pricing structured at Awake Agency?
Do you offer ongoing support after project completion?
How often will I receive updates on my project?
How do I get started with Awake Agency?