Kévin Boëzennec UX Designer

Attoma

2010-2013

Hypervisor Multitouch Touchscreen Supervision UI Client: Thales

• Wireframe

• Workshop session

2010-2013

Attoma

• Tactile interface

• Media presentation

2010-2013

Attoma APPIS Transportation supervision software Client: Thales

MESSAGES

NETWORK

EVENTS

Synoptic view

SYSTEM MANAGEMENT

25/05/2011 14:37

Frederick Wulff

Log out

ALARMS

FILTER

Geo synoptic view

Details

TREE

Line A

GENERAL

Cartagena LCD Screens

A

Ascao

ABC123

Lacoma

ABC456

Pueblo Nuevo Avda Ilustracion

ABC789

Barrio de la Concepcion

DEF123 Penagrande

DEF456

San Blas

Parque de las Avenidas

TFT Screens

Antonio Machado

Simancas

Sound speakers Ponte

Parque de las Avenidas Barrio de la Concepcion

er i

ca

Valdezarza

m A de a.

vd A

ta s U

Ab ra n

a in

se

ra

La t La

Ascao

G M reg ar o an rio on

Ibiza Francos Rodriguez

Pueblo Nuevo

PREVIEW

B

Guzman el Bueno Islas Philipinas

s ja

as

ob le

ci ca A

ar cia G

o ca As

ta uin Q

N

na

en rm ta

Ca El

N

Lis

un Ba ez lb de oa

lla o Ca

id es Pir am

Ale

el rg U

Via

ta

ra n G

Vis

e ch Alu

Em

pa lm

e

gr e

Alonso Cano

An

to n

M

ar

tin

So l

Ch

ue

ca

A M lon ar so tin ez

Ca

na l

C

• Wireframes

• Graphical User Interface

Action

2010-2013

Attoma TVS Video security software Client: Thales Cartography Calques Vélizy

Schematics Select

Tools

Library P.O.I

Object of interest

Tutorial

Itinerary

Area

21/12/2012

Layers

23:58:50

Système

Replay mode Commande

FreeRecherche all cam

Playback Layout

Live mode Create clip

x4

x1

PO0155

Synchro

Parameters

PO0156

Vespucci

Ves p

ucc

i St Ma

rce

VO104

VO106

lD

ass

aul

St

VO098

Livingstone

Gra

nd e

Ru

e

Humbolt

Loop

Loop

sse A pa Im

VO103

100 km

t

eS

gS

13:50:00s

14:00:00s

12:00:00s

12:20:00s

PO0157

rkin

sto n Liv i

ng

VO108

12:20:00s

13:50:00s

14:00:00s

13:50:00s

14:00:00s

PO0159

Pa

t

VO105

ne

VO102

12:00:00s

ria

Sq

uar

eR ose Dam

Magellan

nge Gra

t

n lla age

in S

VO101

eM

St

Ma

Cook

VO099

100 miles VO109

Velizy

Alarms TYPE

TIME

TRUSTABILITY

CAMERA

CLIP

STATUS

START DATE

END DATE

Loop

Xx°xx’xx.xx“N

Xx°xx’xx.xx“E

12:00:00s

Monitor Layout

x1

Video wall x4

x9

Alarms

Replay mode

Cam

Cam

VO100

Cartography

Recordings

Alarms

Navigation

VO110

13:50:00s

Library

Parameters

x 16

12:20:00s

All areas Area 1

Clips

Search

In all sites

Begin:

11/12/2011

11.12:01

DCI

Loop

12:00:00s

12:20:00s

Magellan

Tutorial

21/12/2012

11:58:50

Live mode

Snapshots

Date

Area 2

14:00:00s

Camera 13:00 Hour 13:00

Duration: Camera VO001

50:00

Reset Duration 50:00

VLZ

Apply

Recordings Recording 1 3 Alarms

2 mn Off

Vespucci VO001

11.12:01

13:00

11.12:01

