7 Table of content for the appendix

zope.ots.dk

7 Table of content for the appendix

2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

7 Table of content for the appendix

1 APPENDIX: LIST OF POSSIBLE NAMES.......................................................................................................15

2 APPENDIX: AVAILABLE URLS........................................................................................................................16

3 APPENDIX: SKETCHES FOR THE NEW LOGO..........................................................................................17

4 APPENDIX: JABRA’S OLD LOGO...................................................................................................................20

5 APPENDIX: JABRA.COM...................................................................................................................................21

6 APPENDIX: LOGO SELECTION.......................................................................................................................22

7 APPENDIX: LOGO SKETCHES FOR JABRA LIVING................................................................................23

8 APPENDIX: FINAL LOGO FOR JABRA LIVING.........................................................................................24

9 APPENDIX: STATIONARY.................................................................................................................................25

10 APPENDIX: JABRA PACKAGING....................................................................................................................26

11 APPENDIX: PROMOTIONAL ITEMS..............................................................................................................27

12 APPENDIX: TREND..............................................................................................................................................28

13 APPENDIX: CLASS DEVELOPMENT.............................................................................................................29

14 APPENDIX: STORYBOARDS FOR JABRA....................................................................................................32

15 APPENDIX: STORYBOARDS FOR THE LADY VIDEO..............................................................................41

16 APPENDIX: COLOR SCHEME FOR THE JABRA LIVING SITE AND LOGO.....................................43

17 APPENDIX: MOCK UPS......................................................................................................................................44

18 APPENDIX: SITE MAP.........................................................................................................................................47

19 APPENDIX: USE CASES AND SCENARIOS FIRST EDITION..................................................................48

20 APPENDIX: USE CASES AND SCENARIOS FINAL EDITION.................................................................51

21 APPENDIX: USE CASE DIAGRAM..................................................................................................................54

22 APPENDIX: CLASS DIAGRAM.........................................................................................................................55

23 APPENDIX: STATE DIAGRAM FOR THE LADY CLASS..........................................................................56

24 APPENDIX: MS PROJECT..................................................................................................................................57

25 APPENDIX: GROUP CONTRACT.....................................................................................................................58

14


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

1 Appendix: List of possible names

Waldemar:

Jabra Active

Telemotion

Hellomotion

Freedom is everything

Jabra.Blabla

Jabra.On

Jabra.Free

iJabra

Jabra.flux

Merete:

Jabra.outdoors

Jabra.outhere

Jabra.go

Jabra.free

Jabra.living

Jabra joy

Jabra easy

Edgars:

Jabra.move

Jabra.movement

Jabra.action

Jabra.motion

Jabra.express

Jabra.up

Jabra.free

Jabra.breeze

Gabriel:

Jabra Fit

Jabra Motion

Jabramatic

Javra move 4

Jabra feel

Jabra runner

Jabra touch of

Jabra other dimension

Jabra see you smile

Elin:

Jabra go life

Jabra be alife

Jabra active/activity

Jabra come to life

Jabra pro active / proactive

Jabra succeed

Jabra success

Jabra sport

Jabra efficient atrrActiveness

Jabra free/freedome

Jabra everyday

Jabra live and active

Jabra you can

Final list:

Jabra motion

Jabra free

Jabra breeze

Jabra move

Jabra living

15


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

2 Appendix: Available URLs

www.jabraliving.dk

www.jabraliving.se

www.jabraliving.de

www.jabraliving.com

www.jabraliving.net

www.jabraliving.org

www.jabraliving.info

www.jabraliving.biz

www.jabraliving.co.uk

www.jabraliving.me.uk

www.jabraliving.nl

www.jabraliving.org.uk

www.jabraliving.be

16


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

3 Appendix: Sketches for the new logo

17


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

18


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

19


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

4 Appendix: Jabra’s old logo

20


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

5 Appendix: Jabra.com

21


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

6 Appendix: Logo selection

22


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

7 Appendix: Logo sketches for Jabra Living

23


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

8 Appendix: Final logo for Jabra Living

Colors in the final version of the new Jabra logo.

The colored logo has 2 different colors

