Case Study

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.

Notre Façon de Procédé

  • IDEE

    Ergonomie

    par Victoria, Quentin, Pauline et Jérémy

    Répondre à une problématique à l’aide d’une application mobile , idée d’application, Personas, storytelling, 5 W

  • Icon Enfants Suivis

    AI

    Ergonomie

    par Victoria, Quentin, Pauline et Jérémy

    Architecture d’informations à l'aide de post-its.

  • Icon Profil

    Wireframe

    Ergonomie

    par Victoria, Quentin, Pauline et Jérémy

    Wireframes papier avec tous les écrans afin d'avoir la structure de l'application.

  • Icon Profil

    Tests Utilisateurs

    Ergonomie

    par Victoria, Quentin, Pauline et Jérémy

    Remise en question, Nouveau wireframes

  • Icon Notifications

    Logo, Typographie

    Visual Design

    par Quentin et Jérémy

    Conception de la typographie pour le logo

  • Icon Notifications

    Pictogrammes

    Visual Design

    par Quentin et Jérémy

    Conception d'un set de pictogrammes à intégrer dans l'application

  • Icon Notifications

    Graphisme des écrans

    Visual Design

    par Pauline, Quentin, et Jérémy

    Tout en gardant la base des wireframes, les écrans sont designés

  • Icon Notifications

    Vidéo After Effect

    Visual Design

    par Quentin

    Animations d'illustrations pour présenter l'application

  • Icon Notifications

    Intégration de l'app

    Intégration

    par Victoria

    Code de chaque écran et animations

  • Icon Notifications

    Intégration de la Landing Page

    Visual Design

    Intégration

    par Pauline

    Design et code de la page de présentation de l'application

  • Icon Notifications

    Intégration du Case Study

    Visual Design

    Intégration

    par Pauline

    Le contenu des textes ainsi que le visuel et le code

  • Icon Notifications

    Bibliothèque d'Animations

    Intégration

    par Victoria, Quentin, Pauline et Jérémy

    Contenu des textes + visual + code

Photo d'ambiance

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

Dessin : comment trouver une idée d'appli deuxième Dessin : comment trouver une idée d'appli

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 d'ambiance

Les 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.

Photo d'ambiance

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

Photo d'ambiance

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 .

Photo d'ambiance

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.

Dessin wireframes

Le moment venu de faire des wireframes !

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.

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

Le premier essai n’est jamais le bon. Les tests utilisateurs que nous avons réalisés nous ont permis de nous remettre en question sur pas mal de choses. Tout d’abbord l’user on boarding qui était assez compliqué à comprendre et qui pouvait être bien plus simplifié. Nous avons retiré des fonctionnalités trop avancée pour le moment tel que la timeline, l’arbre généalogique,… Nous avons ajouter une page de “flux” pour les actualités de tous les bébés que l’on suit, de cette façon on ne doit pas changer mille fois de profil pour pouvoir accéder aux actualités de tous.

premiers wireframes

Une identité visuelle

premiers wireframes

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.

premiers wireframes
"Details are not details they make the design"

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.

"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.

premiers wireframes

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

premiers wireframes

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

premiers wireframes

Nos impressions