This presentation describes how KeyFruit approached Samsung Smart TV Cinema Application's user experience. As a brief preview, It includes some of the work we've created. The whole set includes 120 pages of wireframes, 68 pages of UX Guideline directions and more than 50 pages for information architecture.
3. User Experience Guidelines
Version 1 published March 11, 2013 by Özgür Güneş (ozgurgunes@keyfruit.net) 3 of 66
Information Architecture
4. User Experience Guidelines
Version 1 published March 11, 2013 by Özgür Güneş (ozgurgunes@keyfruit.net) 4 of 66
Legend
LEGEND
Connectors Area
Depict relationships between elements. Connectors use arrows indicating how the user will move through the An area is used to identify a group of pages that share one or more common attributes (such as having some
system. Crossbar on the opposite end of the arrow prohibits upstream movement. unique design treatment).
Conditional Connectors Conditional Area
Conditional connectors depict when a path may or may not be presented to the user depending upon whether A conditional area is used when one or more conditions applies to a group of pages. Conditional areas are
one or more conditions are met. associated with a result generated in the event that the condition(s) are not fulfilled.
Continuation Point Iterative Area
Continuation points allows to separate diagrams into easily digestible sections. A single continuation point Iterative areas are used to represent architectures that involve repeating the same basic structure as it is
may list one or more sources or destinations as needed. applied to a number of functionally identical information elements.
Page (Used for screen in this diagram) Decision Point
Basic units of of presentation, not (necessarily) a unit of implementation. One page in diagram may correspond A decision point is used to model when one user action may generate one of a number of results, and the
to multiple files or multiple units of code (as in a server-side implementation). system must make a decision about which result is to be presented.
Pagestack (Used for screenstack in this diagram) Conditional Branch
A pagestack indicates a group of functionally identical pages whose navigational properties are immaterial to A conditional branch is when the system (not based on user action) must select one path among a number of
the macrostructure of the site. mutually exclusive options to be presented to the user.
Popup Conditional Selector
Popup windows are indicated by a page with a dock in this diagram. A popup with an arrow returns to a page Conditional selectors indicate the various downstream paths are not mutually exclusive. Any number of the
depicts that popup is to close. paths that fulfill the condition(s) may be presented to the user.
Flow Cluster
A flow area encloses a sequence of steps (like a login procedure, for instance) that will appear repeatedly in Cluster is used when system can present more than one path based upon certain conditions. The cluster can
different contexts throughout the design, analogous to a programming procedure. appear downstream from either conditional branch or conditional selector.
E-Maii Sending (Used for SMS in this diagram) Concurrent Set
Envelope used to depict e-mail or short message sending. Emails and short messages are delivered to the user A concurrent set is used in cases where a user action generates multiple, simultaneous results (such as
for use outside of an application environment. displaying a page while a file is being downloaded).
For more details on these elements, see http://www.jjg.net/ia/visvocab/
5. User Experience Guidelines
Version 1 published March 11, 2013 by Özgür Güneş (ozgurgunes@keyfruit.net) 5 of 66
Application Overall
NOTES
(1a) Home screen provides access to suggested movies.
(1b) Home screen provides access to popular movies.
(1i) (1c) If user is not logged in system provides access to login;
otherwise, provides access to account menu.
C ovi
on e
G
M
tin De
Ge enr (1d) This cluster serves as account menu, provides access to
ue ta
nre es
to il
s
:
User Profile and Logout.
(1e) System provides access to suggested movies in Watch
Now section.
ns
aso (1f) System provides access to popular movies in Watch Now
Se
fil :
s section.
ro to
how
e
r P ue
se in
S (1g) If selected genre is TV Shows, system provides access to
U ont
TV
C
TV Shows only; otherwise provides access to movies.
ou t
ow
Log Sh
TV
(1d
)
(1h
)
C ogi
on n
L
tin Fo
(1g
ue rm
)
to
:
(1c G
Ge enr
) nre es
(1e s
)
Su s
Mo gge nre
vie ste
s d Ge
P (1f
Mo opula )
(1l)
vie r
s
G
Ge enr
nre es
(1j) s
Su s
Mo gge nre
No
w (1a vie ste
s Ge
d
tch )
Wa
P (1k
ste
d (1b Mo opula )
gge s ) vie r (1m
Su ovie s
)
M
ar
pul s
Po ovie
M (1h) System provides access to movies in selected genre.
y
Pla (1n (1i) System provides access to movies in selected session.
er )
C ha
P
on n
ay (1j) System provides access to suggested movies in Pay Per
C
tin ne
P G
Ge enr
ue ls
h
arc ts nre es Play section.
to
Se esul
:
s (1k) System provides access to popular movies in Pay Per
R
Play section.
t (1j) System provides access to movies in selected genre.
cen hes
Re earc (1m) System provides access to movies mathing the search
S criteria.
(1n) System provides access to movies matching the search
criteria.
h
arc
Se
6. User Experience Guidelines
Version 1 published March 11, 2013 by Özgür Güneş (ozgurgunes@keyfruit.net) 6 of 66
Channels
NOTES
(2a) If selected channel has any theme, system provides
C ovi
access to themes only; otherwise provides access to
on e
M
tin De
ue ta
movies. (2e
to il
)
:
(2b) System provides access to movies in selected channel.
(2c) If selected theme has any program, system provides G
Ge enr
nre es
access to programs only; otherwise, provides access to s
movies.
(2d) System provides access to movies in selected theme.
ms
(2e) System provides access to movies in selected channel. gra
Pro
(2d
)
This is a preview version of the document. Th
em
es (2c
)
Please contact KeyFruit for further information requests.
e
em
Th
els
ann
Ch (2b
)
(2a
)
el
ann
Ch
ex
Ind
nels
Chan
C
on H
tin om
ue e
fro
m
:
7. User Experience Guidelines
Version 1 published March 11, 2013 by Özgür Güneş (ozgurgunes@keyfruit.net) 7 of 66
Login
C ovi
on e
M
tin De
ue ta
to il
:
(3f
NOTES )
(3a) If user is logged in, proceed to (3b); otherwise, return
e to:
om e
H inu
form and show error.
t
on
C
(3b) If user has linked Samsung Sinema account previously,
authenticate user and proceed to (3f ); otherwise prompt
R
user to link or create Samsung Sinema account. Su egis
cce tere
(3c) If form is valid, link account, authenticate user and ssf d
ully
display success message; otherwise, return login form
and display error.
(3d) If user accepted the agreement proceed to account
creation form; otherwise reprompt user to link or create
Samsung Sinema account.
(3e) If account creation form is valid, create account and link
This is a preview version of the document.
account, authenticate user and display success message; (3e
)
otherwise, return account creation form and display (3c
error. )
(3f) If user came from movie detail, return movie detail;
otherwise, return home.
A
Fo ccou
rm nt
Please contact KeyFruit for further information requests.
unt
(3d
cco )
kA
Lin
er
Cre Us ent
ate re em
Ac Ag
cou
nt
(3b Lin
) kP
rom
pt
Cre
ate (3a
Ac )
cou
nt
Log
in F
orm
:
e om
r
om f
H ue
pt
tin
rom
on
C
inP
Log
C o
on vi
M
tin e D
ue e
fro ail
m
t
:
8. User Experience Guidelines
Version 1 published March 11, 2013 by Özgür Güneş (ozgurgunes@keyfruit.net) 8 of 66
User Profile
NOTES
(4a) System provides access to movies in recently
ve
mo played list.
m Re (4b) System provides access and remove options
nfir
Co for the movies in user’s watchlist.
C ovi
(4b (4c) System provides access to movies user
on e
M
tin De
)
ue ta
commented previously and delete option
to il
:
for the comment.
te
ele (4d) System provides access to movies user
r mD
Confi rated previously and delete option for the
comment.
(4c (4e) System provides access to movies user
This is a preview version of the document.
) purchased.
t
tchlis (4f) If form is valid, update profile and return
Wa te
ele settings; otherwise return profile update
rmD
Confi form and display error.
(4g) System provide option to remove devices.
(4d (4h) If device is valid, authenticate device and
ents )
return devices; otherwise display warning
Please contact KeyFruit for further information requests.
mm
Co message.
My
(4e (4f
) )
gs
R atin
C My (4a
Re onfir )
cen m C
tly lea
Pla r rm
yed Fo
Lis file
t Pro
If li d
st i
sn ase
ot rch s
em Pu ovie m
nfir e
pty M Co emov
(4g R
)
rning
ngs (4h Wa
S etti )
vice
De
C
on H
d
Ad
tin om
ue e
fro
m
s
:
v ice
De
9. User Experience Guidelines
Version 1 published March 11, 2013 by Özgür Güneş (ozgurgunes@keyfruit.net) 9 of 66
Payment Process
(5d
)
n
io
SM
at
SS d
iv
sen
ct
ent
Re
A
S
M
S
(5c
)
SM
This is a preview version of the document.
ry p
Ent Prom
S
t
oin pt
Pa Mobi
ym le
E
Mo xit po
Please contact KeyFruit for further information requests.
ent vie int
Pla
w Pa yer
vie ym
Re (5a ent
) Su
cce
ssf
ul
t
en
m
ay
P
rd
Ca (5b
dit )
Cre
NOTES
w
vie
(5a) If credit card is valid, accept payment and Re
proceed to success message; otherwise rd
al Ca
Inin
return form and display error.
(5b) If Ininal card is valid, accept payment and
proceed to success message; otherwise
return form and display error. Pa
ypa
(5c) System sends SMS text message to user’s l
mobile recorded in profile and inform
user of message sent with a resend option
concurrently.
(5d) If user activated the account proceed to t
oin t
movie player; otherwise system provides ry p mp
resend option to user. Ent nt Pro
me
Pay
10. User Experience Guidelines
Version 1 published March 11, 2013 by Özgür Güneş (ozgurgunes@keyfruit.net) 10 of 66
Movie Details
NOTES
C gin
(6a) If user is logged in, proceed to (6b); otherwise, return
on P
Lo
tin ro
ue m
login form.
to t
:
p
(6b) Proceed to (6c) or (6d) whether if movie is free.
(6c) If required, prompt user to make activation; otherwise,
proceed to (6e).
(6d) If required, prompt user to make payment; otherwise,
proceed to (6e).
ting
Ra dated
(6e) If language or subtitle options are available, return
Up choices; otherwise, continue to movie player.
(6f) If user is logged in proceed to (6g); otherwise, return
ting
Ra aved login form.
e S (6g) Return error or success message whether the movie is
dat g
la :
P to
Up Ratin
r
ie ue
ye
already in watchlist.
ov tin
M on
C
w
Ne ting
Ra Ac SM
(6l) tiva S
tion le
(6e ilab es
) Ava guag
This is a preview version of the document.
L an
(6k tion t
(6m
) ) tiva mp
Ac Pro Pa to
ym ded list
ent Ad atch
W
l
C S
ai
on ha
et
te
tin re
(6c
D
Ra ovie
ue
) y in t
ie
to
ov
M
ead hlis
:
M
Please contact KeyFruit for further information requests.
(6j) Alr Watc
(6d (6g
) ent )
ym pt
(6b Pa Prom
are
Sh ovie )
M
(6a y ent
) (6f pla r
Dis Erro mm aved
) (6i) Co S
y
Pla ovie
M
ent
mm Form
Co
(6h
)
r
Late
tch
Wa
ite nt
m: Wr omm
e
fro 1a)
ue r ( b) C
tin cto r (1 e)
C on Sele lecto tor (1 (1f) ) (6h) If user is logged in, proceed to comment form;
• Se elec ctor r (1h i) otherwise, return login form.
• S ele cto r (1 j) nts
• S ele cto r (1 k) me (6i) If form is valid, save comment and return comments;
• S ele cto r (1 l) m
• S ele cto r (1 m) Co otherwise, return form and display error message.
• S ele cto r (1 n)
• S ele cto r (1 b) (6j) If user is logged in, proceed to Share; otherwise, return
• S ele cto r (2 d)
• S ele cto r (2 e) login form.
• S ele cto r (2 (3f)
• S ele cto on a) (6k) If user is logged in, proceed to (6l); otherwise, return
• S ele diti r (4 b)
• S on cto r (4 c) login form.
• C ele cto r (4 d)
• S ele cto r (4 e) (6l) Update or create rating whether user rated the movie
• S ele cto r (4
• S ele cto previously.
• S ele
• S (6m) System provides access to related movies.
•