13:00

11.12:01

13:00

PTZ002

50:00

VO002

Recording 2 3 Alarms

VO003 VO004 VO005

VO003

50:00

Preposition 1

Recording 3 1 Alarms

Humbolt Livingstone

PTZ004

50:00

Recording 4 2 Alarms

Cook Magellan Area 3 Area 4 Area 5 Area 6

Street name 2

Street name 1 Cycle

Area 7 Cycle

Street

Parc

Favorites Camera Preposition Cycle P.O.I Itinerary Area

Street name 3

Street name 4

• Graphical User Interface (real time mode)

• Graphical User Interface (replay time mode)

2010-2013

Attoma Smart House iPad application

• Information architecture • Interface wireframes • Redaction of interaction guidelines • Fireworks tactile prototype for iPad Client: Société Générale

• Version 1

2010-2013

Attoma

• Version 2

2010-2013

Attoma Looper

Récapitulatif des écrans types My cards + My contacts =13

Multi-contact management mobile app

My contacts

Looper My cards

Settings = 3 (environ) Contact cards

My cards

About Looper

Terms & condit°

About Looper

Terms & conditions

Preview

Subscription = 4 Terms & condit°

My last contacts

My last contacts

Client: Confidential

My contacts

Home 01

02

Contact card(s)

My cards

03.A

03

Preview my card 03.B

14

Confirmation

Confirmation

Presentation

14.A

Quiet hours

17

Reco sharing

Push phone

Terms & conditions 14.B

Sign up

My account

Sign up

Looper

Username Email Password

? 04

! 15

Recommandation sharing

15.A

Push with phone notification

15.B

My account 15.C

Sign in form 18

01 02 03

05

04

AB

12

ma

map

pics

3

p

s

ma

pic

Search Calendar

Search Mapping 06

3

3

g

12

12

ta

Search Category

Search Alphabet

Search Faces 05.A

07

ABC

ABC

16

05.B

Charity statistics

Charity choice 19

Collect card

Collect card 08

Share card

1. Contexte

Share by QR

Share by QR

Last activity

Send invitation

Customs

10

09

Public

Jeff Raskin 35 years Single New York Entrepreneur

Jeff Raskin is a young entrepreneur working with charity business.

• Galaxy S3 • iPad / Macbook Pro • 3G data / wifi

1

Internet behaviors • Cafes, airport, concerts, shops, transports, restaurants,… • Several times an hour. • «Serendipity».

Large use of social applications brand/ shops advocate (UX is a lever) selfbrandind.

2

Social brand manager Edit card 13

Jeff goes in a nice restaurant. He wants to take the business card at the end of the meal. He’s got Looper on his iPhone. Lopper user mobile app

Lopper user

Looper brand relation • Lopper is recommended by a «friend» on twitter. • Collect local addresses, collect pro contacts, share and manage several digital identities (pro, personal, public).

User

Jeff passes his phone through the NFC website receiver.

Download and test many applications.

Jeff akwnoledge the receipt and give is personal card. The restaurant card is in Lopper app. Couple of days later, Jeff meet a friend who’s looking for a nice restaurant in the area.

3

Jeff send to his friend the restaurant card.

IT expertise :

• Persona

ATTOMA // Looper // Definition du service // 4 septembre 2012

Share by QRcode or Tag ID

11

Charity

• Screen flow

Lopper’s value for Jeff Jeff exchanges with a merchant his card and later shares it with a friend.

Share by NFC

Global brand / Merchant

page 6 /26

Lopper GB/M website

12

Share card by mail

Looper

Edit card

Edit card

Equipement

Push/Share Mgt

Report

Push/Share Mgt

QR

Share card channels

C. Personnas

Settings

abc

QR

________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Charity Local communication merchant Edit contact manager card 13.A

Looper GB/M tools for store (vitrine + counter)

Lopper charity website

Commercial Looper manager

Last activity of contact

09.A

