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