Book Développement Web et Mobile - Tony Dam

A R T

B R U S H©

Application mobile & Landing page PROJET DE FIN D’ANNÉE - DÉVELOPPEMENT MOBILE

FIREBASE

SWIFT

2020 - TONY DAM

Introduction Art Brush© est une application mobile communautaire de partage qui a pour vocation de rassembler les passionnés de peintures et de modélisme.

Sommaire 4 5 6 7 8 9 10 11 12 13 14 15 16 17 19 20 21 22

….. ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. …..

Choix du sujet Contexte Benchmark Benchmark - MiniPaints Benchmark - PaintRack Benchmark - Impact Benchmark - Citadel Colour Benchmark - Constat Objectif de l’application Cibles Cibles - David Lee Cibles - Juliette Prairie Parcours utilisateur (David Lee) Parcours utilisateur (Juliette Prairie) Design Thinking Design System - Couleurs Design System - Typographie Design System - Iconographie

23 24 25 27 28 29 32 33 34 35 36 37 38 39

….. ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. …..

Design System - Interface d’interaction Arborescence Fonctionnalités Safe Area Wireframe Maquette Prototype Adobe XD Business Model Business Model - Games Workshop Business Model - Pricing Business Plan - Diffusion Business Plan - Landing Page Association caritative Features à venir

Choix du sujet Passionné par l’univers du modélisme et de la peinture de f igurine miniature depuis mon enfance, j’aime échangé avec les autres passionnés, admiré leurs réalisations ou suivre des tutoriels.

Ainsi, mon projet de f in d’année propose une application mobile permettant à la communauté de se réunir, de se rassembler, de partager ses réalisations et d’obtenir des récompenses.

CONTEXTE

L’univers Collectionner, peindre et jouer avec les f igurines de modélisme dans des univers futuristes postapocalyptiques ou fantaisistes.

La passion de la peinture, du modélisme et le partage On retrouve une énorme communauté de passionnés sur les réseaux sociaux et divers forums

Problématique Regrouper cette communauté sur une seule et même application, leur permettant de : - Montrer leurs réalisations - Trouver des conseils, des tutoriels de peinture ou d’en proposer - Soutenir des artistes - Réunir, en facilitant leur regroupement

BENCHMARK

PRINCIPAUX CONCURRENTS

1

MiniPaints

2

PaintRack

3

impcat

4

Citadel Colour

BENCHMARK >

MINIPAINTS -

+ Fonctionnalité de Scan des codesbarres des pots de peintures Design minimaliste épuré et facile d’accès

Pas de coach screen, il faut « apprendre » à utiliser l’application seul

Possibilité d’acheter directement la liste de peinture recommandé pour un schéma de couleur

Une application orientée peinture.

Pas de tutoriel ni d’aspect communautaire

Bonne gestion du blanc

Seulement 3 boutons. Un pour les donations, un pour les f iltres (marques de peintures), et le

Peu de clic, 3 boutons pour le menu

1

MiniPaints

Popup à chaque connexion pour les donations et publicités

BENCHMARK >

PAINTRACK -

+ Fonctionnalité de Scan des codesbarres des pots de peintures Liste des pots de peinture complète Possibilité de créer et d’enregistrer sa liste de peinture

Popup à chaque connexion pour les donations et publicités Pas de coach screen, il faut « apprendre » à utiliser l’application seul Une application orientée peinture.

Pas de tutoriel ni d’aspect communautaire Design ergonomique peu intuitif

2

PaintRack

Obligation de payer pour avoir accès à 90% des fonctionnalités de l’application (wishlist, pipette couleur, fonctionnalité de Scan des codes-barres) Navigation diff icile

BENCHMARK >

IMPCAT -

+ Possibilité de créer et d’enregistrer sa liste de peinture Design ergonomique et graphique intuitif et agréable Navigation simple et facile Tutoriel de peinture complet réalisé par des experts, accompagnement pas à pas

3

impcat

Mise à jour régulière, équipe de développement réactive et très compétente Projet soutenu par de nombreux sponsors et kick-starters réussi.

