VSCO
While a student at Cornell University, I conducted a product design case study on the popular photo editing and social platform, VSCO. Throughout this process, I analyzed app navigation, usability, and user interfaces. I built low-high fidelity prototypes based on my recommendations. The full blog can be found on Medium.
VSCO goes above and beyond in quality and quantity with its extensive features, including editing and publishing. However, it is only occasionally explored because it takes time and patience to fully understand the app as it is tedious to explore.
Editing and Shopping in the Lime-Light
Originally I thought this problem could be solved simply by familiarizing the icons. Thus users would recognize the iconography and navigate with ease through the app. But I quickly realized that this ignores the overarching problem: what is VSCO? It is a virtual world full of creative artists, access to extravagant filters meant to mimic the timeless 35mm film classics, and all the editing options a heart could desire. Why not bring this more to light?
The Overarching People Problem:
People want to edit their pictures more extensively, but do not know the correct procedures. (When to saturate, when to increase contrast)
People are asking questions they cannot answer themselves. “What is the shopping feature?” and “How do I brighten this picture?”, and “Where can I search for other artists like myself?”
VSCO has the capabilities of acting as a teacher as well as providing a platform for other users to act as teachers as well. The creative editing combined with the VSCO sharing community allows this to happen. I turned to an approach that would best explicitly expose the features users want and need.
Implementation of the Navigation Bar:
I chose to adapt a Navigation Bar as it was the most well-received among users and the most intuitive to operate. It also left room for creative decision in regards to which features should be so prominent. I used Sketch to design the medium and high fidelity prototypes.
Medium Fidelities:
Keeping VSCO’s Signature: While aesthetics are something to be kept in the back of the mind during research and brainstorming, I couldn’t help but make sure I held true to unique VSCO’s nature as I planned to implement the all too familiar navigation bar. The features chosen for the Navigation Bar exemplified the business goals of the company. Here is access to the artistic community (Explore), here is a catalog of all your beautiful pictures, and here is a collection of beautiful filters.
Effortless Editing
During Medium Fidelities, I focused on distinguishing each editing opportunity so the user could approach the process like a tutorial. If they did not recognize the Shopping Icon in the Navigation Bar, they were more likely to assimilate it to purchasing of filters as it appears also during editing. I reiterated this feature to make sure a vital component of VSCO’s app did not go unnoticed.
Connecting to the Community
A problem I faced during User Research was how people were unaware that VSCO was a social media platform. I believe that the community of photographers and artists that share their passion on the app is one of the most important aspects. Users agreed. Thus I made sure to distinguish between who you follow, and who you should follow — similar to the Instagram Newsfeed and Explore page so users had something to relate to.
High Fidelities:
Vacant Visuals: VSCO high fidelities were a lot of fun. The app is incredibly unique and minimal. It has lots of open white space which forces the eye to focus on the beautiful pictures displayed on the screen. The placement of these pictures is often abstract — I tired to mimic this in my high fidelities.
Final High Fidelity User Flow
Full Animated Prototype
Conclusion:
A need for a modern and effortless editing app is constant. VSCO provides a mature and professional learning experience for all those who participate. Emphasis on their special features like editing and shopping is important to raise the awareness of the unfamiliar user. A navigation bar is easily recognized and can lessen the learning curve for new users.