VSCO Redesign — A Case Study


Overview

Navigation

  • Eliminated old navigation pattern because users found it confusing, which most likely hurts conversions rates
  • Replaced with intuitive navigation that most users are already accustomed to, eliminating the learning curve, lowering the barrier to entry, and raising conversion rates

Empty States

  • Replaced vague blank states with helpful, feedback-rich blank states

Visual and UI

  • Unified colors and graphic styles to provide cohesive visual language
  • Maintained consistent appearance and location for primary functions (e.g. Save, Publish)
  • Made interaction tweaks aimed at optimizing user engagement

Play with the prototype to the right or view it here.

 

My Role

  • Usability Testing
  • User Interviews
  • Journey Mapping
  • Wireframing
  • Prototyping

The Challenge

How can VSCO become more clear, functional, and easy to use, while increasing engagement in its online community? How can I maintain the aesthetic integrity of the brand while considering both user-friendliness and business goals? How can "create, discover, and connect on VSCO®" guide my decisions?

Background

VSCO is a free photo editing and sharing app. It offers both free and paid filters of high artistic quality and a community of photographers and artists with which to share it.

I was curious as to why its app store ratings are so low—only 3 out of 5 stars–and I wanted to fix it. Combing through the reviews since v.5.0 (the version with the major navigation/UI change) I began to see a pattern. Here are snippets of actual user reviews:

the app is just SO hard to use now that it really feels like a chore.
The swiping up to the camera capability is annoying, as I have accidentally done it about 20 times while either scrolling through my feed or my photos.
After all this time, if I’m still having a tough time using VSCO, I can’t even imagine picking it up for the first time.

The last user above addressed the most critical problem with the app—the barrier to entry is too high. The complicated interface intimidates new users, resulting in high drop-offs. And if the reviews above are any indication, long-time users may abandon the app for the same reason new users are.

Meanwhile, VSCO's blog posts and updates give the impression that they pride themselves in their unique space for artists, one that is easily distinguishable by ample white space, minimal interface, and reduction of all elements. However, they seem to struggle to strike a balance between the aesthetics of their platform and keeping their users happy.

Average... Value
Age 24
Familiarity with iPhones 7.5/10
Familiarity with the VSCO app 1.8/10

Users

I recruited undergraduate and graduate students from my university and a few non-student users. They were from varied backgrounds and are all young adults (ages ranged from 19-29) who use social media and take pictures on their phone, which seems to be VSCO's target audience*. In the table are a few key characteristics that I gathered about my user sample.

 

Interview Responses

"Do you currently or have you in the past used a photo editing and sharing app such as VSCO?"

"What are the apps?"
 

"Now that you’ve used VSCO, would you want to use it instead of the other apps you’ve used?"

Zero percent of the users I spoke to said they would choose VSCO over a competitor after taking it out for a test spin. 

Critical Issue — Navigation

The one thing that all users in all the flows had in common was that they could not get used to the navigation. That is, the striped circle that users can swipe on to navigate to different screens of the app. Some of them compared it to Snapchat's gesture-based navigation. Others were plain stumped (which is only fun at magic shows, not apps).

Here are all the issues that users had with the navigation:

  • they kept forgetting which way to swipe and had to check (tap) every time they wanted to switch navigate anywhere
  • they kept swiping up for the camera unintentionally (e.g. while browsing feeds)
  • they tapped on the striped circle because they thought it meant select
  • appeared to work like a joystick, but users can’t change the direction of joystick once they commit to a direction; they must let go and start again
  • striped circle element is redundant when they could swipe right or left anywhere on screen (but not up and down anywhere) >> inconsistent
 

Solution — Tab Navigation

Why I made this decision:

  • most users are already accustomed to this standard UI pattern, eliminating the learning curve, lowering the barrier to entry, and raising conversion rates
  • over time, the ease of use will keep users on the platform longer, lowering drop-off rates
  • both of these factors increase engagement and the likelihood that they will make a purchase in the filter store >> app's only stream of revenue

VSCO has been around since 2013 and they have never once introduced this navigation pattern. Despite the compelling reasons to convert to a conventional navigation menu, I think the resistance was an intentional choice. Their #1 competitor, Instagram, has always followed the tabbed-menu pattern. To stand out from Instagram's brand, I understand why they might avoid a similar navigation pattern.

