Upload
katiemccurdy
View
455
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
Tutorials in Photoshop
COURSE
SI694, Winter 2010
SO’PHO’ TEAM
Annie Fang, Adrienne Klum, Katie McCurdy, Eric Mrak
Introduc2on Demo Design Tūtville Wrap-‐up Development
Introduction
Tūtville is an extension for Adobe Photoshop CS5 that helps people bookmark,
share and search for tutorials.
Introduc2on Demo Design Tūtville Wrap-‐up Development
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.
Introduc2on Demo Design Tūtville Wrap-‐up Development
Competitive Landscape
NET TUTS
LYNDA.COM PHOTOSHOP TUTORIALS SMASHING MAGAZINE
DELICIOUS ADOBE
• Online Tutorials – Hobbyists, Photoshop enthusiasts
– Professional sites
• Bookmarking tools
Introduc2on Demo Design Tūtville Wrap-‐up Development
Lo-Fi
Introduc2on Demo Design Tūtville Wrap-‐up Development
Wireframes
Introduc2on Demo Design Tūtville Wrap-‐up Development
Usability Testing
Lo-‐Fi
• 3 users, paper prototypes
Hi-‐Fi
• 8 users, func2oning prototype
Introduc2on Demo Design Tūtville Wrap-‐up Development
Key Features
• Search
• Filtering
• Ability to add/edit tutorials
• Select as a favorite • Recommenda2ons
• Commen2ng
• Flagging
• Create an account
• Login/logout • User profiles
Introduc2on Demo Design Tūtville Wrap-‐up Development
Use Cases
• Launches Photoshop CS5
• Wants to crop an image but does not know what tools to use
• Opens the Tūtville extension
• Searches for term “Crop”
• Finds 10 search results
• Selects the most popular and views the web tutorial in Photoshop.
Searching for Tutorial Adding Tutorials
• Searches the web for a Photoshop tutorial on red eye removal
• Finds and adds the tutorial to Tūtville using the bookmarklet.
• Opens the Tūtville extension in Photoshop CS5
• Finds newly added tutorial under user profile marked as a favorite
Introduc2on Demo Design Tūtville Wrap-‐up Development
Architecture
Introduc2on Demo Design Tūtville Wrap-‐up Development
Implementation
How it was built
• HTML & CSS
• Javascript
• PHP • MySQL
• Photoshop CS5
• Configurator 2.0
Introduc2on Demo Design Tūtville Wrap-‐up Development
Demo
Introduc2on Demo Design Tūtville Wrap-‐up Development
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.
You “Nancy”
Recommenda2ons
Introduc2on Demo Design Tūtville Wrap-‐up Development
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.
Introduc2on Demo Design Tūtville Wrap-‐up Development
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.
Introduc2on Demo Design Tūtville Wrap-‐up Development
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.
Introduc2on Demo Design Tūtville Wrap-‐up Development
Thank you. Questions, Comments?