Customize card (+ autre?)

09.B

Settings choices 09.C

Push/Share Management

09.D

Looper account Management

09.E

12.A

Report complaint

Sign up / Sign in 18.A

Choose your charity

Reco sharing

Search

Search

Search

123 p

Sign up later

Sign up

Search

C

Sign up

Sign up / sign in

ect.

Quiet hours

04.A

Search

Password

Get card

optional

Facebook

Confirmation message

Request message

Username

Password

Sign up form 18.B

2010-2013

Attoma 2. User scenarios

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

1. Download & subscribe to looper

1/3

« Paul sends to Jeff an invitation to Looper. Jeff downloads it and follows the first steps until the creation of his public card. »

2. User scenarios

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

1. Download & subscribe to looper

Apple Store

Looper

Looper

Send Lopper app invitation

Download

CANCEL

attached : Pro card

Password Get card

OK

Sign up / sign in

From : Paul Mc

Hello Jeff, je te transmet ma carte de visite Pro. Est

To : Jeff wood

Sign up later

Mr Paul Mc invites you to join Looper !

Send

Actors

Sign up Username Email

iTunes Password [email protected]

to : [email protected]

Pro

2/3

Password optional

Facebook ect. Sign up

Download Looper Get Public Card

Touchpoints

1. Send invitation with card

2. Receiving invitation

3. Downloading Looper

4. iTunes password

5. Looper welcome page

6. Looper first page

7. Sign up process

Looper can be send to a new user by different channels. By mail, sender card is then embeded with the app.

→ First choice : download the app.

The URL route the new user to the correct store (depending on the OS) to download the looper application.

User have to fill his iTunes password to download the Looper application.

Most interesting features of the Looper app are explained step by step to users.

User opens the app and faces 3 options :

Direct entry

→ Get partner card (and sign up later) → Sign up / sign in → Skip

Import data

→ Second choice : get public card.

→ User filled fields.

→ User can also select his information from his native phone address book but the above information will be needed if not present in his native phone address book card. → User can import his personal information from Facebook.

2. User scenarios

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

1. Download & subscribe to looper

3/3

Choose your charity

Looper

Choose your charity

ATTOMA // Looper // Definition du service // 4 septembre 2012

01

Decline

02

02

03

03

04

04

Accept

Your accound have been created !

01

Skip

Choose

page 13 /26

ATTOMA // Looper // Definition du service // 4 septembre 2012

Public See card

Or get the Paul card :

Public Skip

Get card

Choose

8. Agreement conditions

9. Charity choice

10. Skip the charity choice

User have to read and accept the conditions of Looper to continue the sign up process.

After signing up, user can select a charity in a list of selected charities based on his ZIP code.

If charity is not selected, exchange The public card is generated card with merchant will triggers automatically with the data filled in a notification from asking user to the sign up. select a charity on the web site later.

11. Card me (public)

1c User

Merchant

Merchant

Card

sms

Looper

0,5c

Charity B Charity A

Charity C

30%

sms

50%

tagID tagID

User

0,5c

20%

Charity

User

ATTOMA // Looper // Definition du service // 4 septembre 2012

• User scenario

page 15 /26

• Fireworks prototype

page 14 /26

2010-2013

Attoma Panoratio

PANORATIO - PANOSIGHT

0

1

2

3

Pops-Up

4

Big data analysis engine Title

Title Logo

Tools

• Conducted ergonomic audit • Designed graphical user interface • Animated service design workshop for the future SAAS product

1 2

Library

