Tūtville is a system built for Adobe Photoshop CS5 that helps people bookmark, share and search for tutorials right inside the Photoshop workspace. The Tūtville system uses a Photoshop extension and browser bookmarklet to enable users to bookmark tutorials and see others’ bookmarks; it also allows users to favorite, comment on, and tag tutorials. Our team of four University of Michigan School of Information Human-Computer Interaction graduate students designed this tool following a user-centered, iterative design process, and we developed a working system that might serve as a prototype of future successful social Photoshop applications.
Introduction
Our team was tasked with coming up with an application or extension that would make Photoshop more ’social.’ Users have come to expect the ability to share content and communicate; at this point nearly all prominent websites have at least some social features. Desktop software products have fallen behind in this trend, perhaps largely because they have not traditionally leveraged Internet access (except perhaps to provide more extensive help documentation). Bringing the ’social web’ to Photoshop could potentially create value for both users and Adobe. It could help users get help, discover new features, and generally be more successful with Photoshop; and it could help Adobe build an even better sense of community around its products while promoting its product suite and obtaining valuable data about user behaviors and preferences.
Over the course of four months we developed Tūtville, a social bookmarking system for Photoshop tutorials. We outline our process, business and sustainability plan, and future work below.
Process
Interviews
Our first step was to interview nine Photoshop users of varying ability level: we interviewed two beginners, one intermediate user, four advanced users, and two experts. We were initially looking at a tool to help people create tutorials, so some of our findings were related to this topic; in general, our interviewees were not very excited about creating tutorials for others. They worried that they would not be able to provide a unique contribution, because there are already so many tutorial sites out there. However, we did find that people tended to go back to the same sites or resources over and over; it was important, especially to novices, to be able to ‘re-find’ helpful information later. Learn more on our interview results and interview findings pages.
Ideation
We had committed to designing a Photoshop extension that would allow for easy searching, retrieving, and collaboration around tutorials, so at this point we began the ideation process. We brainstormed the features that we wanted to include in the extension, narrowed those down based on feedback from our initial interviews, and began sketching the primary workflows. We took into account constraints related to creating an extension for Photoshop, such as limited real estate. We also took into account existing Photoshop conventions, like the top contextual menu, the built-in back button, and the existing tab structure. We came up with a feature set that we wanted our extension to include:
Search
Filtering
Ability to add/edit tutorials
Select as a favorite
Create an account
Login/logout
User profiles
Recommendations
Commenting
Flagging
Early screen sketches and notes
Competitive landscape
In order to understand the space in which our tool would live, we identified both direct and indirect competitors. We looked at a variety of tutorial based websites and found two types of Photoshop tutorials: those that were made by creative professionals, and those that were posted by more casual users who had varying levels of Photoshop expertise. The tutorials made by professionals tended to have updated tutorials with more recent versions of Photoshop, and the videos and documentation appeared to be credible. The amateur tutorials tended to be posted on content sharing sites like YouTube, and these tutorials varied in quality and relevance. Generally, professional and self-taught Photoshop enthusiasts made these tutorials as a hobby. To identify indirect competition, we also looked at bookmarking sites like delicious, Stumbleupon and Digg to compare how they displayed information and to understand the relationship between users, bookmarks and original content.
Use cases
We imagined that our extension could be used by two groups of people: those who were searching for tutorials, and those who wanted to add tutorials to the system to save them for later. These two use cases demonstrate each group’s needs and anticipated behaviors.
Searching for tutorials: As a user is engaged in a Photoshop task, she finds she needs help with cropping a document effectively. She clicks into our extension and searches for a related tutorial. The resulting list contains many promising tutorials. She clicks the first one, which is also the most highly rated, and this opens up its detail page. She reads what other users have written about the tutorial, and the opens it; it pops up in a new window, and she uses it to successfully finish her project. She favorites the tutorial so that she can access it later.
Adding tutorials: A self-taught user has relied on Photoshop tutorials in the past to help her learn the tool’s intricacies. She often goes to the same sites over and over, and she finds that she sometimes has a hard time re-finding tutorials that have helped her in the past. She finds the extension and begins to store her favorite tutorials within it, using both the bookmarklet and the extension itself to add tutorials; she can then access them from inside Photoshop and easily view them side-by-side with her work. She doesn’t have to worry about losing one behind the other, which normally happens when she is trying to look at tutorials in a browser window.
Low-fidelity prototype
After the first few sketching iterations, our team collectively drew a complete version of our low-fidelity prototype for usability testing. We chose a paper prototype because people are willing to give more feedback on prototypes when they don’t look finished; interface elements are perceived as being malleable and easily changed. We tested three users to learn how well they were able to understand our concept, navigate between screens, and perform tasks. We found that people generally had positive feedback and thought the extension would be useful; we did make some wording and interface changes after these tests to help people better understand and navigate through the tool. See more on our low-fidelity screens, tests and test findings milestone.
High-fidelity prototype
We created high-fidelity wireframes using Omnigraffle. During this process we updated our screens based on the results of our low-fidelity usability testing sessions. The detailed wireframes helped us finalize design features and flesh out all the possible use cases and interactions. Once we established our user interface requirements we were able to begin development.
Application architecture
We created diagrams to help finalize our system’s general architecture, relational database, and screen interactions. See documentation of these diagrams. Through the course of our project, we made some changes to the architecture and technical specifications of the application we originally proposed. While we had originally planned to build the application using Flash/Flex and actionscript, we found that the learning curve for successfully implementing our extension using these technologies was too steep. We therefore switched to creating the extension using HTML, CSS, and PHP to communicate with our MySQL database. We created a panel for Photoshop (CS5) using Adobe Configurator and embedded the HTML page within this panel. We styled the page so that it appeared native to Photoshop, and during this phase we also decided to change the name of our extension to Tūtville.
To compliment our extension and make it easier for users to add tutorials, we decided to create a browser bookmarklet. Users can access the bookmarklet link from Tūtville’s promotional webpage, and they can add this link to their bookmarks. Then, when on a given tutorial webpage, they can simply click the bookmarklet link to pre-fill the page’s URL and title. After adding a few tags, as appropriate, they can submit the tutorial to the Tūtville database and subsequently access it from within Photoshop.
Usability testing
We were able to validate our design by conducting eight brief usability tests. We asked users to perform common tasks like interpret the Tūtville homepage, add a tutorial from the bookmarklet, add a tutorial from the extension, search, add favorites, and create accounts. Our users gave us fantastic feedback, and we made many changes after these tests. First, we made changes to the Tūtville promotional page to make it more clear that users were meant to add tutorials instead of search for them; the page had some large input fields, and it looked more like an advanced search feature than a bookmarking tool. We spent time developing the text on this page, added a new ‘What is Tūtville?’ section, and added links to enable users to download the plugin and create accounts. We also removed some input fields that were confusing to users; for instance, we had originally asked users to input the version of Photoshop that the tutorial was meant to be used with, and to signify whether the tutorial was meant for Mac or Windows users. This ended up being confusing for people because they tended to add their own information instead of the tutorial information (e.g., “Oh I use CS3 on a Mac”).
We also made significant changes to the icons we were using for ‘favoriting’ and ‘flagging’ a tutorial. During usability testing, we realized that a majority of our users had a difficult time understanding the function of the star icon. Users thought that the star and the number of times it was favorited referred to a typical multi-star rating system. A few users suggested that using a heart would resolve the confusion because it better represents liking or loving a tutorial. Therefore, to clarify icon ambiguity, we changed to a heart icon to represent the action of ‘favoriting’ a tutorial. Some users also had a difficult time understanding the flag icon, which at the time was in the shape of a small red flag. This icon was created to help users moderate inappropriate content that was added by others. A few users thought that the flag should be used to select a tutorial as a favorite, while one other user commented that she understood what the icon was for but thought that it was cute and wanted to click on it. Clearly the flag icon was not communicating the intended ‘inappropriate content’ message, so we changed the icon to a more cautionary symbol – a circle with a slash through it.
We changed the ‘favorite’ and ‘flag’ icons after usability testing.
Aside from these major fixes, we altered many smaller details: we added more confirmation messages and made our confirmation messages more logically styled and located. We made it more clear that tags should be separated by commas as they are entered, and we added more feedback to help people understand the system’s status (such as highlighting and adding an arrow icon next to the selected date or profile filter).
Final development
We worked on the final development of Tūtville over a period of approximately five weeks. One team member was particularly skilled in development, and one was particularly skilled in graphic and web design; the other two team members worked in supporting design and development roles. One pair worked largely on the MySQL and PHP implementation, and the other worked on graphic design, CSS and HTML implementation. Our team roles were complimentary, and we were able to accomplish a lot in a short period of time because of this.
Some images of our final screens
During the development process we faced a number of constraints using CS5, which was still in development itself during our project. We collaborated with an Adobe representative to report bugs and to ask about the feasibility of certain design features. We learned that certain bug fixes were only compatible with the latest version of CS5 and Configurator 2.0, so throughout our development process we had to repeatedly uninstall and update our software. For example, we initially had issues displaying pop-up links with HTML code provided by Adobe. The pop-window prevented users from performing actions outside the window and would crash Photoshop. However, we were able to resolve this issue after we updated our Configurator 2.0 build. We came across another problem dealing with contextual menus. Every Photoshop panel has a default menu with contextual options that are based on that panel’s function. We had originally planned to use this menu to house some of our functionality (like Recommendations and being able to see all of the tutorials you have submitted), but we learned during development that this menu was not available to us. We therefore removed the custom filters and relocated some functions, like Recommendations, to the main interface. We also found a minor issue in CS5 regarding the display of dropdown menus. After testing the HTML widget in both Configurator 2.0 and Flex we learned that dropdowns menus do not work in CS5. In order to work around this constraint, we removed all dropdown menus from our forms and used radio buttons and open textfields to gather the same information from users.
The Tutville extension (left) and bookmarklet.
Recommendation system
To help users discover new tutorials that would be helpful for them, we implemented a simple recommendation system. This system works by finding people who are ’similar’ to you; that is, they have favorited one or more items that you have also favorited. The system tries to find those people who are most similar to you, and then it recommends tutorials that those people have favorited that you have not yet favorited.
Our recommendation system is still somewhat rudimentary; it displays five recommended tutorials, showing the newest entries first. It could be further developed to help people get more nuanced and appropriate results. We could take into account a user’s behavior and path through the system and recommend more timely and contextually appropriate tutorials. For example, if a user clicks on a lot of tutorials that are about the ‘brush’ tool in a certain period of time, perhaps the recommendation system could recommend more such tutorials during that same time period. The system could be smart enough to stop recommending those tutorials when the user’s behavior changes and they start looking at other types of tutorials.
Business model
There are a few potential outcomes that would indicate different business models for our Tūtville widget. We could license our content to Adobe under the Infomediary model; Adobe would pay us for access to the content and data generated by our tool and thus learn valuable data about user behavior and needs. We could also sell our Tūtville tool to Adobe so that they can integrate it into Photoshop, and follow the Community business model. Rappa says, “The viability of the community model is based on user loyalty…Revenue can be based on the sale of ancillary products and services or voluntary contributions; or revenue may be tied to contextual advertising and subscriptions for premium services.” The community model provides Adobe with many sources of monetary and non-monetary value:
It allows Adobe to advertise its brand and products on the Tūtville bookmarklet page
Adobe could also creatively incorporate contextual advertisements into the Tūtville tool
Sites like Lynda.com could pay Adobe for referrals that came from Tūtville.
Adobe may also allow customers to accrue points through participation in the system, and these points may be used toward discounts on Adobe products.
Tūtville would engage customers with Photoshop in a new way and provide a new sense of Photoshop’s utility; this could go a long way toward fostering customer loyalty and word-of-mouth advertising.
There are additional business opportunities if we move this tool outside of Photoshop and onto the web. We have considered this further since we wrote our original business and sustainability plan; because we developed Tūtville as a small website, it would be even easier for us to extend this tool to a web-based service. This expands certain business opportunities, especially for advertising, which is typical for such a site. See our original business model and sustainability plan.
Sustainability
We are taking a variety of measures to sustain Tūtville as a business. We discussed this in some detail in our original business and sustainability plan, but we will outline some of the key features and discuss future directions. Most successful social networks have a compelling social object, and we believe that Photoshop tutorials are a compelling social object that will motivate user contribution. Apart from the tutorials themselves, perhaps categories or topics of tutorials could drive contribution; for example, if there is not a satisfactory tutorial about the blur tool, a user might be motivated to create one, put it online, and bookmark it within Tūtville.
Our extension is community driven, and it relies on users to add new tutorials and manage content. We hope that users will ’selfishly’ add their favorite tutorials to Tūtville (via the bookmarklet or through the extension), thereby increasing the chances that others will discover and use these tutorials. Having other users mark your submitted tutorial as a ‘favorite’ might also encourage people to submit high-quality tutorials and tag them so that they will be findable. Once Tūtville has been implemented, we can analyze usage and determine if we need additional incentives to encourage users to contribute content. We also rely on users to flag inappropriate content; currently the flagging system is not very robust, and this is a potential area for future work that we discuss in more detail below.
We would also want to enable more social interactions on Tūtville, both through the website and the extension. Fostering a community of active, engaged participants would help keep Tūtville’s content fresh and high-quality, and we believe it would create more value for Tūtville’s users.
Lessons learned
Through the course of our project we learned lessons relating both to building a Photoshop extension and to the process we followed. One thing we did well in implementing our extension was start development early; we worked steadily for about five weeks on the final implementation, and we needed every day of that time. We ran into some constraints during this phase, like hosting environment limitations that crippled our attempts to integrate an out-of-the-box recommender system. We also faced many challenges dealing with different builds of CS5 and Configurator; some of our features only worked with a specific build, and many of the system bugs we encountered were resolved by installing the newest build. There were also the occasional hiccups where files were overwritten because of our lack of a versioning system; future ambitions will make use of systems such as SVN or CVS. Because our team started development early, we were able to resolve all of our implementation issues and have a working version of our tool ready by the end of our course.
We also found that usability testing was vital to our final product’s success. As outlined previously, during usability testing we learned some very valuable information about what was difficult for our users to understand. We believe that the changes we made to our bookmarklet page and extension as a result of those sessions will make Tūtville more intuitive.
Future work
There are a few steps we’d like to take to ensure that Tūtville is a competitive and successful product. We are interested in conducting usability tests with our latest design to evaluate both the extention and the bookmarklet. Observing how users interact with the extension while designing in Photoshop will provide us with valuable information that will improve the user’s experience of Tūtville. We want to specifically test whether users are more inclined to add tutorials through the bookmarklet or the extension interface, whether users tend to reference their own favorites versus others’ favorites, and how users interact with the web-based tutorials once they’re displayed in Photoshop.
There are also a few Photoshop issues we would want to resolve before we release this tool to the public; right now, Flash videos and content do not display within the pop-up window that contains tutorials. This is problematic, because many tutorials are in video form; and we need them to display properly if our tool is going to be most helpful. Aside from this, we would like to make use of the pull-down contextual menus that currently exist in the top right corner of every Photoshop panel. This would help de-clutter our design and allow us to house less-used functions in this menu.
We would also like to create a companion website to work in tandem with our Photoshop extension that would allow people to access their bookmarked tutorials from anywhere on the Internet. The website could be more than just a bookmarking tool; it could also serve as a social networking site centered around the Photoshop community. This would add dimensionality to the project and foster relationships between Photoshop users; the companion site would provide our tool with the screen real-estate to support the rich user collaboration that Tūtville currently lacks.
Part of that collaboration might center around managing and improving tutorial entries. Our current system consists of flagging inappropriate tutorials and then pushing flagged items to the bottom of the search results and tutorial listings. Once a tutorial has been flagged by two or more users they stop appearing in search results entirely. The only way to reach the tutorial then is to see it in a member’s profile who has favorited it or by navigating to the tutorial’s URL directly in a browser. This is an imperfect strategy, because it doesn’t fully remove inappropriate tutorials from the tutorial pool. It also makes appropriate tutorials vulnerable to being suppressed by malevolent flaggers. Future work would involve building a strategy for community management so that sub-par tutorial listings could be improved, and spam, duplicates, and inappropriate content could be taken out of the database. This might entail enabling certain power users to be administrators, and providing incentives for cleaning up the content.
Finally, there are opportunities to incorporate more features into our extension or create interesting pairings between our extension and other Photoshop extensions. For instance, our extension could integrate social features such that users might be able to see, for example, who else is looking at the same tutorial as them; users might be able to chat, share images from the project they’re currently working on, and perhaps even help one another with small tasks. In our class, two other groups worked on projects related to Photoshop this semester – one created a Photoshop contest website, and one created an extension that could save ’sets’ of commands and then run them later. It could be interesting to see how the Photoshop ecosystem might function if these extensions were all live, working together. Perhaps users communicating through the Tūtville chat function (which has yet to be built) could suggest a command set or go collaborate on a Photoshop competition. There are endless possibilities for collaboration and mash-ups of various extensions and tools, both within Photoshop and in the greater sphere of Adobe products (Illustrator or InDesign, for example).
Conclusion
Over the course of a semester our team built Tūtville, a system that uses a Photoshop CS5 extension and browser bookmarklet to help users bookmark and discover Photoshop tutorials. We developed the Tūtville concept and designed the tool’s functionality by following a user-centered design process that included user interviews and two rounds of usability testing; we believe that this focus on users’ needs and habits will contribute to Tūtville’s eventual success. We hope that traditional desktop software products will continue to explore possibilities for social feature integration, as we believe this will greatly enhance learning and enjoyment of these tools.
Final Report
Abstract
Tūtville is a system built for Adobe Photoshop CS5 that helps people bookmark, share and search for tutorials right inside the Photoshop workspace. The Tūtville system uses a Photoshop extension and browser bookmarklet to enable users to bookmark tutorials and see others’ bookmarks; it also allows users to favorite, comment on, and tag tutorials. Our team of four University of Michigan School of Information Human-Computer Interaction graduate students designed this tool following a user-centered, iterative design process, and we developed a working system that might serve as a prototype of future successful social Photoshop applications.
Introduction
Our team was tasked with coming up with an application or extension that would make Photoshop more ’social.’ Users have come to expect the ability to share content and communicate; at this point nearly all prominent websites have at least some social features. Desktop software products have fallen behind in this trend, perhaps largely because they have not traditionally leveraged Internet access (except perhaps to provide more extensive help documentation). Bringing the ’social web’ to Photoshop could potentially create value for both users and Adobe. It could help users get help, discover new features, and generally be more successful with Photoshop; and it could help Adobe build an even better sense of community around its products while promoting its product suite and obtaining valuable data about user behaviors and preferences.
Over the course of four months we developed Tūtville, a social bookmarking system for Photoshop tutorials. We outline our process, business and sustainability plan, and future work below.
Process
Interviews
Ideation
Early screen sketches and notes
Competitive landscape
Use cases
We imagined that our extension could be used by two groups of people: those who were searching for tutorials, and those who wanted to add tutorials to the system to save them for later. These two use cases demonstrate each group’s needs and anticipated behaviors.
Searching for tutorials: As a user is engaged in a Photoshop task, she finds she needs help with cropping a document effectively. She clicks into our extension and searches for a related tutorial. The resulting list contains many promising tutorials. She clicks the first one, which is also the most highly rated, and this opens up its detail page. She reads what other users have written about the tutorial, and the opens it; it pops up in a new window, and she uses it to successfully finish her project. She favorites the tutorial so that she can access it later.
Adding tutorials: A self-taught user has relied on Photoshop tutorials in the past to help her learn the tool’s intricacies. She often goes to the same sites over and over, and she finds that she sometimes has a hard time re-finding tutorials that have helped her in the past. She finds the extension and begins to store her favorite tutorials within it, using both the bookmarklet and the extension itself to add tutorials; she can then access them from inside Photoshop and easily view them side-by-side with her work. She doesn’t have to worry about losing one behind the other, which normally happens when she is trying to look at tutorials in a browser window.
Low-fidelity prototype
High-fidelity prototype
We created high-fidelity wireframes using Omnigraffle. During this process we updated our screens based on the results of our low-fidelity usability testing sessions. The detailed wireframes helped us finalize design features and flesh out all the possible use cases and interactions. Once we established our user interface requirements we were able to begin development.
Application architecture
We created diagrams to help finalize our system’s general architecture, relational database, and screen interactions. See documentation of these diagrams. Through the course of our project, we made some changes to the architecture and technical specifications of the application we originally proposed. While we had originally planned to build the application using Flash/Flex and actionscript, we found that the learning curve for successfully implementing our extension using these technologies was too steep. We therefore switched to creating the extension using HTML, CSS, and PHP to communicate with our MySQL database. We created a panel for Photoshop (CS5) using Adobe Configurator and embedded the HTML page within this panel. We styled the page so that it appeared native to Photoshop, and during this phase we also decided to change the name of our extension to Tūtville.
To compliment our extension and make it easier for users to add tutorials, we decided to create a browser bookmarklet. Users can access the bookmarklet link from Tūtville’s promotional webpage, and they can add this link to their bookmarks. Then, when on a given tutorial webpage, they can simply click the bookmarklet link to pre-fill the page’s URL and title. After adding a few tags, as appropriate, they can submit the tutorial to the Tūtville database and subsequently access it from within Photoshop.
Usability testing
We were able to validate our design by conducting eight brief usability tests. We asked users to perform common tasks like interpret the Tūtville homepage, add a tutorial from the bookmarklet, add a tutorial from the extension, search, add favorites, and create accounts. Our users gave us fantastic feedback, and we made many changes after these tests. First, we made changes to the Tūtville promotional page to make it more clear that users were meant to add tutorials instead of search for them; the page had some large input fields, and it looked more like an advanced search feature than a bookmarking tool. We spent time developing the text on this page, added a new ‘What is Tūtville?’ section, and added links to enable users to download the plugin and create accounts. We also removed some input fields that were confusing to users; for instance, we had originally asked users to input the version of Photoshop that the tutorial was meant to be used with, and to signify whether the tutorial was meant for Mac or Windows users. This ended up being confusing for people because they tended to add their own information instead of the tutorial information (e.g., “Oh I use CS3 on a Mac”).
We also made significant changes to the icons we were using for ‘favoriting’ and ‘flagging’ a tutorial. During usability testing, we realized that a majority of our users had a difficult time understanding the function of the star icon. Users thought that the star and the number of times it was favorited referred to a typical multi-star rating system. A few users suggested that using a heart would resolve the confusion because it better represents liking or loving a tutorial. Therefore, to clarify icon ambiguity, we changed to a heart icon to represent the action of ‘favoriting’ a tutorial. Some users also had a difficult time understanding the flag icon, which at the time was in the shape of a small red flag. This icon was created to help users moderate inappropriate content that was added by others. A few users thought that the flag should be used to select a tutorial as a favorite, while one other user commented that she understood what the icon was for but thought that it was cute and wanted to click on it. Clearly the flag icon was not communicating the intended ‘inappropriate content’ message, so we changed the icon to a more cautionary symbol – a circle with a slash through it.
We changed the ‘favorite’ and ‘flag’ icons after usability testing.
Aside from these major fixes, we altered many smaller details: we added more confirmation messages and made our confirmation messages more logically styled and located. We made it more clear that tags should be separated by commas as they are entered, and we added more feedback to help people understand the system’s status (such as highlighting and adding an arrow icon next to the selected date or profile filter).
Final development
We worked on the final development of Tūtville over a period of approximately five weeks. One team member was particularly skilled in development, and one was particularly skilled in graphic and web design; the other two team members worked in supporting design and development roles. One pair worked largely on the MySQL and PHP implementation, and the other worked on graphic design, CSS and HTML implementation. Our team roles were complimentary, and we were able to accomplish a lot in a short period of time because of this.
Some images of our final screens
During the development process we faced a number of constraints using CS5, which was still in development itself during our project. We collaborated with an Adobe representative to report bugs and to ask about the feasibility of certain design features. We learned that certain bug fixes were only compatible with the latest version of CS5 and Configurator 2.0, so throughout our development process we had to repeatedly uninstall and update our software. For example, we initially had issues displaying pop-up links with HTML code provided by Adobe. The pop-window prevented users from performing actions outside the window and would crash Photoshop. However, we were able to resolve this issue after we updated our Configurator 2.0 build. We came across another problem dealing with contextual menus. Every Photoshop panel has a default menu with contextual options that are based on that panel’s function. We had originally planned to use this menu to house some of our functionality (like Recommendations and being able to see all of the tutorials you have submitted), but we learned during development that this menu was not available to us. We therefore removed the custom filters and relocated some functions, like Recommendations, to the main interface. We also found a minor issue in CS5 regarding the display of dropdown menus. After testing the HTML widget in both Configurator 2.0 and Flex we learned that dropdowns menus do not work in CS5. In order to work around this constraint, we removed all dropdown menus from our forms and used radio buttons and open textfields to gather the same information from users.
The Tutville extension (left) and bookmarklet.
Recommendation system
To help users discover new tutorials that would be helpful for them, we implemented a simple recommendation system. This system works by finding people who are ’similar’ to you; that is, they have favorited one or more items that you have also favorited. The system tries to find those people who are most similar to you, and then it recommends tutorials that those people have favorited that you have not yet favorited.
Our recommendation system is still somewhat rudimentary; it displays five recommended tutorials, showing the newest entries first. It could be further developed to help people get more nuanced and appropriate results. We could take into account a user’s behavior and path through the system and recommend more timely and contextually appropriate tutorials. For example, if a user clicks on a lot of tutorials that are about the ‘brush’ tool in a certain period of time, perhaps the recommendation system could recommend more such tutorials during that same time period. The system could be smart enough to stop recommending those tutorials when the user’s behavior changes and they start looking at other types of tutorials.
Business model
There are a few potential outcomes that would indicate different business models for our Tūtville widget. We could license our content to Adobe under the Infomediary model; Adobe would pay us for access to the content and data generated by our tool and thus learn valuable data about user behavior and needs. We could also sell our Tūtville tool to Adobe so that they can integrate it into Photoshop, and follow the Community business model. Rappa says, “The viability of the community model is based on user loyalty…Revenue can be based on the sale of ancillary products and services or voluntary contributions; or revenue may be tied to contextual advertising and subscriptions for premium services.” The community model provides Adobe with many sources of monetary and non-monetary value:
There are additional business opportunities if we move this tool outside of Photoshop and onto the web. We have considered this further since we wrote our original business and sustainability plan; because we developed Tūtville as a small website, it would be even easier for us to extend this tool to a web-based service. This expands certain business opportunities, especially for advertising, which is typical for such a site. See our original business model and sustainability plan.
Sustainability
We are taking a variety of measures to sustain Tūtville as a business. We discussed this in some detail in our original business and sustainability plan, but we will outline some of the key features and discuss future directions. Most successful social networks have a compelling social object, and we believe that Photoshop tutorials are a compelling social object that will motivate user contribution. Apart from the tutorials themselves, perhaps categories or topics of tutorials could drive contribution; for example, if there is not a satisfactory tutorial about the blur tool, a user might be motivated to create one, put it online, and bookmark it within Tūtville.
Our extension is community driven, and it relies on users to add new tutorials and manage content. We hope that users will ’selfishly’ add their favorite tutorials to Tūtville (via the bookmarklet or through the extension), thereby increasing the chances that others will discover and use these tutorials. Having other users mark your submitted tutorial as a ‘favorite’ might also encourage people to submit high-quality tutorials and tag them so that they will be findable. Once Tūtville has been implemented, we can analyze usage and determine if we need additional incentives to encourage users to contribute content. We also rely on users to flag inappropriate content; currently the flagging system is not very robust, and this is a potential area for future work that we discuss in more detail below.
We would also want to enable more social interactions on Tūtville, both through the website and the extension. Fostering a community of active, engaged participants would help keep Tūtville’s content fresh and high-quality, and we believe it would create more value for Tūtville’s users.
Lessons learned
Through the course of our project we learned lessons relating both to building a Photoshop extension and to the process we followed. One thing we did well in implementing our extension was start development early; we worked steadily for about five weeks on the final implementation, and we needed every day of that time. We ran into some constraints during this phase, like hosting environment limitations that crippled our attempts to integrate an out-of-the-box recommender system. We also faced many challenges dealing with different builds of CS5 and Configurator; some of our features only worked with a specific build, and many of the system bugs we encountered were resolved by installing the newest build. There were also the occasional hiccups where files were overwritten because of our lack of a versioning system; future ambitions will make use of systems such as SVN or CVS. Because our team started development early, we were able to resolve all of our implementation issues and have a working version of our tool ready by the end of our course.
We also found that usability testing was vital to our final product’s success. As outlined previously, during usability testing we learned some very valuable information about what was difficult for our users to understand. We believe that the changes we made to our bookmarklet page and extension as a result of those sessions will make Tūtville more intuitive.
Future work
There are a few steps we’d like to take to ensure that Tūtville is a competitive and successful product. We are interested in conducting usability tests with our latest design to evaluate both the extention and the bookmarklet. Observing how users interact with the extension while designing in Photoshop will provide us with valuable information that will improve the user’s experience of Tūtville. We want to specifically test whether users are more inclined to add tutorials through the bookmarklet or the extension interface, whether users tend to reference their own favorites versus others’ favorites, and how users interact with the web-based tutorials once they’re displayed in Photoshop.
There are also a few Photoshop issues we would want to resolve before we release this tool to the public; right now, Flash videos and content do not display within the pop-up window that contains tutorials. This is problematic, because many tutorials are in video form; and we need them to display properly if our tool is going to be most helpful. Aside from this, we would like to make use of the pull-down contextual menus that currently exist in the top right corner of every Photoshop panel. This would help de-clutter our design and allow us to house less-used functions in this menu.
We would also like to create a companion website to work in tandem with our Photoshop extension that would allow people to access their bookmarked tutorials from anywhere on the Internet. The website could be more than just a bookmarking tool; it could also serve as a social networking site centered around the Photoshop community. This would add dimensionality to the project and foster relationships between Photoshop users; the companion site would provide our tool with the screen real-estate to support the rich user collaboration that Tūtville currently lacks.
Part of that collaboration might center around managing and improving tutorial entries. Our current system consists of flagging inappropriate tutorials and then pushing flagged items to the bottom of the search results and tutorial listings. Once a tutorial has been flagged by two or more users they stop appearing in search results entirely. The only way to reach the tutorial then is to see it in a member’s profile who has favorited it or by navigating to the tutorial’s URL directly in a browser. This is an imperfect strategy, because it doesn’t fully remove inappropriate tutorials from the tutorial pool. It also makes appropriate tutorials vulnerable to being suppressed by malevolent flaggers. Future work would involve building a strategy for community management so that sub-par tutorial listings could be improved, and spam, duplicates, and inappropriate content could be taken out of the database. This might entail enabling certain power users to be administrators, and providing incentives for cleaning up the content.
Finally, there are opportunities to incorporate more features into our extension or create interesting pairings between our extension and other Photoshop extensions. For instance, our extension could integrate social features such that users might be able to see, for example, who else is looking at the same tutorial as them; users might be able to chat, share images from the project they’re currently working on, and perhaps even help one another with small tasks. In our class, two other groups worked on projects related to Photoshop this semester – one created a Photoshop contest website, and one created an extension that could save ’sets’ of commands and then run them later. It could be interesting to see how the Photoshop ecosystem might function if these extensions were all live, working together. Perhaps users communicating through the Tūtville chat function (which has yet to be built) could suggest a command set or go collaborate on a Photoshop competition. There are endless possibilities for collaboration and mash-ups of various extensions and tools, both within Photoshop and in the greater sphere of Adobe products (Illustrator or InDesign, for example).
Conclusion
Over the course of a semester our team built Tūtville, a system that uses a Photoshop CS5 extension and browser bookmarklet to help users bookmark and discover Photoshop tutorials. We developed the Tūtville concept and designed the tool’s functionality by following a user-centered design process that included user interviews and two rounds of usability testing; we believe that this focus on users’ needs and habits will contribute to Tūtville’s eventual success. We hope that traditional desktop software products will continue to explore possibilities for social feature integration, as we believe this will greatly enhance learning and enjoyment of these tools.
References
Michael Rappa, “Business Models on the Web.” http://digitalenterprise.org/models/models.html
Jyri Engestrom, “Why some social network services work and others don’t — Or: the case for object-centered sociality” http://www.zengestrom.com/blog/2005/04/why-some-social-network-services-work-and-others-dont-or-the-case-for-object-centered-sociality.html
Final Presentation Slides
Tutville Final Presentation