Design web & mobile

Sokioute

L’histoire de la Création de “Sokioute”

Sokioute est une application mobile permettant de partager en toute sécurité et simplicité des anecdotes de la vie quotidienne de ses enfants avec ses proches

Le contexte

Sokioute est né lors d’un workshop de 3 semaines grâce à quatre étudiants de Design Web et Mobile de l’école Albert Jacquard à Namur (Belgique). Victoria Duprez, Pauline Loroy, Quentin Hantjens et Jérémy Germonprez.

Le commencement

Lors de ce workshop nous avons utilisé la “Design sprint Method”ce qui nous a donné un chemin à suivre pour la conception du projet. Grâce à cette méthode nous avons pu facilement construire l’application de manière ergonomique. Le vendredi les tests utilisateurs étaient déjà fait ce qui nous permettait d’enchaîner avec la partie graphique et code. Mais une chose à la fois, voici les premiers jours.

Trouver une idée

idee1

idee2

Dessin de Victoria Duprez

Tout d’abord il nous fallait trouver une problématique. Ce ne fut pas évident, nous avions quelques idées mais bien souvent elles n’étaient pas concrétisables ou tout simplement trop banales (nourriture, boissons,..caca). Nous avons donc décidés de viser un public cible qui ne nous correspondait pas forcément. Les parents! L’idée de notre application nous est donc venu tout naturellement.

Un carnet de naissance permettant aux parents de partager facilement la vie quotidienne de leurs enfants à leur cercle familial et amis proches.

Who, What, Where, When, Why

(Les 5 W) Cette étape consiste à se poser une série de questions. Grâce à celle-ci on peut expliquer plus concrètement en quoi consiste l’application

Cette application permet aux jeunes parents de partager les moments forts / Mignons / Quotidiens depuis leur grossesse jusqu’au développement de l’enfant à l’aide de photos/textes avec la famille et le cercle proche. Elle permet donc aussi de suivre le quotidien de l’enfant de ses proches/amis. On l’utilise au quotidien et n’importe où.

photo-personasLes Personas

Un persona est un personnage fictif qui va représenter nos différents public cible afin que l’on puisse réellement construire l’application pour eux. Les premières personnes visées sont les parents. Les personas secondaires sont la famille ou les amis proches et le persona tertiaire serait l’enfant qui consulterait son profil une fois assez grand, de cette façon il en apprendra plus sur son enfance.

Storytelling / Job Stories

Nous avons rédigés une série de texte en mettant en scène ces personas, les parents créant un profil pour leur fille, ajoutant leurs proche, la grand-mère montrant l’application à son coiffeur, etc. Cela nous as permis d’énumérer les quelques fonctionnalités principales

Needs want desire

Cette partie définit nos espoirs pour l’application. Dans un premier temps nous allons la réaliser sur base de fonctionnalités simple, ce qui nous semble le plus important. Mais nous avons aussi définit toutes des fonctionnalités permettant à l’application d’évoluer dans le futur .

  • Les besoins

    Faire un profil pour un ou plusieurs enfants, ajouter des photos , du texte, accéder a un flux d’actualité, recevoir des notifications pour accéder à l’application, visiter les profils d’autres enfants, aimer un post, ajouter des membres, en retirer.

  • Les envies

    Ajouter des vidéos, du sons, faire des sondages, Permettre aux grands-parents ou autres proches d’ajouter du contenu sur l’un de ses enfants, Une timeline pour revenir a des moments importants

  • Les désires

    Un résumé de l’année, la possibilité de laisser des commentaires, faire grandir le logo, un arbre généalogique

Architecture d’informations

 

Cette étape nous permet de construire un chemin dans l’application : où mène un tel écran, y-a-t-il plusieurs chemins possible pour se retrouver sur une page. Mais aussi quelles fonctionnalités se retrouveront sur quelles pages. Cela nous permet d’avoir une structure claire et de ne rien manquer.

wireframe

Dessin de Victoria Duprez

Le moment venu de faire des wireframes !

wireframe1

Nous nous sommes amusés à réaliser une série de wireframes que l’on a glissé dans un prototype papier d’écran de smartphone afin de pouvoir faire glisser les wireframes à l’intérieur pour nos tests utilisateurs. De cette façon nous avons pu avoir une idée assez vaste des différents écrans.

“A user interface is like a joke. if you have to explain, it it’s not that good…”

wireframe2

Une identité visuelle

photo-typo

La première semaine se clotura comme ceci. Nous avions tout en main pour bien commencer les visuels. Nos écrans étaient tous validés, les tests utilisateurs prometteurs. Il ne nous restait plus qu’à nous lancer! Notre partie en groupe prenait fin afin que nous nous répartissions le travail à exécuter. Les garçons sont parti sur une typo script fait main pour apporter plus de cachet à l’identité, cela donne un côté plus humain, elle est pensée pour être enfantine. Ils ont réalisés des planches de lettres afin de trouver une courbure harmonieuse.

« Details are not details they make the design »

seticons

Ils ont égalemment réalisés un set de pictogrammes pour parcourir l’application. Tout en restant sur la même ligne graphique par rapport au logo. Cela nous a permis par la suite de faire des animations d’icons.

ecrans

« drink some coffee put on some gangster rap and handle it »

Les filles se sont quant à elles renseignées sur la structure d’une webapp et son fonctionnement et ont réalisés une partie des designs des écrans sur photoshop afin d’optimiser un maximum son ergonomie.

photoshop

Dessin par Victoria Duprez

Sokioute devenait plus concret, le code pouvait commencer. Victoria se chargea du code de l’app tandis que Pauline codait la landing page et le case study. Les garçons ont alors réalisés une vidéo mais aussi des autocollants et une affiche afin de faire la promotion de l’application

affiche

naissance

Dessin par Victoria Duprez

Notre bébé était enfin prêt à naître en ce 11 mars 2016

La Landing Page     L’application

sokioute

Dessin par Victoria Duprez

Victoria « J’ai mieux apprécié ce workshop-ci que celui de l’an dernier. J’ai pu plus toucher au code, aux choses qui m’intéressent réellement, j’ai appris beaucoup. Et en plus le groupe était bon !

Pauline Loroy Ce projet m’a beaucoup plu et motivé dès l’instant où l’idée s’est mise en place. J’ai eu un tilt par rapport au code, une logique s’est installée et j’ai apprécié les moments de codes, d’autant plus lorsque l’on est à deux car cela permet de se-débeuguer l’une l’autre plus rapidement et ainsi de ne pas s’énerver pour un point virgule. Très bonne ambiance dans le groupe, celle application nous correspond à tous, on y a tous amené une touche personnelle

Quentin Haentjens On a pu amener des idées graphiques intéressantes, Dommage que les médias queries ont été vues aussi tard, je trouve que je n’ai pas assez codé. Concernant notre équipe, vu qu’on nous a laissé le choix de les former, on s’entendait très bien avec parfois quelques avis différents mais ça, c’est comme dans chaque groupe.

Jérémy Germonprez On a amener notre apport graphique; l’ambiance générale m’a beaucoup plu, on s’est bien entendu dans le groupe. J’ai bien aimé prendre des photos, j’ai égallement apprécié les étapes du design sprint afin d’arriver à la structure de l’application.

     Projet au hasard