Actions

) w Ne izard (W

Content

n sio

Title Logo Description Status

en

Dim

Description Actions

Library

Content

Library

Editor

links

Options General actions

Main Screen

Title Logo

Actions

1

General actions

Rules Editor

General options

Rules Editor > Wizard Mode

LIST

Rules Editor > Wizard Mode > Edit Dimension

RULE

DIMENSION

it

Ed

???

Title Logo

Title Configure

Edit

Content

General options

General options

Rules Editor > Wizard Mode > Edit Dimension Parameters

Rules Editor > Wizard Mode > Edit Dimension Parameters > Edit Interval

AGES

INTERVAL

Title Logo Description

dit

E

???

Title Logo

General options

Rules Editor > Wizard Mode > Edit Dimension Parameters

n

Ru

GENDER

it

Ed

Title Logo

Title Logo

Description

Content

Options

General options Editor

w ) Ne pert (Ex

Rules Editor > Expert Mode > Edit Export

Options General options

EXPORT

Rules Editor > Expert Mode Title Logo

RULE

it

Ed

Content

Options

General options

Rules Editor > Expert Mode > Edit Parameter

PARAMETERS

Title Resume General options

Rules Editor > Run Rules

RESULT

Title

Title Logo

Logo

it

Library

Options

Options

Description

General options

2

Ed

General options

Rules Library

Rules Library > Edit Rule

LIBRARY

• Workflows analysis

INSTANCE

Library

Edit

Content General options

Rules Editor > Wizard Mode > Edit Dimension Parameters > State Chooser

LIBRARY

Attoma

• Screen design

2010-2013

2010-2013

Attoma Panoratio Service design workshop for the futur SAAS product

• Used card sorting method • Animated workshop • Delivered workshop analysis

• Workshop tools

Attoma

• Service blueprint poster

2010-2013

2010-2013

Attoma Casting Intranet website

• Designed Intranet • Designed organigram browser • Wrote interaction guidelines FILTRER LA RECHERCHE

Recherche

FONCTION / ORGANIGRAMME / COMITÉS / NEWS Localisation

Professional Commercial BL Support Investment Banking

Private Banking

Client: Banque de Luxembourg

Steering

Controlling Depts.

Operations

Audit

C-Act

Support

IT Status lync Langues parlées

Royal

CFG

Corp

Mkts

Asset

Board

Cust

HR

Prod

Ancienneté Pouvoir de signature

LUX

GER

IIS

Credit

S&Risk MgtCom Compl

S-Set

Tr-Set

Legal

Applic

FRA

BEL

IFS

TAX

Ext-MC

Risk

Cus-DB

Sec-DB

Fclty

Dev

INTL

Ent

MAD

E-Bkg

Acc

CI-Risk

Proc&P

Logist

Deleg

B-Dev

Arlon

B-Dev

MkgPR

Orga

Rec

Netw

Suppt

BXL

Proj&S

GenSec

Pay

CAM

• Organigram browser

2010-2013

Attoma

FILTRER LA RECHERCHE

Paiement USA

FONCTION / ORGANIGRAMME / COMITÉS / NEWS

Casting : Organisation de la fenêtre Casting

Résultats : 162 personnes trouvées

Localisation

Professional Banking >> Market Advisory Desk

Status lync

Buldog/reg/17pt #1A171B

Corbel/reg/12pt #FFFFFF

Buldog/reg/17pt #4D4D4D

Langues parlées

ORDER TAKING

français

Derniers docs publiés

MAP

Dernières news publiées

ROYAL 22 • 24

FILTRER LA RECHERCHE

Corbel/ita/11pt #4D4D4D

allemand

Ancienneté

RESPONSABLE DU DÉPARTEMENT

Recherche

FONCTION / ORGANIGRAMME / COMITÉS / NEWS

anglais

Buldog/reg/13pt #4D4D4D

Professional Commercial BL Banking Support Investment

Private Banking

Steering

Controlling Depts.

Operations

Support

Résultats : --

IT

SERVICES

Status lync

Royal Mgt Com

Mgt Com

contact

contact

Mgt Com contact

Corbel/reg/12pt #FFFFFF

Localisation

Pouvoir de signature

Corbel/bold/cap/12pt #4D4D4D

CFG

Corp

Mkts

Asset

Board

Audit

C-Act

Cust

HR

Prod

Mgt Com

Langues parlées Ancienneté

Buldog/reg/20pt #4D4D4D

Buldog/reg/20pt #FFFFFF

contact

Pouvoir de signature

Couleur fond filtre #353535

couleur carré

Claude SCHILDERMANS Gestionnaire DB

Prénom NOM LONG Fonction Fonction

Prénom NOM LONG Fonction Fonction

#E73937

#E73937

#EF8039

#FFD93A

#B7D661

#E73937

#2E8180

#204B71

#204B71

#65245E

#0B283A

Prénom NOM LONG Fonction Fonction

Prenom NOM Tél : + 300 00 00 00 00 Fax : + 300 00 00 00 00 Mail : [email protected] Back-up : Prenom Nom Mots clés : clés, mots clés, mots clés, mots clés.

Mgt Com

Mgt Com

contact

Prénom NOM LONG Fonction Fonction

contact

couleur dégradé sur carré

Prénom NOM LONG Fonction Fonction

Radial gradiant Blanc=20% Couleur carré = 75% Fill opacity = 60 % Stroke opacity = 60% Angle = -45°

couleur finale

DESCRIPTION Le MAD Portfolio Management a pour mission, d’une part, la gestion des mandats en gestion discrétionnaire des clients de la Banque Privée et, d’autre part, le conseil en investissement pour l’ensemble de la clientèle non-gérée de la Banque Privée.

#4D4D4D

2 PEOPLE

• Intranet

Couleur fond

#FCF9E8

• Specifications

Couleur fond

2010-2013

Attoma

Casting : Biblitohèque d’interactions

1

FR

EN

2

Ouverture de Casting DE

CONTACT & AIDE

PLAN DU SITE

ACCÉDER À MON COMPTE

FR

EN

DE

CONTACT & AIDE

PLAN DU SITE

C@sting Recherche

Professional Banking

Private Banking

Commercial Support

BL Investment

Steering

Controlling Departements Operations

Ret

CFG

CORP

Tax

Asset

LUX

GER

IIS

Trad

S&Risk

FRA

BEL

IFS

Mkg

MAD

E&Bkg

G-Sec

CI-Risk

Support

C-Act

C@sting Recherche

comités

organigramme

fonction

Filtrer la recherche

IT

MGT

Audit

Cust

HR

Prod

Acc

Compl

S-Set

Tr-Set

Legal

Applic

Orga

Risk

Cus-DB

Sec-DB

IMM

Dev

DELEG

Pro-Acc

Localisation Statuts Lync

Professional Banking

Private Banking

Commercial Support

BL Investment

Steering

Controlling Departements Operations

Ret

CFG

CORP

Tax

Asset

LUX

GER

IIS

Trad

S&Risk

FRA

BEL

IFS

Mkg

MAD

E&Bkg

G-Sec

CI-Risk

C-Act

Support

Filtrer la recherche

IT

MGT

Audit

Cust

HR

Prod

Acc

Compl

S-Set

Tr-Set

Legal

Applic

Orga

Risk

Cus-DB

Sec-DB

IMM

Dev

INTL

Cies

B-Dev

Arlon

Pay

Logist

B-Dev

Rec

Netw

Proj&S

Proc&P

DELEG

Pro-Acc

Localisation Statuts Lync

CFG

Langues parlées

Pouvoir de signature

Suppt

Private Banking

comités

organigramme

fonction

Langues parlées Ancienneté

INTL

Cies

B-Dev

Arlon

CAM

Pay

Logist

B-Dev

Rec

Netw

Proj&S

Proc&P

Professional

Commercial

Professional Banking Support Banking

BUD

BL Investment

Steering

TAX

SRM

ORG

MAD

TRA

AMA

MGT

MARKET PRS ADVISORY DESK

ACC

BUSINESS 17 DEVELOPMENT

Ancienneté Pouvoir de signature

Suppt

Rollover sur les silos

ACCÉDER À MON COMPTE

FRE

20

CAM

CRE 9 people

9 people

Casting apparait dans la page avec un effet rapide du flou au net sans trajectoire

3

CFG FRE

BUD

1 - Agrandissement des colonnes (0,3s) 2 - Retour à la taille initiale (0,3s)

4

Rollover sur les départements

TAX

MARKET ADVISORY MAD DESK TRA

Les colonnes agissent comme une vague au passage de la souris

XXXX XXXXXXXX

Mise à jour des départements

CFG

BUD

TAX

SRM

ORG

CIR

COR

FRE

MAD

TRA

AMA

MGT

AUD

CUS

PRS

ACC

RIM

SES

XXXX XXXXXXXX

CRE

PAY NEM

PRS

TRS

HRD

PAM

CFG

BUD

TAX

SRM

ORG

CIR

COR

MKT

APM

FRE

MAD

TRA

AMA

MGT

AUD

CUS

PRS

ACC

RIM

SES

CRE

TRS

HRD

PAM

MKT

APM

CFG

BUD

TRA

MAD

ACC

PRS

CRE

SRM

ORG MGT

AUD

COR CUS

TRS

PAM APM

SES

PAY NEM

ACC

- Agrandissement des carrés quand la souris reste plus de 0,3s dessus - Les titres changent de couleur Passage du sombre au net

• Interaction guidelines

- Les départements non conernés par le filtre disparaissent - Ils s’effacent par une transition du net au flou

Les départements sont aimantés vers le haut et comblent les espaces vides laissés par la disparition des départements filtrés.

2010-2013

Attoma IC-IC IC-IC: Enhancing interconnectivity through infoconnectivity - Enhancing interconnectivity of short and long distance transport networks through passenger focused interlinked

How to provide information via the ICS?

sonalized Per

information connectivity.

Smartphone

Self service machine

Media

http://www.ic-ic.eu

How?

Information panel

Sta

Client: European Commission

Signage

What?

n d a rd i z e d

sonalized Per Area

Context

Entertainment

Traveler Mood

Contents

Traveler information

Orientation

Temporality

Sta

Where?

• Research and analysis

n d a rd i z e d

2010-2013

Attoma Involvement : Benchmarking self service facilities Analysis criterias :

Panneaux d’informations

Bornes

• Research and analysis

t Em ba

rq

ue

m en

ne Do ua

G du are no rd

G CD are G2 TG V Te rm in al 2

Infoconnexion

rt

• Evaluation of the effectiveness • Error rate, achievement rate • Evaluation of the efficiency • Time to complete the task • Satisfaction assessment • Rating scale

Trajet Margaux

pa

Anthropocentric approach

Opérateurs

Dé

• Self Service Machine UI identity • User guidance provided by the interface • Readability options • Language choice • Infoconnection or multimodal information

2010-2013

Attoma Make the information accessible

A global system making use of transmedia

• Need free internet connection (wifi, 3G) • Real time updates and hyperlocal

• Increase access to the mobile information system

communication

• Expand passenger’s identification

• Unlimited access to information

at European level

Customize information

• Unify the equipment

• Make information accessible abroad • Reduce the “information pollution” • Increase the effectiveness of the service with personalized information

• Use ticket or smartphone to deliver

No governance

Governance

“Need a Bandmaster”

“With a Bandmaster”

contextualised information

Stakeholders • Research and analysis

2010-2013

Attoma Dynamo Interactive experience for the exhibition «Dynamo».

• Defined and illustrated target vision • Designed and specified concept of video wall projecting the different visitors contri butions in real time (photos, comments, messages) • Illustrate the target vision Client: Grand Palais

Attoma

• The Video wall

2010-2013

Insurance Global Operation

Insurance Global Operations (IGO) is owned by a $100M+ insurance holding company. IGO has developed IGO6, the insurance industry’s first collaborative insurance system. The compagny is international: France Headquarter, R&D, sales ; US Sales ; Tunisia Developpement.

My role I joined the compagny to define the design strategy and work on the next version of IGO6 software. I managed two graphic designers in Tunisia. In Paris, I hired a UX trainee to join me inside the Paris design Team.

UX design leader • Define the compagny design strategy • Define the compagny mobile strategy and opportunities • Plan each design phases • User research (France & US)

Insurance Global Operation

• Implementing the Bootstrap graphical Framework http://getbootstrap.com/2.3.2 Tom Smith Home

Souscription Informations sur le client Julien Martinez 20/04/1978 150 Avenue de l’Opéra 75009 Paris France [email protected] 06 00 00 00 00

Etapes en cours 1 Choix du produit

Client

Comptabilité

Distribution

Point de vente

06

Date d’expiration 2013

07

08

+

Nom Rechercher

2013

Code

Nom

Pilotage

Produits

Date des faits 07

Paramétrage

3

Liste des produits : Rechercher

Sous ligne métier

Nom du produit

Code

Nom

00001

Auto

00001

Courtier

00002

Auto

00002

Courtier

00003

Auto

00001 00003

Courtier

00004

Auto

00004

Courtier

00005

Auto

00001

Courtier

00006

Auto

00007

Auto

2

Lignes métiers Automobile

Habitation

Individuelle accident

Plaisance

Prévoyance

Protection juridique

Risques divers

Fédération sportive

Small Business Package

Multirisque Pro

Emprunteur

Responsabilité civile

Vie groupe Recherche avancée Annuler Nom

• Wireframe & design the UI with Flat concept

Insurance Global Operation

KPI

+

350 MonEléments portefeuille clients

3

Semaine Nouveaux contrats

14

22

120 000 00 €

23 000 000 00 €

14

+5

18/07/2013 - 18/07/2013

80 000 00 €

+2

18/07/2013 - 18/07/2013

Contrats

6

Nouveaux devis

+2

Souscriptions

5 000 00 €

-5

Contrats / Devis

Collaboratif

+

Tâches

+

Filtres d’affichage

Filtres d’affichage

18/07/2013 - 18/07/2013

72% de devis transformés

2

10 12 2012

DISTRIBUTION

10 12 2012

DISTRIBUTION

Sujet Courtier 2

Quotidiennes

Timeline

9 12 2012

Moi 16H04 Iovis Veneris inter et portuosam fundamento tamque ad autem indigens urbes abundat templo altera municipia tanta Cyprus tamque viribus itidem discretam Iovis adminiculi urbes fertilitate Cyprus tanta multiplici omnibusque fertilitate. Courtier 2 16H12 Est fuisset quidem Epicuri vellem quamquam equidem eruditi alios non.

3

Statut 2

150 Eléments

Client

95

Comptabilité

59

Distribution

38

Paramétrage

2

Pilotage

0

GROUPES

STATUT

En ligne

RELATIONS NOUVEAU

2

5

Contact 1

Contact 2

Contact 3

Julien Martinez / attente du papier signé

PROCESSUS

9 11 2012

Devis auto n°12003517 Mme Dupont Nicole

10 12 2012

DISTRIBUTION

10 12 2012

PROCESSUS

7 11 2012

PROCESSUS

26 10 2012

PROCESSUS

25 10 2012

PROCESSUS

24 10 2012

DISTRIBUTION

10 12 2012

PROCESSUS

24 10 2012

DISTRIBUTION

10 12 2012

Parametrage produit ... Contact 5

Devis auto n°12003517 Mme Dupont Nicole 1

Contact 6

Occupé(e)

1

9 12 2012

Contact 6

• Enhanced User Experience with new concept (lateral panel to display contextual informations) • Created specifications for communication with developers

2

DISTRIBUTION

Devis auto n°12003517 Mme Dupont Nicole Sujet Courtier 2

Mercredi 10

Sujet Courtier 2

10 12 2012

Devis auto n°12003517 Mme Dupont Nicole

Encaissement 120 000€ Contrat n°12003517 Contact 4

3

PROCESSUS

Sujet Courtier 2

Julien Martinez / renouvellement du contrat auto DISTRIBUTION

350 Eléments

Sujet Courtier 2

Absent(e) 16H13

+

Filtres d’affichage

3

Filtres d’affichage 2

Jeudi 11octobre 2012

Moi Levi proximo eius morbosum in. Julien Martinez / retard de paiement

3

DISTRIBUTION

Sujet Courtier 2

+

Rechercher

150 Eléments

Sujet Courtier 2

Contacts

Devis auto n°12003517 Mme Dupont Nicole Sujet Courtier 2

Insurance Global Operation Spécifications graphiques d’IGO6 en flat design

12 août 2013 3:27

18 / 67

CSS Bootstrap : Flat design Boutons

Champs de texte

Pagination

Enlever ombres // ------------------------.box-shadow

Enlever ombres // ------------------------.box-shadow

Enlever ombres // ------------------------.box-shadow

Enlever dégradés // ------------------------.gradient()

Enlever bords ronds // ------------------------.border-radius

Enlever bords ronds // ------------------------.border-radius

Dropdowns

Progress bars

Enlever ombres // ------------------------.box-shadow

Enlever ombres // ------------------------.box-shadow

Enlever bords ronds // ------------------------.border-radius

Concept flat design

Enlever bords ronds // ------------------------.border-radius

Textes

Définition Le flat design (traduction : design web plat), est la tendance graphique actuelle des interfaces web, sof et hardware. L’interface « Metro » de Windows 8 utilise le flat design.

Navbars

Désactiver les ombres // ------------------------.text-shadow

Enlever ombres // ------------------------.box-shadow

Le flat design est une méthode qui n’utilise pas d’effets supplémentaires pour créer de la profondeur ou du relief. Il n’y a pas d’ombres portées, de biseaux, de dégradés… Les icônes et les éléments de l’interface sont simples, nets, sans artifice.

Enlever bords ronds // ------------------------.border-radius

Les éléments graphiques non-indispensables à la navigation et la fonctionnalité de l’interface sont donc supprimé. Il en résulte un design très propres et épuré qui place le contenu au centre de l’attention.

• Educated developpers to work with Bootstrap Spécifications graphiques d’IGO6 en flat design

12 août 2013 3:27

12 / 67

Palette d’outils : Informations contextuelles

Consultation d’une fiche client

Nom prénom Typo : H2, Couleur : @bleu1

Julien Martinez 20/04/1978 150 Avenue de l’Opéra 75009 Paris France [email protected] 06 00 00 00 00

Automobile

Numéro de contrat Typo : H2, Couleur : @bleu1 darken 30%

Informations secondaires Typo : H2, interlignage 18 px, Couleur : @bleu1, lighten 10%

AU0000167K

AU2013-469E-00015

Type de contrat (Auto) Typo : H2, Couleur : @bleu1, lighten 10%, opacity 0.8

Header Marges intérieurs : 10 px Pictogramme : 25*25 px

25/03/2013

Automobile

AU0000516W

Automobile

AU0000516W

Automobile

AU0000608N

Automobile

AU0000980V

AU2013-469EA-00029

15/05/2013

AU2013-469EA-00030

15/05/2013

Espace Marge : 10 px

Barre Couleur : @bleu4, lighten 10%, opacity : 0.5

Espace interligne H : 20 px Espace Ligne/Contenu H : 5 px

Contenus Typo : H3, Couleur : @bleu1, opacity 0.6

• Wrote UI design guidelines

Insurance Global Operation Windows tablet application I represented my company at the LOMA conference in Las Vegas. I worked on the tablet Windows 8 version of our proprietary software that was demonstrated premiered there.

Contact Mail [email protected] Phone +336 71.37.64.77 Skype kevin.boez