Application payante uniquement Tutoriel de peinture proposer uniquement par les sponsors Pas d’aspect communautaire ni d’échange

BENCHMARK >

CITADEL COLOUR

-

+ Application off iciel de Games-Workshop lui donnant une énorme visibilité auprès de sa clientèle Tutoriels de peinture complets réalisés par des experts, accompagnement pas à pas

Tutoriels de peinture proposés uniquement par la société Aucune interaction communautaire Aucune section pour montrer ses réalisations, demander de l’aide ou des conseils Pas de système pour faciliter la réunion des joueurs

4

Citadel Colour

Navigation compliqué. Pas de menu pour navigué rapidement entre les catégorie

BENCHMARK > CONSTAT

La communauté n’est pas mise en avant Ces concurrents se concentrent principalement sur l’aspect peinture du hobby, l’interactivité avec la communauté est quasiment nul.

Hors, elle est très active sur les réseaux sociaux et il y a un fort potentiel avec des nouveaux arrivants découvrant ce hobby quotidiennement, ces cibles « curieux » arrivent après avoir découvert l’univers Warhammer à travers certains jeux vidéos.

Les dimensions de partage et communautaire sont mes priorités de développement.

Objectif de l’application Partager Rendre possible le partage de ses réalisations sur une seule et même plateforme, regroupant la communauté, la communication entre artiste, fans, curieux et professionnels.

Récompenser & Soutenir L’aspect communautaire se renforce avec la possibilité de récompensé / soutenir ses artistes préférés en leurs faisant des donations et/ou achetant un tutoriel.

Réunir La passion se partage et permet des rencontres.

L’application a pour vocation de rapprocher les joueurs à travers l’organisation de rendez-vous, de créer/rejoindre des groupes pour jouer ou discuter peinture.

Partenaires Les professionnels sont aussi de passionnés.

Bénéf iciant de la visibilité de l’application et de son audience, ils peuvent récompenser leurs réalisations favorites en leurs off rants des boîtes de f igurines, des réductions, des cours de peinture etc.

Cibles COEUR DE CIBLE

Les inconditionnels, les passionnés par le modélisme et la peinture, les joueurs et les collectionneurs CIBLE PRINCIPALE

Les curieux, ceux qui découvre l’univers grâce aux licences de jeux vidéo, les entreprises de modélisme CIBLE SECONDAIRE

Sponsors, magasins de modélisme, peintures et/ou de f igurines, blogueurs et influenceurs

PERSONA >

DAVID LEE Description

David est un inconditionnel des jeux de société et plus particulièrement des wargames. Il aime collectionner, peindre mais surtout partager ces réalisations avec la communauté afin de pouvoir s’améliorer dans son domaine.

Passionné par les wargames depuis son enfance, ce hobby reste en lui.

Besoins | Objectifs

- Voir les réalisations de la communauté - Apprendre et découvrir les méthodes de peintures de certains artistes

David Lee Fonction

- Partager ses réalisations avec la communauté - Soutenir les artistes qu’il apprécie.

Développeur Full-Stack Localisation

Saint-Maur-des-Fossés, France Age

25 ans

Équipements

iPhone X Macbook Pro

Challenges | Frustrations

- Ne trouve pas d’application réunissant, à la fois, les réalisations de la communauté, des conseils de peinture et la rencontre entre joueurs - Ne trouve pas de compétition accessible pour son niveau de peinture « amateur »

Attentes

Une application « Tout en un » réunissant les fonctionnalités suivantes : - Partage de ses réalisations et découverte de ceux de la communauté - Apprendre de nouvelles techniques de peinture à travers des tutoriels créer par des particuliers - Retrouver tous ces postes au même endroit sur une seule et même page - Possibilité de trouver des joueurs proches de lui géographiquement - Possibilité de rejoindre ou créer un « groupe » de joueurs/peintres - Possibilité de soutenir ses artistes préférés à travers des dons ou autre

PERSONA >

JULIETTE PRAIRIE Description

À la tête d’une agence digitale de communication, Juliette travaille pour des entreprises spécialisées dans le secteur du modélisme et de la peinture. Elle sait que pour convaincre et réussir ses campagnes marketing, il lui faut trouver de belles réalisations mettant en avant le travail des artistes peintre mais aussi celui des modélistes.

