Suite du billet Deezer V3 : 1ère partie, Brainstorming, Deezer V3 : 2ème partie, Zoning & Ergonomie.

Afin de faire participer toute la Deezer Team sur ce nouveau défi. Nous avons décidé d’organiser des ateliers o๠chacun pourrait partager, critiquer, imaginer ou innover sur cette V3. Mais avant d’aborder le thème de ces ateliers. Nous ne pouvions pas solliciter plus de 35 personnes sans avoir matière à  montrer.

Bien souvent les personnes ont besoin d’un support pour pouvoir rebondir et argumenter leurs idées. C’est pour cela que nous avons démarré le webdesign du site afin d’amorcer les ateliers.

1er test de webdesign

En ce qui concerne le webdesign il y a eu 9 évolutions. Nous savions déjà  approximativement ce que nous souhaitions donc les déclinaisons des différentes pistes ont été une suite logique de notre vision : un site épuré, minimaliste, sobre, lisible, structuré, proche d’une utilisation applicative. Le choix de se séparer de la couleur du « noir » a été un questionnement tout le long des recherches graphiques. Ci-dessous vous avez la piste 04 et la piste 08 de la Deezer V3.

Webdesign : version 4

Webdesign : version 8

Planification des Ateliers

Chaque personne a sa propre « expérience web », professionnelle, des contraintes liées à  son domaine d’expertise et bien sûr sa propre vision du produit. Nous avons demandé à  chaque personne sur quelles rubriques elles souhaitaient réfléchir en essayant d’harmoniser au mieux chaque groupe avec les compétences de chacun :

• 1 personne dans le domaine commercial
• 1 personne dans le domaine marketing
• 1 personne dans le domaine du webdesign
• 1 personne dans le domaine développement Front (Flash)
• 1 personne dans le domaine développement Back (PHP)
• 1 personne dans le domaine communication
• 1 personne dans le domaine éditorial
• 1 personne dans le domaine webdesign

Chacun était libre de changer de groupe lors de ces après-midi. Chaque session était clà´turée par une présentation oral des idées qui en avaient découlées. Ces ateliers nous ont permis de consolider notre vision de cette V3 et d’envisager des fonctionnalités futures.

Billets déjà  parus et à  venir :

1. 1/ Brainstorming (Janvier 2009)
2. 2/ Zoning + Maquettes conceptuelles (Janvier – Février 2009)
3. 3/ Webdesign + Ateliers avec la Deezer Team (Février 2009)
4. 4/ Modifications suite aux ateliers + Développement / Intégration web (Mars – Avril)
5. 5 / Lancement de la bêta privée + retours utilisateurs (Juin 2009)
6. 6/ Migration de la v2 à  la v3 jusqu’à  la fin juillet 2009

Suite du billet Deezer V3 : 1ère partie, Brainstorming.
Avant d’aborder la partie zoning et maquette conceptuelle de cette V3, un petit rappel sur Deezer :

• 237 000 artistes
• 25 webradios thématiques
• 4.5 Millions de titres
• 29 Millions de playlists
• 11 Millions de Deezernautes

Ce petit rappel permet de comprendre l’importance des usages qu’ont les utilisateurs sur une telle plateforme. Le risque de modifier leurs habitudes est à  prendre en considération lors de la conception.

Pour nous aider à  recueillir et définir nos besoins, nous nous sommes posés de nombreuses questions… du type :

• Pourquoi ? Quel est notre objectif ?
• Quoi ? Quelles sont nos actuelles et futures contraintes ?
• Qui ou pour qui ? Qui utilise notre produit actuel ? Qui en bénéficie ? Qui de la Deezer Team va être en charge de telles ou telles fonctionnalités ?
• Comment ? Comment l’équipe va réaliser le produit ? Quelles méthodologie et ressources nécessaires allons-nous mettre en place ? Quels choix technologiques allons nous choisir ?

Architecture et structure du site

Beaucoup de croquis et de schémas ont été gribouillés, dessinés et notés sur des cahiers, calepins ou feuilles pour finir sous Fireworks ou OmniGraffle.

Pour le squelette du site, nous avons utilisé OmniGraffle, logiciel de la suite OmniGroup utilisable seulement sous Mac. OmniGraffle est agréable d’utilisation et permet de faire ou de modifier rapidement des diagrammes et organigrammes. Lorsque nous avons revu l’architecture du site, nous avons essayé d’être le plus transversale possible entre les différentes fonctionnalités existantes et nouvelles.

Wireframe ou maquette conceptuelle

