The objectives of this new header were to:

• Give access to all the website sections (channels)
• Ensure the consistency of the original navigation bar (with time it has been used to promote content that had nothing to do there)
• Create new space to promote contest, new services, content and advertising partnership
• Give more property to the search

This has been done through:

• a new drop-down navigation
• a revamp of the information architecture
• a wider and fresher look for the search bar
• a cross-site navigation on top of the header

Here are some of the wireframes and mock-ups of the PRD:

• Recipients read messages but do not reply
• Users engage discussion but do not answer to the response they got
• Multi-users discussions tends to be messy and confusing

As product manager I defined a strategic revamp of the functionnality through:

• Boost conversation orientation: through chat-like interface
• Ease discussion creation: through workflow/user flow revamp. No need to add a user to your contacts to be connected. You just have to set your discussion settings accordingly
• Simplify the information architecture: no more multi-user threads
• Messages are no longer used to share videos, this messages are sent via e-mail (ease 3rd party services integration + simplify the page behavior)

Quelques captures d’écran de la spécification :

Here are a few cap of the specification:

L’un des raisons pour lesquels j’ai fait ce projet :
One of the reason why I did this:

Le processus d’usage de l’ancienne version :
User worflow of the previous version:

Le processus d’usage de cette nouvelle version :
User worflow of the new version:

• streaming of 21:9 videos (movie trailers)
• use of a player which reproduce the Ambilight visual effect
• cross-promotion with the 62nd Cannes Film Festival

Everything was done within a 1 week. Here are the wireframe and final integration:

• revue de l’architecture de l’information pour :
  • restructurer l’offre fonctionnelle (suppression de certaines “catégories” au profit d’autres)
  • simplifier les parcours utilisateurs
• refonte de l’interface utilisateur pour :
  • faciliter la compréhension
  • améliorer les interactions
  • mettre plus en avant publicité et offres commerciales
• refonte graphique pour :
  • uniformiser les différents espaces du site
  • hiérarchiser visuellement les informations

Wanarun is the most visited french website about running. Founded in 2006 it became popular due to its social approach (Google Maps mash-up to mark your run and share them, blog, shoe review and social article recommendation sections).

Over the years functionalities have been added to the website without any consistency. The goal of this project was to give an axis to the site development and create an understandable architecture through:

• information architecture revamp to:
  • restructure the functional offer (merge sections, delete categories)
  • simplify the user workflow
• revamp the user interface to have:
  
  • a better HCI
  • a better integration of advertising (banners, text links, product recommandations)
• graphical revamp to:
  • unify the different sections of the website
  • create visual hierarchy

Maquette de la page d’accueil :

Homepage wireframe:

Maquette graphique de la page d’accueil :

Final graphical mock up of the homepage:

Maquette de la page d’accueil de la section “Equipements” :

Wireframe of the “Shoes & accessories” sections:

Maquette d’une page fiche de chaussure  :

Wireframe of  a product page:

Maquette de la page d’accueil de saisie de parcours :

Wireframe of the page to fill in a run:

Maquette de l’espace paramètres d’un compte usager :

Wireframe of the user settings page:

The goal of this project was to offer to content partners (such as Universal Music Group) a space where they can browse information about their videos and account traffic.

Wireframe du tableau de bord :
Dashboard wireframe:

Rendu final :
Dashboard final mock-up:

Le but de ce player était d’introduire de nombreuses innovations tel que :

• la publicité (preroll, midroll, postroll)
• les vidéos relatives en fin de lecture /ou pendant la lecture
• les habillages de player
• la possibilité de changement de flux vidéo (Définition Standard, Haute Qualité, Haute définition, …)
• l’intégration d’un système de sous-titrage

J’ai eu pour rôle de fare une étude de la concurrence, apporter des solutions fonctionnelles et d’intéraction, réaliser les wireframes et définir les intéractions possible. J’ai ensuite mené le projet jusqu’à son terme en coordonnant les développements et veillant à respecter le budget investi.

Ci-dessous quelques wireframes du projet :

That’s one of the numeral projects that I worked on as Product Manager at Dailymotion. It was a strategic project for the company as its business is related to video plays.

The goals of this player was to introduce numeral innovations:

• video advertising (preroll, midroll, postroll)
• related videos panel at the end of video play/ or during the video play
  
• player branding
• possibility to switch between different video sources (Spark, H264 HD, On2 HQ, …)
• subtitiles integration

