VSCO.



A case study of one of my favorite photo editing apps.



I have a love/hate relationship with VSCO. Its new design language and recently redesigned mobile app screams exclusive hipster appeal, but while coveted by artists, musicians and creatives alike, the app itself is littered with so many usability issues that it’s polarized a community of loyalists who have long used their products from the beginning.


VSCO means Visual Supply Company.


Current state of the VSCO iOS app (2016)


I decided to do a 5-day case study of the VSCO app as a design challenge. Can you go through an entire design process in 5 days? If there’s a will, there’s a way—and no better place than to start with the user:
Speak.
Human behavior is often diverse, unpredictable and variable. To start, I conducted a task analysis with 12 individuals from varied demographics to test general usability.
Survey.Using insights from my interviews, I distributed surveys through social media regarding VSCO app’s top usability issues.
Evaluate.Don Norman and Shneiderman have always been my go-tos for heuristic evaluation. I tested the app against these criteria and noted areas of great, okay and not-so-good.

Is it a sausage? A party invitation? An AR code?


Interview notes.



Screenshot of VSCO’s Grid.

Findings:

    • 75% of users said navigation to be the biggest usability challenge for the app.
    • 83% of users had difficulty understanding the main ‘joystick’ UI that controls navigation.
    • Many described the ‘joystick’ to be ‘clunky’ and ‘slow,’ while others described it as ‘interesting’ and ‘looks cool.’
    • 92% of users understood how to edit photos (a feature that didn’t utilize the ‘joystick.’)
    • 75% of users didn’t understand what ‘O’ represented (it means save within the app.)
    • Save/Exit location varied from screen to screen (sometimes on top, sometimes on the bottom).
    • Despite its issues, iconography and language was thorough and consistent.
    • Users felt there was little value/reward in participating in VSCO’s Grid, Journal, or collecting images.
    • Users enjoyed the niche aesthetic, many comparing it to competitors such as Snapchat and Facebook.
Opportunities:

    • Introduce a more familiar navigation paradigm to move to different areas within the app.
    • Provide more affordances to indicate which space you are in and how to return the previous screen.
    • Keep photo editing paradigms intact since that seems to be working for users.
    • Consider replacing the ‘O’ with a more familiar ‘check’ icon for Save.
    • Give more immediate/obvious reward for participating in VSCO’s Grid.
    • Retain the brand as much as possible since it is a market differentiator.
While tempting, the goal was not to redesign the whole app. It was to improve on the single largest problem plaguing the app: Navigation. More specifically:


First time and repeat users of VSCO’s iOS app become confused by ambiguous navigation controls and icons on the home screen, causing an overall lower usage of photo capture and uploading to services such as VSCO Grid.



How can we improve so that VSCO can retain their new brand while being more successful at driving users to these core areas of the app and increasing engagement with VSCO Grid?

Home screen. After doing an inventory of the app’s architecture and UI patterns, it was apparent the ever-confusing ‘joystick’ had to go (or at least its intended usage had to). Since most users I spoke with understood the icon to be a camera (myself included), it felt appropriate to treat it as one. I also decided this was an opportunity to place the camera roll as an icon right below it for 1) closer proximity to photography controls and 2) to free up space on the top portion of the screen for additional UI controls previously hidden within the ‘joystick.’ Additionally, the size of the hero Profile module at the top of the screen was reduced to allow more room for photos at a glance and a subtle gradient was added to the bottom each screen to improve visibility of the bottom navigation.

Interaction. I borrowed heavily from popular social media paradigms which resonated with users. Snapchat, being popularized by a similar group of highly active social media millenials, felt like an appropriate source to lean on for inspiration. Moving from different areas of the app should be done via swiping of the entire screen canvas, not just reserved to a button. Though after some consideration, having both options available (gesture and an explicit button) made the most sense ensure proper wayfinding and discovery.
Iconography. The most ambiguous icons were the ‘face,’ ‘joystick’ and ‘o.’ The ‘face’ icon felt more representative of a personal profile than a camera control. As mentioned earlier, the ‘joystick’ felt more appropriate as a launchpad to take a photo. The ‘o’ was replaced by a more reliable check icon.

Generally speaking, the lack of affordance to move back to a previous screen was alarming. After seeing so many users struggle to get back to the Home screen from the Grid view, I felt adding more familiar ‘back’ arrows would help with navigation and give a more obvious orientation to which part of the app they were in.
Orientation. The current direction in which the canvas planes animate makes sense for the exception of Profile. If we use Home screen as the main centor anchor, other planes to the left (Grid) and right (Profile) can flow linearly (similar to Snapchat), and temporal states such as Filter, Store, Take Photo, Import Photo, and Edit Photo can continue to animate as modal states from the bottom.

Invision: ahoy, it’s a prototype!

(Load on your phone for a sweet clickable, swipable prototype!)

Measuring success:

    • VSCO is in a phase now where optimizing growth is at its upmost importance. An increase in users means an increase in potential revenue and individauls to market their brand/products to.
    • A/B test the current app and prototype side-by-side and compare task success rates, with a specific lens on navigation.
    • Measure usage post-launch for overall photo capture and uploading to services such as VSCO Grid.


Potential future areas of improvement:

    • Give users more control (provide different view and filtering options) and ways to interact with VSCO Grid in a meaningful way.
    • Consider mixing in personalized VSCO Grid content based on the types of images a user has added to his/her Collection.
    • Consider teaming with mirrorless camera manufacturers to build the capability of sending photos wirelessly directly to the VSCO app.
    • Consider building into iOS 10 extensions for users that wish to use the native camera roll to manage photos.