Besoins | Objectifs

Juliette Prairie

Localisation

Paris, France Age

29 ans

- Difficile de trouver une application réunissant les réalisations de la communauté et des conseils de peinture

Attentes

- Voir et découvrir toutes les réalisations

Elle attend de l’application :

- Connaître le procédé de peinture et/ou de modélisme de l’auteur

- Une navigation simple lui permettant de consulter les dernières réalisations

- Pouvoir communiquer avec l’artiste pour lui faire des propositions de partenariat

Fonction

Directrice d’agence de communication

Challenges | Frustrations

Équipements

iPhone XS Macbook 12’

- Pouvoir communiquer avec les auteurs - Possibilité de négocier des partenariats

DAVID LEE >

PARCOURS UTILISATEUR

S’enregistrer

Splash Screen

Login

Coach Screen

SINGLE

FOLLOW

SOUTENIR

FEED

Coach screen (1er lancement) Feed Choix d’une publication Follow Soutenir (Abonnement / One shot) Voir tutoriel

VOIR TUTO

JULIETTE PRAIRIE >

PARCOURS UTILISATEUR

FEED

Feed Choix d’une publication Contacter l’auteur Proposition de partenariat

PARTENARIAT

SINGLE

FOLLOW

Chat

SPÉCIFICATIONS TECHNIQUES

DESIGN SYSTEM WIREFRAME MAQUETTE PROTOTYPE FONCTIONNALITÉS

DESIGN THINKING

Objectif Cette phase permet d’avoir un retour de l’utilisateur et d’aff iner le « bon point de vue ». Elle permet en outre de : - Gagner en empathie par identif ication avec l’utilisateur - Explorer des options - Réaliser des tests

Conclusion La majeure partie sont favorables à la création d’ArtBrush. Cependant, l’autre partie « reste à convaincre » car ils veulent éviter une application de type trop « compétitive » entre les personnes pouvant entraîner une mauvaise ambiance ou la démotivation des débutants.

DESIGN SYSTEM

COULEURS

PRIMAIRE Couleur représentant la créativité, l’encouragement, la stimulation, l’attraction.

L’orange est ainsi, la couleur la mieux adaptée à l’art

SYSTÈME Conçu pour communiquer clairement l’action, le statut et la direction dans l’interface

#FF9966 #F74E65

#FF3839

#36DA8B

TEXTE & BACKGROUND En mode Light : Le niveau de blanc constitue l’arrière plan de l’application et permet ainsi une visibilité plus nette et transparente.

Les textes seront en gris nuit pour une meilleure lisibilité et faciliter la lecture lors de la navigation.

En mode Dark : Le fond sera en bleu marine pour une visibilité adoucit

#424757 #151A29

#222222

#4E596F

Light mode

#F8F8F8

Dark mode

DESIGN SYSTEM

TYPOGRAPHIE

Police

San Francisco (SF)

Conçue pour correspondre à la clarté visuelle des interfaces utilisateur de la plateforme IOS, les polices système sont lisibles et neutres. Recommandé par l’HIG (Human Interface Guidelines by Apple for iOS)

ABCDEFGHIJKLMNOPQ RSTUVWXYZ12345678 9 0 ) - ^$ Ù = : ; , Ë “ ‘ { « ¡ } € Ô Ù Μ ≠ ÷ … ∞

TITRE

18px - SF Compact Display - Bold

Sous-titre 16px - SF Compact Text - Medium 14px - SF Compact Text - Regular Texte abcdefghijklmnopq rstuvwxyz12345678 9 0 ) - ^$ ù = : ; , ë “ ‘ { « ¡ } € ô Ù µ ≠ ÷ … ∞

DESIGN SYSTEM

ICONOGRAPHIE

DESIGN SYSTEM

INTERFACE D’INTERACTION NAVIGATION

BOUTONS

La navigation bar en haut facilitera la circulation intrasection, et la bar de menu sera toujours présente au pied de page en zone « chaude », proche des doigts af in de renforcer une navigation intuitive, simple et eff icace car le menu est accessible partout, à tout moment.

