1. COURSE
SI694, Winter 2010
SO’PHO’ TEAM
Tutorials
in
Photoshop
Annie Fang, Adrienne Klum, Katie McCurdy, Eric Mrak

2. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Introduction
Tūtville
is
an
extension
for
Adobe
Photoshop
CS5
that
helps
people
bookmark,
share
and
search
for
tutorials.

3. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Motivation
9
User
interviews
• Beginner,
intermediate,
advanced,
expert
Photoshop
users.
User
Interview
Findings
• Novices
don’t
know
where
helpful
tutorials
can
be
found
• People
oIen
don’t
know
what
they
need
• Photoshop
users
have
a
hard
2me
finding
appropriate
or
credible
tutorials
• People
have
trouble
re-­‐finding
informa2on
once
they
have
found
it.

4. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Competitive Landscape
• Online
Tutorials
– Hobbyists,
Photoshop
enthusiasts
– Professional
sites
• Bookmarking
tools
PHOTOSHOP
TUTORIALS
LYNDA.COM
SMASHING
MAGAZINE
NET
TUTS
DELICIOUS
ADOBE

5. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Lo-Fi

6. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Wireframes

7. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Usability Testing
Lo-­‐Fi
• 3
users,
paper
prototypes
Hi-­‐Fi
• 8
users,
func2oning
prototype

8. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Key Features
• Search
• Filtering
• Ability
to
add/edit
tutorials
• Select
as
a
favorite
• Recommenda2ons
• Commen2ng
• Flagging
• Create
an
account
• Login/logout
• User
profiles

9. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Use Cases
Searching
for
Tutorial
Adding
Tutorials
• Launches
Photoshop
CS5
• Searches
the
web
for
a
• Wants
to
crop
an
image
but
does
Photoshop
tutorial
on
red
eye
not
know
what
tools
to
use
removal
• Opens
the
Tūtville
extension
• Finds
and
adds
the
tutorial
to
• Searches
for
term
“Crop”
Tūtville
using
the
bookmarklet.
• Finds
10
search
results
• Opens
the
Tūtville
extension
in
• Selects
the
most
popular
and
Photoshop
CS5
views
the
web
tutorial
in
• Finds
newly
added
tutorial
under
Photoshop.
user
profile
marked
as
a
favorite

10. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Architecture

11. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Implementation
How
it
was
built
• HTML
&
CSS
• Javascript
• PHP
• MySQL
• Photoshop
CS5
• Configurator
2.0

12. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Demo

13. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Recommender System
• First
iden2fies
other
users
that
have
favorited
the
same
tutorials
as
you
have,
like
Nancy.
• Recommends
the
tutorials
that
Nancy
has
favorited,
that
you
have
not.
• The
system
also
takes
into
account
how
similar
you
are
to
Nancy,
and
ranks
the
recommenda2ons
by
popularity.
Recommenda2ons
You
“Nancy”

14. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Business & Sustainability
Business
Model
• Infomediary
model:
we
could
license
our
content
to
Adobe
• Community
model:
Adobe
provides
So’Pho’
as
a
service
Sustainability
Current
• Compelling
social
object:
Tutorials
• Community
driven
–
user
generated
content,
updated
content
• Useful
repository
• Flagging
content
• Pre-­‐populate
content
Future
• Mo2vate
contribu2on
• Use
analy2cs
• Check
for
broken
links
• Web-­‐based
site
to
work
in
tandem.

15. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Future Work
• Conduct
user
tests
to
evaluate
the
design
and
UI
of
Tūtville
.
• Resolve
issues
with
Flash
player
inside
Photoshop.
• Make
use
of
contextual
menu
inside
Photoshop
panel
(move
“Recommenda2ons”
into
this
menu).
• Create
companion
website
that
would
allow
people
to
access
their
bookmarked
tutorials
outside
of
Photoshop.
• Implement
social
networking
tools
onto
companion
website.
• Refine
account/
management
abili2es
of
tutorials
by
users
and
administrators.

16. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Lessons Learned
Benefits
of
user
tesBng
• Icon
ambiguity
• Lack
of
explana2on
on
the
bookmarklet
• CS
versioning
ComplicaBons
involved
in
implementaBon
• Constraints
of
hos2ng
environment
• Gegng
func2onality
to
work
on
different
builds
of
CS5
&
Configurator.

17. Tūtville Introduc2on
Design
Development
Demo
Wrap-­‐up
Thank you.
Questions, Comments?