Jabra, Living and the dot

PANTONE® solid coated 431C

Hexadecimal #626A75

R=98 G=106 B=117

C=58 M=45 Y=36 K=24

The yellow shape:

PANTONE® solid coated 107C

Hexadecimal #F6E42C

R=246 G=228 B=44

C=6 M=3 Y=92 K=0

24


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

9 Appendix: Stationary

25


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

10 Appendix: Jabra Packaging

26


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

11 Appendix: Promotional items

27


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

12 Appendix: Trend

28


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

13 Appendix: Class development

Identifying objects

Here we went over the functional specification and picked nouns. These are the ones we

selected:

background

color

space

progress bar

intro runs

integrated loading bad

content

the elements of the main section

“skip” button

main page.

mouse

squares

hand

Elin

watch

inertia

percentage

curtains

featured headset

button

navigation

product

product page

“contact” button

address

visitor

name, address, credit card information

confirmation email

order

Deriving classes from objects

Content area

Content

Intro

Skip button

Progress bar (before intro)

Progress bar (during intro)

Progress bar (on site)

Preloader bar (3d model)

Square

Cursor

Lady

Curtain

Inertia

29


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

Navigation

Featured headset

Button

Product

Movie

Order

Attributes

Content area

size: Boolean

Next size Boolean

Position (how much it has moved)

Content Loaded (bytes of new content %)

Alpha (in particular frame)

Next content

Intro Loaded (site loaded %)

Progress bar (before intro)

Progress bar (during intro)

Preloader (on site)

Preloader bar (3d model)

Bytes total

Bytes loaded

Percent loaded

Size (graphic in progress bar)

Bytes total

Bytes loaded

Percent loaded

Size

Bytes total

Bytes loaded

Cursor x position

Cursor y position

Percent loaded

Size

Bytes total

Bytes loaded

Percent loaded

Size

Square -

Lady

Cursor x position

Cursor y position

Hand position

Current hand behavior

Cursor Timer (ex. how long have the cursor been idle)

30


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

Hand timer

Inertia

Current number

End number

Speed

Calculation / outcome

Navigation

Featured headset

Product Information

Movie

Order

Name

Headline

Description

Technical data

Buy link

Info link

Headset link

Product id

Quantity

Customer name

Customer surname

Billing address

Billing zip code

Billing city

Shipping address

Shipping zip code

Shipping City

Home Phone number

Work Phone number

Cell number

Email

Credit card type

Credit card number

Credit card expiration

Credit card security number

31


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

14 Appendix: Storyboards for Jabra

32


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

33


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

34


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

35


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

36


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

37


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

38


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

39


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

40


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

15 Appendix: Storyboards for the Lady video

41


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

42


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

16 Appendix: Color scheme for the Jabra Living site and logo

Gray scale.

From white to black

The yellow:

PANTONE® solid coated 107C

Hexadecimal #F6E42C

R=246 G=228 B=44

C=6 M=3 Y=92 K=0

The gray:

PANTONE® solid coated 431C

Hexadecimal #626A75

R=98 G=106 B=117

C=58 M=45 Y=36 K=24

43


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

17 Appendix: Mock ups

44


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

45


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

46


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

18 Appendix: Site map

47


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

19 Appendix: Use cases and Scenarios First Edition

Use cases and scenarios

Use cases describe the overall functional behavior of the system from the visitor’s point of view.

Scenarios are used to describe what could happen when a visitor is using the system; this is

also from the visitor’s point of view.

Use cases.

Open site – the way visitor goes from clicking a banner or link or writing the address manually to

the main site.

Open video – how the visitor opens a particular video from every part of the website

Open product information - how the visitor opens a particular headset from every part of the

website

Open Contact – how the visitor get in contact with the company.

Open Find Retailer – how the visitor find his nearest retailer.

Open Buy now – how the visitor buys the product from the site.

Scenarios for the open site use case

Scenario 1

• The visitor clicks on a ‘Jabra living’ banner on a website.

• The Jabra Living micro site opens.

• The preloader for the intro shows.

• The intro runs

• The main ‘Jabra Living’ main page opens.

Scenario 2