My role was to do market research, find functional solutions, define interactions and illustrate all this with wireframes. Then I lead the project with the developers and graphic designers team to roll out the project respecting the allowed budget.

Here are some of the wireframes of the project:

RunTheCity est un projet personnel que j’ai en tête depuis maintenant plusieurs années. J’ai fait le paper protoyping du site, un protoype de page d’accueil sous Photoshop. Mes compétences en développement Javascript n’étant pas très approfondis, le projet s’est arrêté là. Si le projet vous intéresse, n’hésitez pas à me contacter.

Mais c’est l’envie de développer un réseau social consacré à la course à pied qui m’a amené à travailler sur la refonte de Wanarun.

Runthecity is a local-oriented website that allow runners to log their runs on Google Maps. Once runs are logged the website calculate average speed and calorie consumption. It then recommends you running partners with a similar running level and living near by.

Runthecity is a personal project that I had in mind for years. I did paper prototyping of the whole site and mock-ups of the Paris and New York homepages with Photoshop. My skills in Javascript and PHP development where not sufficient enough so the project stopped there. If you are interesting, don’t hesitate to contact me.

The will to develop a social service around running led me to work on the Wanarun revamp.

C’est donc chose faites par le biais de ce *faux* site sur l’actualité de la nuit parisienne offrant également l’élection de miss “Hot & Spicy”.

J’ai réalisé le zoning, maquette graphique et intégration HTML/CSS.

University project which goal was to create a website with a simple and attractive navigation. Things done with this *fake* website that covers Paris’ nightclub news and a “Miss Hot & Spicy” competition.

I did zoning, Photoshop templates and HTML/CSS integration.

1. Mise en place d’un programme de talent amateur et professionnel (programmes Motionmaker et Official User)
2. Mise en place d’outils de fingerprinting audio (Audible Magic) et vidéo (INA)
3. Signature de partenariat avec des majors (Universal, …), représentants de la production audiovisuel et organisme de reversement de revenus (Sacem, …)

J’ai orchestré et spécifié le projet “Creative User” devenu par la suite Motionmaker qui est aujourd’hui un des axes stratégiques majeur du développement de Dailymotion. Quelques unes des wireframes de ce projet :

As many other video sharing services Dailymotion knewn copyright issues with its content catalog. To solve this problem many solutions have been employed to make Dailymotion ahead of its competitor in terms of respect of copyright:

1. Creation of an amateur production recognition program and profesional content recognition program (Motionmaker and Official User programs)
2. Set up of a audio (Audible Magic) and video (INA) fingerprinting technology
3. Agreement with majors (Universal, …) and authors’ societies (SACD, SCAM and ADAGP)

I managed and specified the 1rst project “Creative User” – later named Motionmaker – which is today one of the stategic axes of development of the company (used in content promotion, PR, premium offer, …). Here a few wireframes of the project:

L’idée de cette dernière version était de porter le site à l’ère du “web 2.0″ :

• la partie actualité du site a été transformé en blogs multi-auteurs (plus d’une demi-douzaine) propulsé par WordPress
• la partie encyclopédique a été motorisé par un wiki propulsé par MediaWiki

Ces évolutions avaient également pour but de :

• simplifier la navigation dans les différentes catégories du site
• faciliter et cadrer la communauté du site (remplacement du forum par les commentaires de l’actualité)
• monétiser plus facilement le trafic par la création de nouveaux espaces annonceurs (possibilité de mettre en avant des jeux concours, intégration d’une bannière dans la tétière

I created Spider-Man.fr in summer 2002. It became the 1st french speaking website about the wallcrawler. Numeral version of the website I’ve been pushed online. This is the last one.

The idea was to create a “web 2.0″ version:

• the news part has been transformed as a multi-author blog powered by WordPress
  
• the encyclopedic part has been transformed in a wiki powered with MediaWiki.

This transformation had for goals to:

• simplify the user flow between the website categories
• manage the community of the website and guide off-topics conversations (forums have been replaced by news comments)
• guarantee a better monetization of the traffic through the creation of new ad placeholders (header and skyscrapper) and the possibility to feature contests

Page d’accueil (version de novembre 2006) :
Homepage (November 2006 version):

Page d’accueil (version d’avril 2007) :
Homepage (April 2007 version):

Page d’un concours Spider-Man 3 en partenariat avec Activision :
Contest page for Spider-Man 3 Activision’s video game: