Édouard Wautier

The Steel HR, while still having the signature analogic look that made the brand, is the first Withings watch featuring continuous Heart Rate recording as well as smartwatch functions like notifications, thanks to its OLED integrated screen.

In that sense it is at the same time the heritage of the Pulse and the Activité line. The UI draws from both those heritage.

With the launch of new products, Health Mate covered a large number of health related metrics on topic as different as Blood Pressure and Activity.

Health Mate 3 was complete re-design of the app since its creation in 2013.
Main focus was on creating an architecture capable of presenting all those informations in a compelling way, helping people discovering useful features, creating consistency on multiple platforms and within the app itself.

The main principle is a pivot screen (the timeline view) that gives access to critical information and act as main navigation between "mini-apps". The mini-apps are independent entities focusing on one core area of health (weight, heart, sleep, activity, etc…). Each of them works like a small application using a bottom navigation bar.

The pattern fits both iOS and Android design patterns and can be adapted for the web. The update also comes with a revamped UI and a completely new graph system and data navigation.

The Withings Thermo App is the companion app of the Withings Thermo. It displays the family members the history of their temperature readings as well as medicine, symptoms, comments logging.

The Withings Thermo is a temporal thermometer. It is ultra accurate, very fast, and super easy to use. I've been involved in the project from the start managing the product design and designing the interactions of the object, leading the selection of the screen type, the shape and the button types.

The final object is pure, white shape with only one button is visible. The LED screen lights through the surface of the object when on, is totally invisible when off. Additional interactions are available through an invisible touch surface on the side of the screen.

The use of an LED screen led to challenges in the embedded UI and the design of the fonts that would be displaying informations. In order to make fast iterations, I created multiple flash prototypes that helped make the right choices for both the typographic details and the interactions.

This second version of the Home app is an iteration that builds on what we learned after a few months in production. It improves the experience on core elements like the timelapse and the video recording and adding support for multiple camera, a Babyphone Mode, a new control center as well as a schedule system.

New watch sized companion app for health Mate to celebrate the launch of the new Apple Watch!

It was the opportunity to discover a new OS, new interactions and whole new context of use. The architecture of the app focuses on the core elements of the experience and informations that can be glanced in very short time.

For the Apple Watch launch, the new Withings Home is getting a watch sized interface.
As for Health Mate, focus is on the core elements of the experience; a live video stream of your home, the latest events, the possibility to play music and sounds to your child from your wrist.

The Withings Home is a Wifi-Camera capable of detecting movement, noise and measuring Air Quality. It can be used as an advanced baby monitor, a way to keep an eye at home at all time, an automatic family diary, or a surveillance system.

It is possible to here and talk through the camera, play music and sounds to help baby sleep, play a light animation, take pictures, having a summarized view of the day in the shape of a timeline or an easily browsable timelapse.

My work on the product was from early ideas of functionalities to the full application UX and UI design.

Activité is a trendy analog display watch. It tracks steps, distance, running, caloric expenditure and sleep cycles. It wakes you up with a silent alarm. No charge, 8 month battery life using classic watch button cell.

The Withings Aura is composed of two elements, a sensor that analyse your sleep and tell if your are in deep, light, REM sleep or awake, and a smart sound and light system that can use that information to wake you up at the best time in your sleep cycle with a combination of lights and sounds designed to take you softly out of sleep in the best conditions or with your favorite playlist / radio. Aura also helps you get to sleep and relax with another set of ambient light and sound tracks.

Integrated into the Withings Health Mate app, Aura allows you to set multiple alarms and wake up programs, and to check the evolution of your quality of sleep with detailed graphics.

The new version of the Health Mate app was relying heavily on color coding and pictos. Colors needed to be consistent on every platform (iOS, Android, Web), easily changeable with the less possible amount of work from developers.

Given the small size of the team, pictographic elements had to be customizable in colors and sizes by developers with as little design work as possible.

I built the styler to meet those goals; It provides a centralized and unified way to access and use those basic elements. It automatically generates a range of colors from the main branded colors, provide exchange format for all platforms and makes it very easy to make deep changes in all instances of the service simultaneously.

Same goes for the pictographic elements, centralized in a glyph font integrated on all platforms.

Creation of a video showcasing Withings Health Mate future evolutions for CES 2014 as well as other events.

Health Stations are design for public places like sports/fitness clubs, work places or doctor's offices. It is place where people can check there blood pressure, weight and body fat in a small amount of time, and keep the informations in there Withings account.

Graphic design and part of the code for the new Withings Pulse website.

UX & UI design of the new Withings Pulse.

Designing the user journey through the device and the apps.

The new fonts and visuals for the embedded interface are designed for the specificity of the scale's screen; rectangle pixels (0.8 / 1 ratio), low framerate and strong afterglow, absence of grey levels. The scared typeface avoid rounded shapes that would look ill-proportioned with rectangle pixels and no aliasing, the spinner uses the screen afterglow as a way to create the grey levels and animations.

On the apps, new screens are designed to represent new data types like CO2 levels, temperature, and Heart Rate.

Libon's conversation visual update of the conversation screen, adding new media types (pictures, location, vocal messages), making the feed more readable.

ON (lifeisbetteron.com) pivot and becomes Libon (www.libon.com), switching from voicemail customization to VoIP, VoIP Out and messaging. Major redesign of the architecture and basic principles of the app, producing UX and UI for the whole iPhone experience.

Design of major screens of the new memory-life website.

Designing Libon's "springmenu",  from early UI concepts to assets delivery and user testing.

Redesign of the “ON” web application aiming at a better user experience and perceived performances (Online Sept. 2012).
ON (libon.com) is a more polite, natural, elegant way of communicating with others thanks to a smarter phonebook, a better voicemail, a communication hub, freed VoIP & text service and much more.

Re-design de l'application web du service ON (En ligne Sept. 2012; libon.com). ON propose une communication plus naturelle, polie et élégante grâce à un carnet d'adresse plus intelligent, une messagerie visuelle améliorée, un hub de communication, un service gratuit de VoIP et de messagerie.

Responsive design in HTML5 / CSS3 for the sharing interface of memory-life targeting touch devices. Its layout & interaction adapts itself to touch, desktop and multiple screen sizes. Still multimedia, it displays pictures, sounds, videos and texts.

Design responsif HTML5 / CSS3 de l'interface de partage de memory-life a destination des mobiles et tablettes. Son fonctionnement s'adapte aux différentes tailles d'écrans et modes d'interactions, du PC au mobile.

First test using responsive HTML technics (@media queries) and CSS Grid systems on my website.

Premiers tests de design responsive en HTML (@media queries) et de grilles CSS sur mon site web.

Design of the VoIP communication system in the existing “ON” web app. Workflows, wireframes, prototypes, graphical assets and animation in Flex 4.

Design de la partie communication VoIP de l'application web “ON”. Workflows, wireframes, prototypes et livraison des assets graphiques et animations en Flex 4.

Visual and interaction concepts for the communication hub of ON Voicefeed. The hub displays at the same time text messages and voicemails from different lines and communication channels as well as read / unread status.
With Lalao Rakotoniaina & Alexandre Simon.

Concepts de visuels et d'interactions pour le hub de communication de “ON Voicefeed”. Le hub présente un mélange de messages texts et répondeurs de multiples canaux (fixe, mobile).
Avec Lalao Rakotoniaina & Alexandre Simon.

After building the iPad app the opportunity was given to create an iPhone app leveraging the shared the code. the iPad design is adapted to fit a smaller screen on the iPhone. Après la creation de l'application iPad, l'opportunité nous est donnée de construire une application iPhone réutilisant la quasi totalité du code existant. L'interface iPad est “adaptée” à un écran plus petit.

UI & Visual Design for the new iPad application of “le tablo”. It follows the wireframes described here. UI & Visual Design la nouvelle application iPad du projet “le tablo”. D'après les wireframes décris ici.

After testing "le tablo" as a dedicated touch device, the project evolves to be a multiple screen service. First in line, the iPad application takes most of the orignal design to the tablet with the multimedia notes, to do lists, family wiki, group communications and adding location sharing features. All is synchronised in the cloud and works with the original device.

Après le test du device tactile dédié “le tablo”, le projet évolue vers un service en ligne multi écran en commençant avec une application iPad reprenant la plupart des bases du concept original avec des notes multimedia, les listes, le wiki familiale, la communication de groupe et ajoutant un partage de localisation.

Wireframes for the Windows Phone 7 app of the radio service “Radiomee” (giving access the radios of the whole world) following the “Metro” guidelines from Microsoft. The application was finally not developed for financial reasons.

Wireframes pour une version Windows Phone 7 du service de radio “Radiomee” (qui donne accès via internet aux radios du monde entier) suivant les guidelines “metro” de Microsoft. L'application n'a finalement pas été développée.

Final interface for the second iteration of “memory-life” following the wireframes and researches. The application pivots around the filtering on the left and switch between different type of “views” on the bottom bar. All deliveries for animations and graphical elements are coded in Flex 4.

Interface finale pour la seconde iteration de “memory-life” suivant les recherches et wireframes. L'application s'articule autour du système de filtrage sur la gauche et du passage entre différentes “vues” en bas.

Graphic upgrade of “memory-life's” iPhone app. First “retina” version of the app.

Mise à jour graphique de l'application iPhone de “memory-life”. Première version “retina”.

Wireframes, prototypes and researches for the second iteration of “memory-life”. The service stores all your memories (pictures, sounds, videos or texts), organises and renders them in an enjoyable way. The files are safe (originals are saved on the web), and always available.

The first iteration of the service had flows in its user experience and performances. This second focuses on a deep change of UI and the better performances brought by Flex 4. It is a major redesign that goes with a change in the workflow for the graphical assets production and delivery.

Wireframes, prototypes et recherches pour la seconde itération de “memory-life”. Le service stock tout les souvenirs (photos, sons, vidéos, textes), les organise et les présente sous une forme laissant place au hasard et à l'émotion. Les fichiers originaux son sauvés en ligne et toujours disponible.

La première itération avait révélé des problèmes d'experience utilisateur et de performances. La seconde se focalise sur une UI profondément révisée et sur les meilleurs performances promisent par Flex 4. C'est un redesign majeur qui s'accompagne d'un changement de workflow dans la création et la livraison des éléments graphiques.

Small multimedia browsing application for “memory-life” (Flash AS3), design and coded by myself. The work started as experiments on the new version of the main application using the APIs and was finally used as an visualisation interface for shared content.
The user can browse through different type of views, a large place is given to “play” with memories by moving, scaling and rotating them in the space of the app. It was buit to be easily embedded into blog articles, Facebook walls and customizable.

Petite application multimedia de navigation pour “memory-life” (Flash AS3), crée et codée par moi-même. Commencé comme une série d'exploration pour nouvelle version de l'application principale, le travail à finalement débouché sur une interface de consultation pour le contenu partagé.
L'utilisateur peut naviguer sur différent mode de visualisation, une place large étant laissée au “jeu” avec les médias, re-agencement dans l'espace, zoom et rotation. L'application est construite pour être facilement intégrable dans un blog, un wall Facebook et personnalisable.

“le tablo” is a device using a single 15" single touch tablet design to be placed in a fix location in the flat. It centralizes a lot of what a family needs for information sharing, knowledge management, and group communication. The UI is buit in Flex 3 on Adobe Air runing on a custom linux OS.

The interface pivots around notes, to do lists, wiki, apps and widgets. Events, family pictures, videos texts and drawings are displayed as notes and useful local informations via widgets; the wiki is also knowledge base. A bar at the bottom always displays the status of the family members and their mood.

Those are the final UI screens for the second iteration of the UI.

“le tablo” est un appareil de 15 pouces tactile placé dans une zone fixe de l'appartement. Il centralise une grande partie de ce dont la famille a besoin pour partager des informations et pour communiquer. La UI Flex 3 tourne sur Adobe Air et Linux.