Pour concevoir les wireframes, nous avons utilisé Fireworks, logiciel assez méconnu des designers de la Suite Créative d’Adobe mais tellement pratique et facile d’usage surtout si le designer est habitué aux produits d’Adobe. Fireworks permet de générer des maquettes interactives simulant une navigation de page en page. Vous trouverez ci-dessous quelques maquettes de zoning et voir ainsi l’évolution avant de vous montrer les maquettes de webdesign dans un futur billet.

La suite au prochain épisode…

Prototypage de site avec Fireworks – émission Chips&Tips

Billets déjà  parus et à  venir :

1. 1/ Brainstorming (Janvier 2009)
2. 2/ Zoning + Maquettes conceptuelles (Janvier – Février 2009)
3. 3/ Webdesign + Ateliers avec la Deezer Team (Février 2009)
4. 4/ Modifications suite aux ateliers + Développement / Intégration web (Mars – Avril)
5. 5 / Lancement de la bêta privée + retours utilisateurs (Juin 2009)
6. 6/ Migration de la v2 à  la v3 jusqu’à  la fin juillet 2009

Après 3 mois de patience, voici enfin les billets relatant la V3 de Deezer 🙂
Au lieu de vous faire partager cette aventure en un seul billet, nous allons vous raconter cette histoire en plusieurs épisodes…

1. 1/ Brainstorming (Janvier 2009)
2. 2/ Zoning + Maquettes conceptuelles (Janvier – Février 2009)
3. 3/ Webdesign + Ateliers avec la Deezer Team (Février 2009)
4. 4/ Modification suite aux ateliers + Développement / Intégration web (Mars – Avril)
5. 5 / Lancement de la bêta privée + retours utilisateurs (Juin 2009)
6. 6/ Migration de la v2 à  la v3 jusqu’à  la fin juillet 2009

Cette liste est un fil conducteur, non exhaustif, il s’étoffera lors de l’écriture. L’élaboration de la v3 ne peut se réduire à  une dizaine de billets mais les grandes lignes y seront abordées. Par élaboration, je sous-entend la méthode de travail et la collaboration de toute la Deezer Team. Ce passage à  la V3 : c’était aussi non seulement un défi mais aussi une création collaborative et interactive pour toute l’équipe.

Attention ! Cette méthode a très bien fonctionné pour la Deezer Team mais elle ne correspondra pas forcément aux besoins pour un autre projet ou pour une autre entreprise.

Deezer v2 : points positifs & négatifs

5 janvier 2009. L’année vient tout juste de démarrer au sein de la Deezer Team avec une grande nouvelle : « Dès aujourd’hui, on commence la version 3 de Deezer !!! »

Dans un premier temps, nous avons passé en revue toutes les fonctionnalités de la V2 afin de noter ses avantages et inconvénients :

Points positifs : Un player omniprésent avec un double usage audio et vidéo. Un point d’entrée éditorial pour la mise en avant des artistes (la visionneuse). Un design graphique sombre et apaisant, fonctionnalité première efficace « écouter facilement de la musique sans interruption lors de la navigation sur le site »,…

Points négatifs : Une structure sur 3 colonnes qui restreint l’utilisation du site. Une publicité omniprésente et mal intégrée. Une interface surchargée d’informations. Un manque important de mise en avant d’artistes en dehors de la page d’accueil. Trop de fonctionnalités portant à  confusion…

Lors de cette réunion, nous avons écrit sur une feuille A4 notre cÅ“ur de métier et la devise de Deezer. Le fait d’avoir ce A4 omniprésent sous nos yeux nous a permis de nous concentrer sur l’essentiel. Il ne faut jamais oublier l’usage premier du service : Musique gratuite, illimitée et légale.

Une interface doit être au service du contenu et se doit d’évoluer dans le sens de l’utilisation des usagers. Cette notion évolue bien entendu dans le temps, car les besoins et les exigences des internautes évoluent. Il faut alléger les actions, avoir une interface simple et rapide d’usage et construire un modèle d’interaction qui ne déroutera pas nos utilisateurs.

Analyse de l’existant.

L’analyse de l’existant consiste à  regarder à  la fois nos concurrents mais aussi les sites communautaires, les sites que nous utilisons au quotidien et ceux avec lesquels nous avons une affinité (joli design, utilisation simple…). Nous avons donc listé chaque atout. Vous trouverez la liste ci-dessous :

…

La suite au prochain épisode…

Billets déjà  parus et à  venir :

1. 1/ Brainstorming (Janvier 2009)
2. 2/ Zoning + Maquettes conceptuelles (Janvier – Février 2009)
3. 3/ Webdesign + Ateliers avec la Deezer Team (Février 2009)
4. 4/ Modifications suite aux ateliers + Développement / Intégration web (Mars – Avril)
5. 5 / Lancement de la bêta privée + retours utilisateurs (Juin 2009)
6. 6/ Migration de la v2 à  la v3 jusqu’à  la fin juillet 2009