However, users are usually confused rather than impressed by innovative navigation patterns. NNGroup notes that users are "far more impressed by great content that is attractively presented and easily accessed with familiar menus." This content is what allows VSCO and its online community to stand out from its competitor because it has three things that Instagram and other popular photo-sharing platforms do not:

 

  • Journals – photos enriched with stories and writing
  • Collection – a way to curate favorite photos (think: retweet for photos)
  • Filters – beautifully crafted, one-of-kind effects; this is possibly their #1 selling point

With these features already established, adding a unique but hard-to-use navigation pattern is overdoing it—and actually hurts their metrics.

Flows

GOAL — Create

User Goals

  • Capture images.
  • Import images.
  • Purchase or download a filter pack.
  • Edit an image using:
        - Preset filters and/or
        - Advanced settings
  • Publish an image and a Journal to one's profile.
  • Publish a collected image to one's profile.

Business Goals

  • Increase the purchase of filters
  • Make capturing and editing photos easy and enjoyable which then encourages the purchase of filters
  • Encourage users to generate content, because without content, there would be no online community.
  • Provide users the option to curate images and write journal articles alongside images, which is a kind of content that is unique to the brand.

More Efficient Editing Flow

Problem

  • Users had trouble finding the advanced settings menu, which was behind a sub-menu.
  • Users didn't know what the icons meant.
  • Users selected the wrong settings because they couldn't tell which icon corresponded to which setting. Some users only found a setting through multiple trial and errors, which was time-consuming.
  • When asked to find a specific filter, all the users failed (with the exception of one, who made a guess).
  • Users had difficulty telling filters apart and identifying which filters they had bought.

Solution

  • Explicit labels beneath each icon.
  • Make the advanced settings menu more discoverable by displaying it in a tab.
  • Quicker and easier navigation between filters and advanced settings, the two main menus in edit mode.
  • Moving the "Undo" and "All Changes" options to the "More" menu because they're less frequently used.
  • Clear labels for quick identification, and a line indicating when the filter list ended and the new one began.
  • Display purchased filters first for easy access.

More Intuitive Controls

Problem

  • Behavior of the slider (to control editing options) violated users' expectations of a typical slider. This slider was jumpy and "snapped" to the notches instead of sliding smoothly.
  • Users expected instant feedback while editing but changes to the image were delayed
  • Slider also didn't allow for jumping to settings by tapping on the number (e.g. user could not tap on the third notch to change the setting to '3.'

Solution

  • A slider that behaves like a slider
  • Smooth transitions* and instant feedback
  • Ability to tap on a notch to quickly jump to it
 
 

Improved In-App Camera

Problem

  • Photo disappears after users capture it in the app's camera. Some users expected it to appear as a thumbnail in the lower right corner. Others didn't even realize they took a photo because of the lack of feedback, so they repeated the task.

Solution

  • Photo minimizes into thumbnail after it's taken, providing both instant feedback and a shortcut to view their image
  • Thumbnail is located in a conventional place on the screen so users don't have trouble finding it

Further Suggestions

  • Develop a more clear and consistent icon language.
  • On photos, support conventional screen gestures that users are accustomed to, such as spreading and pinching for zooming in and out.

Smoother Publish Flow

Problem

  • Users were surprised to be taken through multiple steps and commented that publishing a journal took much more effort compared to publishing other content, such as a collected image.
  • Title of the screen was too ambiguous and lead users to believe the name of their image was "Publish Image."
  • Users were used to tapping a checkmark/circle at the bottom of the screen because that's where it was in every other instance of the app. They did not see the link at the top of the screen. 
  • Some users hesitated at the options X and O because they were unsure what the icons meant.

Solution

  • Streamline the publishing process into one step. Provide extra settings in a roll-down menu with the option to hide it for distraction-free publishing.
  • Add a new feature, Drafts, to allow users to save and continue their progress at another time.
  • Disambiguate the post's title by labeling its field "Add title."
  • A large, high contrast "Publish" button that's both hard to miss and clearly states the action of the button.
  • Everywhere else in the app's redesigned interface, the button to proceed has the same appearance and location. This consistency will increase efficiency during user flows and help them know what to expect.
  • X and O (cancel or confirm) is changed to the standard X and checkmark, for quicker comprehension and no hesitancy.

Helpful Empty States