L'interface s'articule autour de notes multimedia, de to do listes, d'un wiki, d'applications et de widgets. Évènements, photos, vidéos, textes et dessins sont affichés sous forme de notes, les widgets diffusent des informations locales, le wiki est une base de connaissance partagée. Une barre en bas de l'écran diffuse en permanence le status des membres de la famille et leur humeur.

Les écrans présentés sont les écrans finaux de la UI.

“le tablo” is a device using a single 15" touch tablet design to be placed in a fix location in the flat. It centralizes a lot of what a family needs for information sharing, knowledge management, and group communication. The interface is buit in Flex 3 on Adobe Air runing on a custom linux OS.

The interface pivots around notes, to do lists, wiki, apps and widgets. Events, family pictures, videos texts and drawings are displayed as notes and useful local informations via widgets; the wiki is also knowledge base. A bar at the bottom always displays the status of the family members and their mood.

Those are the wireframes and mock ups used to build the second iteration of the UI.

“le tablo” est un appareil de 15 pouces tactile placé dans une zone fixe de l'appartement. Il centralise une grande partie de ce dont la famille a besoin pour partager des informations et pour communiquer. La UI Flex 3 tourne sur Adobe Air et Linux.

L'interface s'articule autour de notes multimedia, de to do listes, d'un wiki, d'applications et de widgets. Évènements, photos, vidéos, textes et dessins sont affichés sous forme de notes, les widgets diffusent des informations locales, le wiki est une base de connaissance partagée. Une barre en bas de l'écran diffuse en permanence le status des membres de la famille et leur humeur.

Voici les wireframes et maquettes ayant servi à l'élaboration de la seconde itération.

“Keanu” started as an experiment around gesture interface and TV interaction using the same kind of technologie Microsoft later used on Kinect. Working closely with "Softkinetic" (middleware provider), everything was about translating raw data of body positions into an actual experience, finding the right gestures, building the basic vocabulary of interaction, filtering false positive and ending with an experience both usable and appealing. The result was an AS3 prototype using real interaction on fake interfaces.

The proof of concept was presented at CES 2009.
The work with the multidisciplinary team of developers and designers was particularly interesting ! The project still leaves in the shape of a start up called iFeelSmart.

“Keanu” a commencé comme une expérimentation sur les interfaces gestuelles sur télévision utilisant le même type de technologies utilisées plus tard par le Kinect de Microsoft. En relation rapprochée avec "Softkinetic" (fournisseur du middleware), le travail consistait a interpréter de la façon la plus juste les données brutes arrivant du capteur pour construire une experience a la fois confortable et séduisante. Le résultat est un prototype AS3 présentant des interactions réelles sur des interfaces factices.

Le proof of concept à été présenté publiquement au CES 2009.
Le projet continu à vivre sous la forme d'une startup nommée iFeelSmart.

My old portfolio, full flash, designed and coded (AS2) by myself. You can try it in here.

Very early prototypes (in flash AS2, some from 2005) of memory-life. Major concepts of the app are already there. The two videos shows the none functional AS2 concepts and the functional prototypes made after them by a small dev team (two people). This type of interface was a big challenge at the time !

Graduation project from the E.N.S.A.D. Tablet prototype designed to navigate through memories; It is linked to a cloud service storing all type of memories (pictures, sound, videos and texts) and providing a lot of metadata (date of creation, localisation, colors, tags). The tablet is not touch capable, navigation works with motion detection and sensors (using an accelerometer) in a consistent interaction with its use as a picture frame. The interface is designed to push for exploration, discovery, randomness and emotion.

Experiments on screen perception and interaction with navigation system for my graduation project. See the "Kakemphaton" for the final result !

School project. A navigation system to travel through "A brief world history" (book by Ernst Gombrich). Every text is localized on a map and a time. Users travel through century using the interface seeing evolutions and comparing regions of the world.

School work about the creation of an experience from an original printed poster from Siegfried Odermatt. Coded in AS2.

Reduce is a new way of typing letters on 9 key keyboards. It plays with the shapes of letters to recompose the 27 latin signs.