• The visitor wants to visit the ‘Jabra Living’ site for the second time

• The visitor enters www. jabraliving.dk in the address line in internet explore.

• The Jabra Living micro site opens.

• The intro runs, the visitor chooses the ‘skip intro’ button

• The main ‘Jabra Living’ main page opens.

Scenario 3

• The visitor is ‘googling’ “Wireless headsets”

• Jabra comes up as a paid ad

• The visitor chooses Jabra.

• The main website for Jabra opens.

• The visitor clicks on a ‘Jabra living’ link on the site.

• The Jabra Living micro site opens.

• The preloader for the intro shows.

• The intro runs

• The main ‘Jabra Living’ main page opens.

Scenarios for the Open video use case

Scenario 1

• The visitor is on the main page.

• He moves the mouse over the different squares.

• The visitor clicks movie 1.

48


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

• Movie 1 runs.

Scenario 2

• The visitor is on the main page.

• The visitor clicks on the navigation

• He chooses Movies

• Then movie 3

• Movie 3 runs.

Scenarios for the Open product information use case

Scenario 1

• The visitor is on the main page.

• He moves the mouse over the different squares.

• The visitor clicks on the square with the product.

• The product page opens.

Scenario 2

• The visitor is on the main page.

• The visitor clicks on the navigation

• He chooses ‘products’ and then ‘model BT800’

• The BT800 product page opens

Scenarios for the Open Contact information use case

Scenario 1

• The visitor is on the main page.

• The visitor clicks on the ‘contact’ button

• Contact page opens

Scenario 2

• The visitor is on any other page on the microsite

• The visitor clicks on the ‘contact’ button

• Contact page opens

Scenarios for the Open Find Retailer information use case

Scenario 1

• The visitor is on the main page.

• The visitor clicks on the navigation

• The visitor clicks on ‘find retailer’.

• The Find Retailer page opens.

• The visitor enters his address and receives the address, the phone number and map to

the nearest retailer.

Scenario 2

• The visitor is on the product information page.

• The visitor clicks on ‘find retailer’.

• The Find Retailer page opens.

• The visitor enters his address and receives the address, the phone number and map to

the nearest retailer.

49


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

Scenarios for the Open Buy now information use case

Scenario 1

• The visitor is on the main page.

• The visitor clicks on the navigation

• The visitor clicks on ‘buy’.

• The Buy now page opens.

• The visitor enters name, address, credit card information.

• The visitor receives a confirmation email of his order.

Scenario 2

• The visitor is on one of the product pages.

• The visitor clicks on ‘buy now’.

• The Buy now page opens.

• The visitor enters name, address, credit card information.

• The visitor receives a confirmation emal of his order.

50


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

20 Appendix: Use cases and Scenarios Final Edition

Open site

Scenario 1 – ideal

• background color fills all the space

• a progress bar appears and runs

• intro runs and has an integrated loading bar that runs till loading is done or at least 5

seconds are gone

• all the content fades out

the elements of the main section blur in sequence

Scenario 2 – main section cashed

the visitor wants to visit the ‘jabra living’ site for the second time

the visitor enters www.jabraliving.dk in the address bar

• background color fills all the space

• a “skip” button appears – that leads to the second last point

• a progress bar appears and runs (might not even be seen, if also the intro is cashed)

• intro runs for 5 seconds without the loading bar element

• all the content fades out in 1,5 seconds

the elements of the main section blur in sequence

Video

Scenario 1 – from main

the visitor is on the main page.

• he moves the mouse over the different squares, the hand of elin follows the cursor

• if the visitor leaves the cursor still for 10 seconds, elin moves her arm down and puts it

into position to look at the watch. after another 30 seconds she moves her hand on hip.

she starts pinting again after the user has moved the mouse and stiill does after 1

second.

• a square is made brighter and the cursor changes to hand when the it moves over the

square

the visitor clicks movie 1

• at the same moment:

• elin moves her arm down and puts it into position to look at the watch

• a small preloading bar appears next to the cursor and follows the cursor.

the content starts to fade out with inertia according to the percentage loaded – at the end

the content has disappeared

• 2 curtains fall from the top of the content space

