VSCO for 2017

cover_page
 
 

Tweaks to make VSCO even better

VSCO is well-known for its editing prowess. The editing tools and filters are in fact, in my opinion, better than what most photo editing apps have to offer. Most of the tools are free except for the paid filters. In recent years, they have also decided to include a social aspect to it, allowing you to discover content created by other VSCO users.

A redesign in 2016 drew some flak from its users as it was hard and not intuitive to use, I stopped using it for awhile because it was so confusing. The new design in 2017 was much better in improvements. I still felt that some navigational aspects could be done better. Below is a persona that I have created based on VSCO users. I also did interviews and usability testings by asking selected users, to navigate and complete a series of tasks in the current VSCO app.

 

persona
 
 
 

Based on the tasks that the users were asked to do. One thing stood out: They were often confused by some of the icons on a screen and thus uncertain of what to click on. Some users only managed to accomplish the task via trial and error.

I decided to make some subtle tweaks to the mobile app to make it easier to comprehend and navigate. VSCO’s vision is based on “Create. Discovery and Connect”, I’ll look to improve the application based on the company’s vision and let each part be true to itself.

The current app already has three tabs at the bottom for navigation, which is a solid foundation to start.

1.Create

When the app starts up, the camera function is launched in a split screen style along with what VSCO calls the “Studio”. Studio allows you see your current images (those being imported), along with the option to filter through those images. You can also import images and shop for filters from there.

Take a look at the screenshots below. 

Figure 1.1 shows the split screen view between Studio and the Camera. Figure 1.2 shows what it’s like with the Studio expanded.

 

 
 Current design of Studio

Current design of Studio

 
 

The problem is this: Different elements on the page are fighting for space on a screen that is already small. When the “Studio” function is expanded, it obstructs the view of the images, making it hard for the user to see his or her grid of images.

The re-design:

Wouldn’t it be better if users are presented with just the information that they need based on what they are doing? e.g. if they are filtering through their images in Studio, there isn’t a need for the camera function to be present. This helps save valuable screen space, eliminate other things that do not need to be present and giving users an immersive experience in seeing their photos.

Figure 1.3 and Figure 1.4 show the re-designed “Create” section that maximizes the available space on the screen. In Figure 1.3, user can have a full view of his or her grid of photos. In Figure 1.4, when the studio is expanded, it expands to show the filtering words and layout options, all without obstructing the view of the photos.

 
 Redesigned Studio Section

Redesigned Studio Section

 
 
Create_small .gif

 

2.Discover

Discovery of photos and other users take place under the left icon (shaped like a globe) on the bottom navigation bar. Upon launch, users are greeted with his or her feed of photos based on the people they follow.

Ehhh…Where am I now?

When the user starts navigating around, it’s easy to lose track of where he or she is, it’s also partially due to the fact that there are no cues or any indication to tell you where you are.

When users were given a task to find new users, add someone from their contacts, navigate to their feed, they take a while as they had to make sense of where they are within the app. They had to browse through whatever that was presented to ensure they are on the correct screen. Some users adopted the trial and error practice as they were abit unsure which icon to click on to perform the tasks.

Figure 1.5 shows the user flow of navigating around the Discover tab (the globe icon).

 
 Figure 1.5 (Current User Flow in Discover tab)

Figure 1.5 (Current User Flow in Discover tab)

 
 

My re-design for the Discover portion is to make some of the functions more obvious to the users. I also shifted some other functions to be under the “Connect” portion as their functions are more suitable under that section. More details of that in the later part of this writing.

Figure 1.6 and 1.7 show the new and redesigned Discover tab.

Users can now easily switch between browsing through their feed or to discover other users. Because of the text-based navigation, users can now know where they are in the application. From the Discover portion, users can also easily follow other users or go straight into their profile page. The search function is still available at the top right corner if users wish to do a search for specific content.

 
 Re-designed Discover tab gives you the ability to switch between Discover and Feed

Re-designed Discover tab gives you the ability to switch between Discover and Feed

 
                          Switch between Discover and Feed easily

                         Switch between Discover and Feed easily

 

3.Connect and Profile page

The final part would be for users to connect. The difference between Discover and Connect is that the former is about finding people from all around the world whom you do not know, and the latter is about finding and adding people you already know.

 

The Problem

The current app places everything under the Discover tab (globe icon). You can refer to Figure 1.5 for what I mean. When the task was to locate my Following and Followers stats, the users, without much thought, clicked on the smiley face icon at the bottom right of the navigation bar. Based on their mental model, they already assumed they should find Followers and Following stats there. They were surprised when they couldn’t. When asked about why they chose to navigate there, the common answer was the icon’s position and graphic led them to think that’s the profile page, and profile page is normally where you find such information regarding followers/followings.

 

The redesign

To align with the mental model of the users, the re-designed profile screen now brings Follower/Following info to be under it. The “Images”, Journal”, “Collection”, and “Favourites” tabs have also been made larger and more easier to tell which tab you are in. The function to import your contacts is shifted here as well.

“Favourites” used to be represented by an icon at the top left, but now it sits along side the other tabs, making the design to be more consistent.

Figure 1.8 shows the old Profile screen. Figure 1.9 shows the new Profile screen.

 
 Figure 1.8 (old design) | Figure 1.9 (New Design)

Figure 1.8 (old design) | Figure 1.9 (New Design)

 
 
Profile_Tabs.gif
 
 

What does this button do? Merely re-post?

 

 

 

 

 

 

 

 

 

During the testing, users correctly identify it as the “Repost” button. However, it actually does another job of adding the reposted picture to the user’s Collection. In any interactions, users should be informed about the results of their actions. To make the interaction known to the users, I have decided to add text together with the icons to let users know exactly what the buttons do. Figure 2.0 shows the current app build, Figure 2.1 shows the buttons with their intended actions below them.

 Figure 2.0 (old design) | Figure 2.1 (new design, icons are now labelled)

Figure 2.0 (old design) | Figure 2.1 (new design, icons are now labelled)

 
 

Final thoughts

I love VSCO for their simple and clean aesthetics. However, it shouldn’t affect the UX for its users and future users-to-be. Sometimes, minor tweaks in the right direction and for a good purpose can have a major positive experience for the users. When users are satisfied, it gives them a reason to keep on using your product and services, and in some cases, they refer your product to their friends. Thanks for reading!