After we committed to designing a Photoshop extension that would allow for easy searching, retrieving, and collaboration around Photoshop tutorials, 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.
Constraints
real estate availability
Photoshop conventions
top contextual menu
adding content
deleting content
back button
tab structure
pop-ups
Features
Search
Filtering
Add/Edit Tutorials
Select as a Favorite
Create an Account
Login/Logout
Profile
Recommendations
Commenting
Flagging
After the first few iterations, we decided to each redraw a specific section to flesh out all the possible features and functionality. When we regrouped, we each shared our wireframes and verbally talked through the details of our interface: labels, order, features, and interactions between states. Taking the best features from multiple iterations, we drew a complete version of our lo-fi for usability testing.
We decided to create our lo-fi using paper prototypes. We chose this methodology because studies have shown that people are willing to give more feedback on paper prototypes when don’t look finished. Users have more freedom to interact with prototypes because they are perceived as being malleable, where interface elements can be easily moved and changed.
Lo-fi Test Findings
We have begun testing our lo-fi prototype with users; we tested two users in the ‘intermediate’ skill level category, and will test a broader range of people in the next few days.
Testing goals:
Find out if people could navigate easily between screens
Learn if the native Photoshop navigation made sense to non-experts
Find out if our navigation terms make sense
We asked users to perform tasks like search for and comment on a tutorial, interpret screens and menus, and create an account. Here are some things we learned:
Successes
People had positive feedback, understood the basic concept, and thought the extension would be useful.
Generally, people understood the drop-down menu options and overall navigation between screens was pretty easy.
Creating an account was smooth
Challenges
Photoshop convention navigation was hard – people were not sure what the bottom icons meant. We will need to make sure the tooltips are informative. Here are some real photoshop icons and our drawn icons:
There was slight confusion about my submissions vs my favorites
People could not figure out how to edit profile, so we will add an ‘edit’ link to the screen.
One person wasn’t sure if they were logged in, so we will add small user name indication to top right.
It wasn’t immediately obvious to click the star to favorite an item. We need a different treatment of star so that it invites clicking.
In the ‘add tutorial’ screen, we need to indicate which fields are required and what ‘video’ means, as people were uncertain about these things.
Other changes to make
We decided to order tutorials with the most recent first, by default, with any new changes or comments counting as ‘most recent activity’ and bumping them to the top
Need a timestamp – with date tutorial added, most recent activity
Need a BB (Big Button) on the tutorial detail page to get people to open the actual tutorial.
The # below the favorite star should shrink if it gets very large
Add ‘recommendations’ or ‘my recommendations to the main menu
Move flag icon to the tutorial, out of the bottom icon bar.
Remove gender and birthday from profile. Irrelevant!
Adobe ID would be best for login.
We want to continue to pursue a browser plugin for ease of adding tutorials.
Lo-Fi
Due February 18, 2010
Ideation
After we committed to designing a Photoshop extension that would allow for easy searching, retrieving, and collaboration around Photoshop tutorials, 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.
Constraints
Features
After the first few iterations, we decided to each redraw a specific section to flesh out all the possible features and functionality. When we regrouped, we each shared our wireframes and verbally talked through the details of our interface: labels, order, features, and interactions between states. Taking the best features from multiple iterations, we drew a complete version of our lo-fi for usability testing.
We decided to create our lo-fi using paper prototypes. We chose this methodology because studies have shown that people are willing to give more feedback on paper prototypes when don’t look finished. Users have more freedom to interact with prototypes because they are perceived as being malleable, where interface elements can be easily moved and changed.
Lo-fi Test Findings
We have begun testing our lo-fi prototype with users; we tested two users in the ‘intermediate’ skill level category, and will test a broader range of people in the next few days.
Testing goals:
We asked users to perform tasks like search for and comment on a tutorial, interpret screens and menus, and create an account. Here are some things we learned:
Successes
Challenges
Other changes to make