Les boutons « systèmes » seront principalement utilisés car les utilisateurs d’IOS y sont familiarisés.

GESTURES - SWIFT La possibilité de « SWIPE », « ROTATE » et « PINCH » seront disponibles

Design recommandé par HIG (Human Interface Guideline by Apple) SWIPE

PINCH

ROTATE

ARBORESCENCE BOTTOM BAR NAVIGATION (fixed)

Home

Voir les dernières publications des comptes où l’on est abonné

Découvrir

Voir les dernières publications recommandés

Ajouter une photo

Prendre ou télécharger une photo et là publié, choisir de faire ou non un tutoriel payant/public

Activité

Voir les dernières notif ications

Mon prof il

Voir son compte utilisateur

Soutenir ou voir tutoriel

Au clic sur une publication, nous emmène sur la page de l’auteur de la publication, les boutons « soutenir » et « Voir tutoriel » apparaissent.

Social

Le bouton Discussion est dans la top bar à droite.

Tutoriel public ou payant

Si public, le tutoriel est accessible à tout le monde, si payant il peut f ixer un prix (max 10€)

Paramètres du compte

Au clic sur le bouton prof il, le bouton paramètre du compte apparaît dans la top bar

ART BRUSH

FONCTIONNALITÉS 1/2

COACH SCREEN Lors de la 1ère connexion, il y a un coach screen pour aider l’utilisateur à naviguer sur l’application et pour renforcer sa f idélité envers l’application

CAMÉRA Possibilité de prendre des photos et de les partager

CRÉER UN COMPTE L’utilisateur devra s’enregistrer en créant un compte ou en reliant un compte existant (Facebook, Google) pour se connecter.

FEED Fil d’actualité classé par catégorie.

Catégorie « Découverte » où on proposera des publications aléatoires de toutes les catégories de photos ou catégorie « Pour moi », montrant seulement les nouvelles publications des personnes suivis

ART BRUSH

FONCTIONNALITÉS 2/2

GEOLOCALISATION Af in de trouver des joueurs / artistes proche de soi et d’organiser des RDV / Rencontres

FRIENDLIST Possibilité de follow / unfollow des personnes

AGENDA RDV Les utilisateurs auront l’occasion de proposer / accepter / refuser des événements / RDV organisés via un google agenda af in de favoriser le regroupement de joueurs.

LIKE / SOUTENIR Parce que l’aspect communautaire est un dominante pour l’application, la possibilité de « liké » les photos pour soutenir les publications que l’on aime ou de souvenir à travers des donations envers les artistes

ABONNEMENT / DONATION Non obligatoire, les utilisateurs auront la possibilité de prendre un abonnement annuel à 9,99€ pour soutenir le développement de l’application et leur conférant un statut « VIP » leur off rant l’accès à tout les tutoriels de catégorie « payant » créer par les artistes. S’ils ne veulent pas prendre l’abonnement VIP, ils peuvent accéder à tout les tutos « payant » en participant sous forme de donation à hauteur du montant f ixé par l’artiste (max 10€)

SAFE AREA 9 41

􀆉 Parent Title

􀅼

Title

16 px

􀋃 Label

􀋃 Label

􀋃 Label

􀋃 Label

􀋃 Label

20 px

44 px

WIREFRAME

Splash Screen

Login

Coach Screen

FEED

SINGLE

FOLLOW

SOUTENIR

VOIR TUTO

FOLLOW

PARTENARIAT

Chat

MAQUETTE 1/3

Splash Screen

Validation Screen

S’enregistrer

Coach Screen

MAQUETTE 2/3

Feed

Tutoriel

ProďŹ l

Donations - Soutenir

MAQUETTE 3/3

Chat

Découvrir

Activités

Caméra

PROTOTYPE

Lien 1 https://cutt.ly/SiCpxwu

Lien 2 https://xd.adobe.com/view/a69816f4-6df3-4a48-b9d2-d52253998ef5-f3cb/?fullscreen

BUSINESS MODEL

