VSCO Cam Usability Test
Improving the usability of creativity.
Visual Supply Company’s VSCO Cam app is a sleek yet powerful mobile photo editing app packed with features. It has 4.5 stars in Apple’s App Store and in Google Play. They have a cult user following and their Grid section (photo feed — viewable in app and online) consistently hosts some of the most beautiful photos I’ve ever seen. On May 6, 2014 they successfully raised $40M in Series A funding.
Objective
Identify usability issues and pain points w/ 6 essential tasks. Three of which were sourced directly from the App Store Editor’s notes.
Visual Supply Company’s latest photography sensation has a spectacular range of tools for avid photographers and amateur shutterbugs alike. The no-frills design makes it easy to apply filters, adjust exposure and share your creations with others. — App Store Editor’s Notes
To test these keys features I ran a guerrilla usability test on 5 people from varying backgrounds. The only requirements for participants were that they had not previously used VSCO Cam, that they had a iPhone or Android phone, and that they were familiar with photographic terms such as filter, crop, and exposure.
Test Tasks
- Take a photo.
- Edit the photo by applying a color filter to it.
- Crop the photo.
- Adjust the photo’s exposure.
- Add a photo into the app from phone’s photo library.
- Share a photo to a social network.
Analysis
Patterns and surprises…oooh, ahhh.
To capture and later synthesize the data, I had users download and launch the app on their own phones. Then I video recorded their screens using my phone. Once the study concluded I went back and re-watched the videos to pull out and identify patterns. The sticky-notes visually represent my findings. The x-axis at the top are the individual users. The y-axis on the left represent each task. The colors underneath each user represent the number of task attempts per user.
Note: In the following screens you will see green arrows and red arrows. The green arrows outline the correct task flow and the red arrows signify the usability errors encountered at each stage. The text is a bit difficult to read in these resized screens. Looks ok on a desktop screen.
Task 1: Take a photo
Success! Everyone I tested had no problem taking a photo within the app. We’re off to a great start!
Task 2: Edit the photo by applying a color filter to it
Here we encountered the first set of problems. Not one user accomplished this task on the first attempt. With the photo visible, the users continually selected the wrong icons as denoted by the red arrows.
To complete this task, the user must first select the photo in order to display the edit menu. Without knowing that, the users are left wondering how they can filter the photo so they naturally begin clicking about the UI — which takes them out of the task flow.
However, once users have selected a filter (far right image) VSCO Cam does a great job of funneling the users into the next task by limiting the available choices.
After settling on a filter, the user has two choices:
1. Double tap the filter to bring up a menu allowing the user to adjust the strength of the filter
or
2. Click the nested menu bar — the correct choice in this case
Tasks 3 & 4: Crop the photo & Adjust the photo’s exposure
Once the user taps and brings up the nested menu the flow begins to disintegrate. Here the user can make 5 choices, 4 of which that will disrupt the flow.
Task 5: Add a photo into the app from phone’s photo library
This task proved to be surprisingly difficult. Although the “add photo” bar is quite large and spans the entire screen, users were again drawn to the bright white icons at the top and bottom. Several users brought up the point that dim and gray buttons usually symbolize a button that is disabled or unavailable.
Task 6: Share a photo to a social network
After stumbling through the other tasks, clicking through just about every layer of the UI, most of the users were familiar enough with the app that they were easily able to locate the share icon and complete this final task. That being said, without internal data, it’s difficult to gauge what percentage of real-life users would stick around long enough after struggling with the initial tasks.
Findings: 2 Key Issues
Issue 1: The app has a nonlinear task flow and offers no suggestions as how to use it.
The real design challenge for VSCO Cam is this: How do you onboard and retain new users in an app that is feature rich and has a nonlinear task flow?
As mentioned in the App Store’s testimony, VSCO Cam’s users range from amateur to professional. Regardless, they all start out as VSCO Cam novices upon launch. This complexity can be a detriment initially, but also extremely powerful, and likely what makes this app the gold standard for on the go mobile photo editing. The difficulty comes in retaining those new users who might otherwise become frustrated and jump ship.
Unlike Instagram or other more simple photo apps, VSCO Cam is a nonlinear app that allows for several concurrent user flows. Instead of taking a photo, then filtering it, and then sharing it, the app allows users to take multiple flows with a variety of different variables.
One task took a user 29 attempts before successful completion. When prompted to think out loud and asked what he would do if I weren’t here, the user replied:
If you weren’t here, I would be like fuck this and just drop this — I’m just speaking honestly. — User
Design Suggestion:
For first time/new users, provide an overlaid explanation or walkthrough on top of the UI to educate users to key functionality.
Yes, it’s not sexy, but if done right it will make things immediately clear. Follow current best practices and allow users to exit out of the tutorial should they like. Furthermore, allow them to access it again if they later decide that perhaps they shouldn’t have skipped it.
Currently, VSCO Cam does have tutorial videos on their blog, but this doesn’t provide any value to the user who just downloaded the app.
When does this work best: For the simple core tasks — i.e. take a photo, apply a filter, and share.
When not to use this: When trying to explain every feature within the app. For that, VSCO Cam does a great job and provides succinct tutorial videos on their blog.
Issue 2: The visual hierarchy is misleading.
Let’s revisit tasks 2 & 5. Here the cognitive load of new users increases dramatically. They are presented with a handful of choices in the form of iconography and as mentioned above the UI doesn’t do much help by visually calling out what should or rather could happen next. As a result, the users made a lot of errors.
Design Suggestion:
Dim or lower the contrast of the top icons. Those icons open organizational dialogues that aren’t of any relevance to most users at this point. Without a huge photo library to manage (yet), users don’t really need to be able to resize or select images by variables such as flagged, edited or unedited. Definitely a useful feature later, but not now.
The bottom left menu icon is highly relevant on all levels so I think it makes sense to leave it as is.
The “add” photo plus sign icon from task 5 could be changed to match the current contrast of the menu icon. Several users mentioned that the icon appeared greyed out or in a state that would suggest it was unavailable.
Next Steps:
These suggestions are my own based on a limited usability study with 5 strangers. I would love to see actual app data to validate some of the patterns I’ve encountered. Next steps would be to iterate, test, rinse and repeat.
I’m not affiliated with VSCO Cam or Visual Supply Co.. This study is put forth unsolicited, in an effort to create value for users and for VSCO Cam.
I’m currently a UX designer shipping products under the guidance of Laura Klein and Kate Rutter @tradecraft in San Francisco. Happy to hear from you! Contact Me
