V2G SPRINT 5 Paolo Di Labio Anna Hornberger Linda Zieverink - - PowerPoint PPT Presentation

SLIDE 1

V2G

SPRINT 5 Paolo Di Labio Anna Hornberger Linda Zieverink

SLIDE 2 mail mail mail mail forgotten pasword LOG IN CREATE NEW ACCOUNT SUBMIT username username email password minimum battery level never go below this level when sharing energy repeat password upload picture password greengrid greengrid REGISTRATION 0 20 40 60 80 100

...

EDIT username Anna Hornberger annahornberger@gmx.de ....... email 1234567AB CP number Tesla Model S car type 200km/ ???kWh battery range 60% minimum battery level password greengrid PROFILE SETTINGS logo fill box 1 submit button 1 submit button 1 click label 1 heading(h) 1 heading(h) 1 submit button 2 slider 1 slider 1 legend upload box 1 upload box 1_ uploaded fill box 2 label 1 label 2 label 3 (description) label 5 submit button 2 SAVE username email password minimum battery level never go below this level when sharing energy repeat password upload picture greengrid REGISTRATION 0 20 40 60 80 100

...

heading(h) 1 submit button 2 slider 1 slider 1 legend upload box 1 fill box 2 label 1 label 2 label 3 (description) label 4 logo BACKGROUND 1 BACKGROUND 2 mail mail mail mail mail 30% battery status charge& travel prole sharing points greengrid charge& travel prole 35 30% battery status sharing points greengrid 35 DEPARTURE DEPARTURE NEW TRIP 30% battery status charge& travel prole sharing points greengrid 35 DEPARTURE NEW TRIP greengrid charge& travel prole TRIP OPTIONS greengrid departure time from: current location to: home battery level when leaving you are charging from 15,00 until 19.00 . At 19.00 you batterylevel will be 80% and you will earn 3sharepoints 19.00 departure / / arrival 21.00 0 20 40 60 80 100 CHARGE GO?

• ver Schiphol A8on

leaving time: 20.15 battery level: 60% share points: 6

• ver Haarlem

Routeoptions leaving time: 20.00 battery level: 60% green points: 5.5 charge& travel prole OVER SCHIPHOL A8 greengrid leaving time: 20.15 arrival time: ~ 21.00 battery level: 60% green points: 6 pic 1 pic 2 label 7b label 6 label 7 menu label logo 2 arrow pic arrow pic text 1 menu pics 3 - 7 label 6b tabp open box 1 switch label 1 pic 8 (agenda) scroll button 1 switch button 1 switch button 1 submit button 3 submit button 3 label 7 label 7 label 8 slider 2 logo scroll button 1 BACKGROUND 2 slider 2 legend box 1 logo 2 pic 9-11 label 12 zoomable pic for now click box 1 (selected) click box 1 (not selected) headline 4 headline 3 label 11 label 10 headline 2 headline 2 headline 2 click label 2 line 1 box 2 menu background/ separation switch button 1 from: current location tabp open box 1 text 1

Log in /Registration Charge & Travel Settings

wireframes 1.0

SLIDE 3 mail mail mail mail en pasword OG IN CREATE NEW ACCOUNT SUBMIT username username email password minimum battery level ver go below this level when sharing energy repeat password password greengrid greengrid REGISTRATION 0 20 40 60 80 100

...

EDIT username Anna Hornberger annahornberger@gmx.de ....... email 1234567AB CP number Tesla Model S car type 200km/ ???kWh battery range 60% minimum battery level password greengrid PROFILE SETTINGS logo fill box 1 submit button 1 heading(h) 1 heading(h) 1 submit button 2 slider 1 slider 1 legend upload box 1_ uploaded fill box 2 label 1 label 2 label 3 (description) label 5 submit button 2 SAVE username email password minimum battery level never go below this level when sharing energy repeat password upload picture greengrid REGISTRATION 0 20 40 60 80 100

...