GAMES-WORKSHOP BUSINESS MODEL - PRICING BUSINESS PLAN - DIFFUSION BUSINESS PL AN - L ANDING PAGE ASSOCIATION CARITATIVE FEATURES À VENIR

Games-Workshop Games Workshop, c’est quoi ?

C’est une boîte créée en 1975 par Steve Jackson et Ian Livingston. Games Workshop a été lancé pour vendre des f igurines dans les univers de Warhammer depuis 45 ans Société côté en bourse L’entreprise est le détaillant FTSE250 le plus performant de la dernière décennie, et dans l’ensemble, le deuxième meilleur. L’action valait 1,175€ f in 2009 et aujourd’hui 83€ Source : The Guardian ( https://www.theguardian.com/business/2020/jan/01/f rom-jd-sports-to-gamesworkshop-best-market-performers-of-decade ) Games Workshop - Chiff re d’affaire ( Source : societe.com )

BUSINESS MODEL

PRICING

Abonnement - 9,99€ / Trimestre Abonnement à un compte premium (9,99€ / Trimestre) permettant à l’utilisateur d’accéder à tous les tutoriels déf inis comme payant par les auteurs et garanti la gratuité pour tous les futurs

Donations Un utilisateur qui ne souhaite pas prendre de compte premium peut, s’il le souhaite, soutenir son ou ses artistes préférés par le moyen de donation.

Convient pour le prof il d’un utilisateur qui aime consulté les nouveautés, un connaisseur en peinture, qui n’a donc pas besoin de tutoriel mais qui a un coup de coeur pour un schéma de couleur particulier.

Créations de tutoriels Toujours dans l’esprit communautaire, de partage et de soutien, les auteurs des réalisations pourront choisir de créer un tutoriel retraçant pas à pas chaque étapes de peinture et de rendre ce tutoriel accessible en public ou « payant ». L’application prendra 5%. Il pourra déf inir le prix de son tutoriel avec un prix maximal f ixé à 9,99€.

Partenariats Si un artiste est sponsorisé par un partenaire, il peut lui fournir un code promotion que celui-ci pourra indiquer à ses followers af in d’avoir des réductions chez ce sponsor.

20% sera déduit pour l’application.

Publicité (selon audience)

BUSINESS PLAN

DIFFUSION

Facebook

Instagram

Modèle : OCPA ( Coût par action optimisé ) 2€/jour.

Annonces photos.

Explication : Permet une très bonne diffusion à un moindre coût car ce système d’enchère rencontre peu de concurrent sur le marché actuellement.

Budget investissement : 30€ / mois

Pourquoi Facebook ? Car une grosse communauté est présente sur différents groupes ou pages. ( Environ 300k )

Objectif : Permet de développer la notoriété, la diffusion, le traf ic, les installations d’application, l’engagement, la créations de leads et les conversions Pourquoi Instagram ? En Juin 2020, il y a plus de 2 millions de publications avec le hashtag Warhammer. Ce sont mes cibles potentielles.

BUSINESS PLAN

LANDING PAGE Réalisé en HTML - CSS - JS Hébergé chez OVH artbrush.tonydam.f r

Association caritative - Enfant d’Asie

Af in de partager et de rendre accessible la passion de le peinture, du modélisme et de l’art, pour chaque abonnement premium, 1€ sera reversé à l’association caritative Enfant d’Asie destinée à aider les enfants défavorisés en subvenant à leurs besoins de base et en assurant leur scolarisation et formation jusqu’à leur insertion professionnelle. https://enfantsdasie.com/

Features à venir

Géolocalisation Fonctionnalité en développement après sa release, off rant aux utilisateurs la possibilité de trouver des joueurs / peintres / passionnés / magasins proche d’eux

Création liste d’armée Une nouvelle section permettant aux joueurs de créer, d’enregistrer et de partager leur liste d’armée.

Scan code barre pot de peinture Une section permettant aux utilisateurs d’utiliser leur caméra pour scanner le code barre de leur pot de peinture, leur permettant de faire l’inventaire, d’en recommander directement avec un bouton « Commander » en partenariat avec les entreprises.

FIN Retrouvez la suite sur artbrush.tonydam.f r