Problem

  • Unhelpful empty states were the number one reason users were frustrated or failed to complete the tasks in this area.
  • Some empty states displayed commands or imperatives that sounded like call-to-action (CTA) links, but were not. Example: "Edit your images and publish to your profile."

Solution 

  • Helpful, feedback-rich empty states that:
        - provide actionable steps or links (CTAs)
        - show what content should be there
        - quickly onboard new users while staying out of the way of returning users

GOAL — Connect & Discover

User Goals

  • View images and Journals posted by other users.
  • Add images to one's collection.
  • Search and find specific users.

Business Goals

  • Encourage engagement within users' community.
  • Create a positive feedback loop, in which a user's interaction with others increases the likelihood that others will interact with them in return.

Familiar Saving & Publishing

Problem

  • Users did not understand the process for publishing an image to their collection.
  • Options for "Save image" and "Publish to profile" were hard to find.
  • Once found, users did not understand the difference, which is why they tapped the wrong buttons/icons or failed at the task.

Solution

  • Clarified link labels make it clear that both options add an image to their collection, but one is public while the other is private.
  • Put links in plain sight instead of hidden behind an icon that many users had mistaken for "Share."
  • Provide banner messages for instant feedback of actions.

 

Engaging Interactions

Problem 

  • In the Suggested pane, users were uncertain about which elements were usernames and thought they were simply "labels" of things they could follow. It was not clear that the links were usernames.
  • Users found it unsatisfying to tap on the Follow link, compared to other apps they were used to.
  • Interaction was too docile and was not dynamic enough to provide rewarding feedback.

Solution

  • Confusion may be caused by a lack of visual grouping principles (see Gestalt)
  • Sort the suggested users in a card style to make it clear that each user preview is grouped on a separate card.
  • Allow for quick toggle between Following and Suggested, which helps users discover suggested content, and eliminate the icon that users called the "sad face."
  • Users are slightly more inclined to tap an element if it looks like a button (follow), while they might not be as inclined to tap a word in plain text, or even ignore it (unfollow).
  • Added fun, engaging animations that reward users for favorable actions (i.e. the follow button expands and bursts)
  • This is a subtle way to persuade users to follow, which has a positive impact on user engagement, and  discourage unfollowing, which has a negative impact on engagement.
 

Further Suggestions

  • Among other things, users were confused about the difference between "Collection/Collected Images" and "Journal." For example, they didn't expect text to appear in a photo-sharing app, or they didn't expect photos to appear in something called a "journal."
  • Develop better language to describe this content. Ideas:

Collection
   - "Favorites," "Favorite Images"
   - "Curated Images"
Journal
   - "Photo Journal"
   - "Article"
   - "Story"

Clear State CHanges

Problem

  • Users became disoriented when navigating to the Explore screen because the background changed from black to white, with no other common element. The stark difference caused some to question whether they were still in the same app and others noted that it caused minor eye strain switching between such high contrast background colors.
  • Users tapped a photo expecting it to open into edit mode, but didn't realize that they needed to choose an option from the menu that appeared at the bottom. They missed the menu, possibly because a black menu on a black background makes the change nearly imperceptible.
  • Users did not know when they were in their public profile and did not know how to navigate out of it.

Solution 

  • Maintain a single background color across the app, using a neutral color to allow the content to shine.
  • Use differing colors only to indicate when action needs to be taken. A larger, higher contrast menu (colored bar on white background)

  • The icons in the global navigation bar are visually active, serving as you-are-here indicators.
  • Simplify the user's profile by having just one screen for the public profile and removing the redundant private one.

Further Suggestions

  • Users struggled to find what they needed for this task. Consider an onboarding flow that shows how to find essential features or an info/help link in the settings that covers basic app usage.
  • Users still didn't know what to expect in "Collection/Collected Images" and "Journal." See my suggestions for this.

What's Next?

Given that this was an independent exercise, the designs and proposals I made can only capture one facet of the entire ecosystem of its user experience. If I were a full time team member, I would have many more resources (as well as constraints) from research, marketing, and product that I'd need to consider to fully realize this app. Also, I only did some brief testing of my prototype but given more time, I would conduct another round of usability testing with it. I'd use the same tasks and ask the same questions, then compare the two sets of data.

 

I am not affiliated with Visual Supply Company. This study was put forth unsolicited, for educational purposes only.