heading(h) 1 submit button 2 slider 1 slider 1 legend upload box 1 fill box 2 label 1 label 2 label 3 (description) label 4 logo BACKGROUND 1 BACKGROUND 2 mail mail mail mail mail 30% battery status charge& travel prole sharing points greengrid charge& travel prole 35 30% battery status sharing points greengrid 35 DEPARTURE DEPARTURE NEW TRIP 30% battery status charge& travel prole sharing points greengrid 35 DEPARTURE NEW TRIP greengrid charge& travel prole TRIP OPTIONS greengrid departure time from: current location to: home battery level when leaving you are charging from 15,00 until 19.00 . At 19.00 you batterylevel will be 80% and you will earn 3sharepoints 19.00 departure / / arrival 21.00 0 20 40 60 80 100 CHARGE GO?

• ver Schiphol A8on

leaving time: 20.15 battery level: 60% share points: 6

• ver Haarlem

Routeoptions leaving time: 20.00 battery level: 60% green points: 5.5 charge& travel prole OVER SCHIPHOL A8 greengrid leaving time: 20.15 arrival time: ~ 21.00 battery level: 60% green points: 6 pic 1 pic 2 label 7b label 6 label 7 menu label logo 2 arrow pic arrow pic text 1 menu pics 3 - 7 label 6b tabp open box 1 switch label 1 pic 8 (agenda) scroll button 1 switch button 1 switch button 1 submit button 3 submit button 3 label 7 label 7 label 8 slider 2 logo scroll button 1 BACKGROUND 2 slider 2 legend box 1 logo 2 pic 9-11 label 12 zoomable pic for now click box 1 (selected) click box 1 (not selected) headline 4 headline 3 label 11 label 10 headline 2 headline 2 headline 2 click label 2 line 1 box 2 menu background/ separation switch button 1 from: current location tabp open box 1 text 1

Log in /Registration Charge & Travel Settings

30% battery r status charge& r tra r vel pro r le sharing poin i ts greengrid i charge& r tra r vel pro r le 35 30% battery r status sharing poin i ts greengrid i 35 DEPA P RTURE NEW TRIP 30% battery r status charge& r tra r vel pro r le sharing poin i ts greengrid i 35 DEPA P RTURE NEW TRIP charge& r tra r vel pro r le TRIP OPTIONS departure time from: curr r e r nt location to: home battery l y evel when leaving 21.00 0 20 40 60 80 100 CHARGE GO? Routeoptions charge& r tra r vel pro r le OVER SCHIPHOL A8 greengrid eengrid leaving time: 20.15 arrival time: ~ 21.00 battery r level: green poi r n i ts: 6 pic 1 pic 2 label 7b label 6 label 7 menu label logo 2 arrow pic arrow pic text 1 menu pics 3 - 7 label 6b tabp open box 1 switch label 1 pic 8 (agenda) scroll button 1 switch button 1 switch button 1 submit button 3 submit button 3 label 7 label 7 label 8 slider 2 logo scroll button 1 BACKGROUND 2 slider 2 legend box 1 logo 2 pic 9-11 label 12 zoomable pic for now click box 1 (selected) click box 1 (not selected) headline 4 headline 3 label 11 label 10 headline 2 headline 2 headline 2 click label 2 line 1 box 2 menu background/ separation gr you are cha r rging f r r f om 15,00 u r ntil 19.00 . At 19.00 you batterylevel will be 80% and you will earn 3sharepoi r n i ts

• ver Haarlem

leaving time: 20.00 battery r level: 60% green poi r n i ts: 5.5 DEPA P RTURE reengrid eengrid

• ver Schipho

r l A8on leaving time: 20.15 battery r level: 60% share poi r n i ts: 6 60% greengrid eengrid departure / / / arrival 19.00 EDIT username Anna Hornberger annahornberger@gmx.de ....... email 1234567AB 7 CP number Tesla T Model S l car type r 200km/ ???kWh k battery range y 60% minimum battery l y evel password greengrid i PROFILE SETTINGS ding(h) 1 hea load box 1_ uploaded pl l up label 5 submit button 2 SAVE A username email password minimum battery l y evel never go be r low this w level when sharing energy r repeat password upload picture greengrid i REGISTRATION A 0 20 40 60 80 100