• curtains slide off, reveals the movie

the movie starts

• all way through the movie the featured headset acts as a button – the cursor changes to

hand

• when the movie ends a black screen is visible for 2 seconds and then the curtains slide

on, they fade out and the main section fades in

Scenario 2

the visitor is on the main page.

the visitor clicks on the navigation

the main menu opens

• he put the cursor over movies

51


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

the movie sub menu shows with the 4 movies

the visitor clicks on movie 3

the menu shuts down after rolling out of it more than 15px

• 2 curtains fall from the top of the content space

• curtains slide off, reveals the movie

the movie starts

• all way through the movie the featured headset acts as a button – the cursor changes to

hand

• when the movie ends a black screen is visible for 2 seconds and then the curtains slide

on, they fade out and the main section fades in

Product information

Scenario 1

the visitor is on the main page.

• he moves the mouse over the different squares, the hand of elin follows the cursor

• if the visitor leaves the cursor still for 4 seconds, elin moves her arm down and puts it into

position to look at the watch.

• a square is made brighter and the cursor changes to hand when the it moves over the

square

the visitor clicks on the square with the product

• all the content fades out

• when the page is all white, the content area expands upward and downward

the product information fades in

Scenario 2

the visitor is on the main page.

the visitor clicks on the navigation

the main menu opens

• he puts the cursor over product information

the product information sub menu shows with the names of the 6 movies

the visitor clicks on ‘model bt800’

• all the content fades out

• when the page is all white, the content area expands upward and downward

the product information fades in

3d model

Scenario 1

the visitor in on the product information page

• in the picture of the model is a small button that says ‘3d’ and is spinning around

the cursor changes to hand when moving over the button

the visitor clicks on the button

• a prelaoder apears in the middle of the current picture

• when it is done preloeading, the preloader disapears and the 3d model moves out from

the line left to it’s final position and starts spining in half a second

• at the top right corner of the 3d model space there is a close button – when clicking it the

model moves off to the line it came from

Contact information

Scenario 1

the visitor can be on any page on the microsite

52


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

the visitor clicks on the ‘contact jabra’ button

• a new browser window is launched with the content section of jabra.com but on the flash

site nothing changes

Find retailer

Scenario 1

the visitor is on the main page.

the visitor clicks on the navigation

the main menu opens

the visitor clicks on ‘find retailer’

• all the content fades out

• when the page is all white, the content area expands upward and downward

the find retailer fades in

the visitor enters his address

the addresses, websites and phone numbers of the nearest stores are shown – they

slide out of the line left to it

the visitor selects one of the adresses

• on a map the location of the chosen store is shown.

Scenario 2

the visitor is on the product information page.

the visitor clicks on ‘find retailer’

• all the content fades out

the find retailer fades in

the visitor enters his address

the addresses, websites and phone numbers of the nearest stores are shown

the visitor selects one of the adresses

• on a map the location of the chosen store is shown.

Buy now

Scenario 1

the visitor is on the main page.

the visitor clicks on the navigation

the main menu opens

the visitor clicks on ‘buy now’.

• a product sub menu opens with the names of the 6 products

the visitor chooses the model

• a new browser winfow is launched with an html page in the same style of the flash site

• a new browser window is launched with an html page in the same style of the flash site

but on the flash site nothing changes

the visitor enters name, address, credit card information

• a success message shows and the visitor receives a confirmation email of his order.

Scenario 2

the visitor is on one of the bt800 product pages.

the visitor clicks on ‘buy now’

• a new browser winfow is launched with an html page in the same style of the flash site

• a new browser window is launched with an html page in the same style of the flash site

but on the flash site nothing changes

the visitor enters name, address, credit card information

• a success message shows and the visitor receives a confirmation email of his order

53


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

21 Appendix: Use case diagram

54


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

22 Appendix: Class diagram

55


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

23 Appendix: State diagram for the Lady class

56


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

24 Appendix: MS Project

57


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

25 Appendix: Group contract

58


2. Semester Case 2005, design and interaction, Elin, Merete, Gabriel, Edgars and Waldemar

59

More magazines by this user
Similar magazines