Interaction Design BRANDit - WordPress.com · 2/5/2009 · Interaction Design - BRANDit 1.0...

Interaction Design

BRANDitBy:Jeroen Sedelaar & Leni GoossensProject Studio Dumbar UXDCMD 4C

Interaction Design - BRANDit1.0 Flowchart

1.1 introduction

2.1 MOVEit

2.1.1 MOVEit overlay 2.2.1 TUNEit overlay 2.2.1 MATCHit overlay

2.1.3 feedback 2.2.3 feedback 2.2.3 feedback

2.1.2 Question 2.2.2 Question 2.2.2 Question

2.2 TUNEit 2.3 MATCHit

1.2 introduction overlay

REPLAY REPLAY REPLAY

WRONG WRONG WRONGRIGHT RIGHT RIGHT

START START START

2.4.1 feedback

2.4 SHAREit

SOCOM EMAIL

Interaction Design - BRANDit1.1 Introduction Page

BRANDit

Skip IntroIntroduction32

1

4

1

2

3

BRANDit LogoThe BRANDit logo.

Title IntroductionThe title text, Introduction.

Button Skip IntroonClick Skip Introduction Button.


4 Introduction VideoIntroduction video, person explaining what Brandit is.


BRANDit

Introduction2

1

3

MOVEit4

TUNEit6

MATCHit8

SHAREit10

MOVEitGame Info

5TUNEitGame Info

7MATCHitGame Info

9SHAREitInfo

11

1

2

3


Title IntroductionThe title text, Introduction.

Introduction Video / OverlayIntroduction video finished, Black overlay 30%.


4 MOVEitonClick MOVEit Button.

5

6

7

MOVEit Game InformationInformation text about how to play the MOVEit Game.

TUNEitonClick TUNEit Button.

TUNEit Game InformationInformation text about how to play the TUNEit Game.

8 MATCHitonClick MATCHit Button.

9 MATCHit Game InformationInformation text about how to play the MATCHit Game.

10 SHAREitonClick SHAREit Button.

11 SHAREit InformationInformation text about how to share the BRANDit Game with your friends.

Interaction Design - BRANDit2.1 MOVEit

BRANDit

MOVEit2

1

4

Loading Icon3

00:00

5

6

1

2

3


MOVEitThe title text, MOVEit.

Loading IconLoading Icon loads till 100% before Video is played.

Interaction Design - BRANDit2.1 MOVEit Page

4 MOVEit videoMOVEit video plays.

5 Timeline IndicatorTimeline indicator showing the progression of the movie playing.

6 Time IndicatorTime indicator showing the time left of the movie playing.

Interaction Design - BRANDit2.1.1 MOVEit

BRANDit

MOVEit2

1

3

Replay4

Start5

1

2

3



MOVEit Video / OverlayMOVEit video finished, Black overlay 30%.

Interaction Design - BRANDit2.1.1 MOVEit Page

4 Replay Button onClick Replay Button, replays movie.

5 Start / Play ButtononClick Start / Play Button, starts game.

Interaction Design - BRANDit2.1.2 MOVEit

BRANDit

MOVEit2

1

3

Score4

Enter

Type your answer below

X Answer 1

X Answer 1

X Answer 1

X Answer 1

Answer 1

00:154

5

7

8

8

9

6

1

2

3



Quizz Master VideoQuizz master video, person given reaction on your given answers.

Interaction Design - BRANDit2.1.2 MOVEit Page

4 Score Indicator Score Indicator.

5 Enter ButtononClick Enter Button.

6 Input FieldInput Field to type the correct name of the Brand.

7 Answers Given The ansers you have typed in are displayed as soon as they are typed in. There will be a Negative or Positive icon displayed next to each given name.

8 Up / Down ArrowsonClick Up / Down Arrows, giving the user the ability to scroll through the given names.

9 Time Indicator (Seconds)Time indicator in second counting down to zero.

Interaction Design - BRANDit2.2 TUNEit

BRANDit

TUNEit2

1

4

Loading Icon3

00:00

5

6

1

2

3


TUNEitThe title text, TUNEit.

Loading IconLoading Icon loads till 100% before audio is played.

Interaction Design - BRANDit2.2 TUNEit Page

4 TUNEit audioTUNEit audio file plays.

5 Timeline IndicatorTimeline indicator showing the progression of the audio file.

6 Time IndicatorTime indicator showing the time left of the audio file.

Interaction Design - BRANDit2.2.1 TUNEit

BRANDit

TUNEit2

1

3

Replay4

Start5

1

2

3


TUNEitThe title text, tuneit.

TUNEit Audio / OverlayTUNEit audio finished, Black overlay 30%.

Interaction Design - BRANDit2.2.1 TUNEit Page

4 Replay Button onClick Replay Button, replays audio.



BRANDit

TUNEit2

1

3

Score4

Enter


X Answer 1

X Answer 1

X Answer 1

X Answer 1

Answer 1

00:154

5

7

8

8

9

6

1

2

3


TUNEitThe title text, TUNEit.


Interaction Design - BRANDit2.2.2 TUNEit Page







Interaction Design - BRANDit2.3 MATCHit

BRANDit

MATCHit2

1

4

Loading Icon3

00:00

5

6

1

2

3


MATCHitThe title text, MATCHit.

Loading IconLoading Icon loads till 100% before Video and audio is played.

Interaction Design - BRANDit2.3 MATCHit Page

4 MATCHit video / audioMATCHit video / audio file plays.

5 Timeline IndicatorTimeline indicator showing the progression of the audio file.

6 Time IndicatorTime indicator showing the time left of the audio file.

Interaction Design - BRANDit2.3.1 MATCHit

BRANDit

MATCHit2

1

3

Replay4

Start5

1

2

3



MATCHit Video / Audio / OverlayMATCHit video / audio finished, Black overlay 30%.

Interaction Design - BRANDit2.3.1 MATCHit Page

4 Replay Button onClick Replay Button, replays movie.



BRANDit

MATCHit2

1

3

Score4

Enter


X Answer 1

X Answer 1

X Answer 1

X Answer 1

Answer 1

00:15

5

7

8

8

9

6

1

2

3




Interaction Design - BRANDit2.3.2 MATCHit Page







Interaction Design - BRANDit2.4 SHAREit

BRANDit

SHAREit2

1

3

Answer 1

Answer 1

Answer 1

Answer 1Facebook

5

Hyves

Digg

Linked In

Del.icio.us

Send to a friend

Your name

Share / Send4 6

Friend’s name

Your email Friend’s email

Message

Send

8

7

9

1

2

3




Interaction Design - BRANDit2.4 SHAREit Page

4 Share / Send The title Share / Send.

5 Social Networks onClick number of Social Networks.

6 Send to a friend The title Send to a friend.

7 Input FieldsInput Field to type in criteria of yourself and of your friend.

8 Close ButtononClick Close Button.

9 Send ButtononClick Send button.

Interaction Design BRANDit - WordPress.com · 2/5/2009 · Interaction Design - BRANDit 1.0...

Documents

Transcript of Interaction Design BRANDit - WordPress.com · 2/5/2009 · Interaction Design - BRANDit 1.0...