...

heading(h) 1 submit button 2 slider 1 slider 1 legend upload box 1 fill box 2 label 1 label 2 label 3 (description) label 4 logo BACKGROUND 2 switch button 1 from: curr r e r nt location tabp open box 1 text 1

Char & ge & Tr T avel Settings

departure time go depa depa art new trip w from curr r e r nt locaton 21:00 arr r ival time e 00: 0:0 00 74 35% battery status green points depa depa d rtu ture e tim m go depa depa art new trip w from curr r e r nt locaton 00 00 0:0 :00 arrival time 21:00 74 35% battery status green points departure time battery level when leaving charge from 20 40 60 80 74 35% battery status green points depa departu ture e tim m go depa depa art new trip w from curr r e r nt locaton 00 00 0:0 :00 arrival time 21:00 74 35% battery status green points

Styling

Translate wireframes into

Coding

wireframes 1.0

SLIDE 4 battery level leaving time green points OVER SCHIPOL battery level leaving time green points OVER HAARLEM

usern name e pas sswo sw rd d

create a new account login

username mail password repeat password car model minimum battery level

submit

departure time battery level when leaving

charge

de e d pa art ture ne ne ew tr tr t ip p ip

COLOURS ICONS BUTTONS FONT

never go below this level when sharing energy 20 40 60 80

upload picture

+

never go below this level when en leav le ing

from

current locaton 19:00 forgotten password

background colours box colours icon colours

#FFFFFF #FFFFFF

font colours button colours

#547A59 #FFFFFF #9AC09D #799579 #547A59

icon meaning

battery status green points trip & charge

• verview

energy usage network settings

• pacity 80%
• pacity 30%
• login

clickable button typable button swype bar slide between

• ptions

slide between numbers #333333 20 40 60 80 upload image + #E74228 #669999 explanation

6pt 80% light italic #66666

explanation typing

8pt 80% italic #FF3333

typing

bold

• 12pt 80%

#666666

• typing
• 10pt 100%

regular #666666

• button

9pt 80% regular #FFFFFF

button battery status/ green points

6pt 100% bold italic #666666

battery status battery perc./ points amount

12pt 100% bold #666666

battery perc

RALEWAY

forgotten password

8pt 100% regular #FF3333

forgotten

74 35%

battery status green points

italic

• verview

8pt 100% 669999

• verview

BARS +

zoom map show map ON OFF switched on route

• route

edit username mail password car model minimum battery level

jondejong@gmail.com password Nissan Leaf 60% Jon de Jong 74 35%

battery status green points

trip options

60 % 20:15 6 74 35%

battery status green points

60 % 20:00 5.5

tr t ip opt ptio

• ns

s

ON OFF hide map #9AC09D #799579

trip & charge

• registration

login

20 40 60 80 go to battery status go to green points

logo colours

#FFFFFF #365B26 #E74228

COL ICO

back colou box colou icon colou icon urs

• n

urs

#547A #FFFF #E742

LOURS ONS

kground urs urs urs

#FFFFFF #FFFFFF

font colo butto colo

raleway light italic raleway italic raleway regular raleway bold italic raleway bold go back button

style guide

SLIDE 5

departure time battery level when leaving

charge

de e d pa art tur u e n w tr tr t ip p ip

never go below this level when en le

from

current loc 19 20 40 60 80

74 35%

battery status green points

new w

leav

eav e ing

• caton

9:00 80 le le

n w

vi

• c

9:

ew ew

en l en le

screen transitions

choose new trip

SLIDE 6

departure time battery level when leaving

charge

de e d pa art tur u e ne ne new tr tr t ip p ip

never go below this level when en leav le ing

from

current locaton 19:00 20 40 60 80

74 35%

battery status green points

departure time

go

de departur re ne ew trip

from

current locaton 21:00

ar arriva val tim me m

00: 0:0 00

74 35%

battery status green points

choose the arrival time departure

screen transitions

SLIDE 7

departure time battery level when leaving

charge

de e d pa art tur u e ne ne new tr tr t ip p ip

never go below this level when en leav le ing

from

current locaton 19:00 20 40 60 80

74 35%

battery status green points

departure time

go

de departur re ne ew trip

from

current locaton 21:00

ar arriva val tim me m

00: 0:0 00

74 35%

battery status green points

dep d art arture time me

go

de departur re ne ew trip

from

current locaton 00 00 0:0 :00

arrival time

21:00

74 35%

battery status green points

new trip departure go to the trip

screen transitions

SLIDE 8

dep d art arture e time me

go

de departur re ne ew trip

from

current locaton 00 00 0:0 :00

arrival time

21:00

74 35%

battery status green points

approve trip

screen transitions

SLIDE 9

dep d art arture e time me

go

de departur re ne ew trip

from

current locaton 00 00 0:0 :00

arrival time

21:00

74 35%

battery status green points battery level leaving time green points

60 % 20:15 6 74 35%

battery status green points OVER SCHIPOL battery level leaving time green points

60 % 20:00 5.5

OVER HAARLEM

tr t ip opt ptio

• ns

s

OFF OFF

6 % 20:0

OFF OFF

2

OFF OFF

0 % 20: 6 60 2 6 % 00 2 6 20 2 6 % 20 2 5 6 2 60 % 20 5 5 6 2 % :15 5 5 6 % 5 5 5 2 % 20 2 % :1 % 5 15

new trip activate one possibility

screen transitions

SLIDE 10

dep d art arture e time me

go

de departur re ne ew trip

from

current locaton 00 00 0:0 :00

arrival time

21:00

74 35%

battery status green points battery level leaving time green points

60 % 20:15 6 74 35%

battery status green points OVER SCHIPOL battery level leaving time green points

60 % 20:00 5.5

OVER HAARLEM

tr t ip opt ptio

• ns

s

OFF OFF battery level leaving time green points

60 % 20:15 6 74 35%

battery status green points OVER SCHIPOL battery level leaving time green points

60 % 20:00 5.5

OVER HAARLEM

tr t ip opt ptio

• ns

s

OFF ON

trip options show the map new trip

screen transitions

SLIDE 11

dep d art arture e time me

go

de departur re ne ew trip

from

current locaton 00 00 0:0 :00

arrival time

21:00

74 35%

battery status green points battery level leaving time green points

60 % 20:15 6 74 35%

battery status green points OVER SCHIPOL battery level leaving time green points

60 % 20:00 5.5

OVER HAARLEM

tr t ip opt ptio

• ns

s

OFF OFF battery level leaving time green points 60 % 20:15 6

74 35%

battery status green points OVER SCHIPOL

+

ON battery level leaving time green points

60 % 20:15 6 74 35%

battery status green points OVER SCHIPOL battery level leaving time green points

60 % 20:00 5.5

OVER HAARLEM

tr t ip opt ptio

• ns

s

OFF ON

new trip trip options trip options trip & map overview

screen transitions

SLIDE 12

departure time battery level when leaving

charge

de e d pa art tur u e ne ne new tr tr t ip p ip

never go below this level when en leav le ing

from

current locaton 19:00 20 40 60 80

74 35%

battery status green points e

check the overview

screen transitions

SLIDE 13

departure time battery level when leaving

check

de e d pa art tur u e ne ne new tr tr t ip p ip

never go below this level when en leav le ing

from

current locaton 19:00 20 40 60 80

74 35%

battery status green points battery level when leave

de d pa art rture

charging time green points earned

80 % 15:00 - 19:00 3 74 35%

battery status green points battery level when leave

de d

charging time green points earned

80 % 15:00 - 19:00 3 74 35%

battery status green points

departure overview go back

battery level when leave

eparture

rging time green points earned

15:00 -

batter status

tu

e

departure

screen transitions

SLIDE 14

html css javascript

SLIDE 15

THANKS

questions