VSCO Suite for Mac OS X
Concept to bring simple image editing and organising to Yosemite and El-Capitan
Every one who uses iPhone for photography wouldn’t have missed VSCO cam in the appstore. Its one of the best apps out there with unique filters and all of the important image editing tools. But what makes it unique is the inspirational community.
As a guy who takes more photos in VSCO, my VSCO photos are sometimes more than the camera roll photos. Even though VSCO syncs them to all devices, sometimes what I really want is to transfer them to my mac and see the photos and edit them.
Cut to the chase.
What am I proposing? VSCO suite for OS X. It’ll be single app to sync and organise all your photos, also edit your photos with the same filters that you already been using in VSCO cam. Additionally you can upload your photos to your Grid , and write photo Journal based on them.
Initial Screen
In mobile, lots of features of VSCO cam works better when you are signed in. But they don’t block you from taking photos or navigating to other tabs. I took the same approach, but this time I made an initial screen of what they can do with this app and with clear call to action on getting started. This will lead to sign in screen where they can sync with their purchases, photos etc.
Device Sync
New tab on the left side bar keeps the eye on your device. The device sync identifies your device and shows important information that you would like to see while syncing. One of the features with syncing is that you can free up some space in your phone. I always felt I have free space in my mobile device until I get a popup asking to free up some space. (16gb iPhone users can relate). If I check which app is using up all the space, VSCO will be in that list. The reason is that it stores all the raw photos for future editing. I felt this has to be addressed by VSCO suite.
So Three main uses of Device Sync are:
- To show users how much free space their device has.
- Sync all the new photos or selectively pick photos and sync to your Mac.
- Option to delete photos in device or in Mac.
Additionally users can see number of photos to sync in left side bar in the device tab. This will greatly help users if they are in different screens
Library
Your synced photos appear here. The library also allows you to import photos from your computer. From here its easy to share to grid, make journals out of your photos. Double clicking on any photo opens photo in edit mode. Single click on a photo will select it and will show options to share, delete, and more
From here user can group photos based on time, location, unedited, edited and by colour hues. Remember the photo of bright red flower you took long time ago? grouping by colour hues will help you find that photo much faster.
Edit your photos
Image editing involves lots of skills, but over the past few years mobile apps simplified image editing and made it easy to use to lot of users. Taking that in consideration, image editor in VSCO suite can be simple editor that looks consistent with their mobile editors. With this interface, I tried to achieve following things in my interface:
- There is no learning curve for the users to edit photos. Its familiar interface with familiar controls
- All their filters — free & purchased filters will be available for use.
- Tools and filters will be synced and all your edits are saved on both devices.
The Right pane offers all the image editing tools. Search bar at the top allows you to quick search the tools. The left pane lists all the filters. All your purchased filters are synced. Drag and reorder all these filters. Similarly you can drag and reorder editing tools in right pane
Undo near top left also offers list of changes that you made to these photos and it’l help users to go back to any state in the history. At any point you can close and go back to your library
Store
Store is the place to discover new collection of filters and how they are being used by the community. Instead of giving marketplace look, VSCO cam in mobile focuses on full width imagery and small write up about each filters and shows bunch of photos in which that particular filter has been applied. I brought the same approach here and maintained consistency. Additionally Purchases is available at the top right corner. This will give quick access to the users to all the filters user had purchased before.
Explore
VSCO has a very talented community. They handpick photos for their grid and users can read up on brilliant photo journals. Here, Explore lets the user to explore the Grid photos, Journal and see their feed.
Journal
Photo journals are the best way to tell an amazing story through photos. As much as its fun to create best journals through mobile app, it’l be quite hard to type all the content in mobile. So when I listed out features for VSCO suite, first thing came to my mind was journal. It provides a wide empty canvas to let the user go creative and make beautiful stories with their photos. In the right pane users can see control over publishing the journal and deleting it. At the bottom Sync will tell whether the journal’s pictures are updated or not.
Loading
If we are talking about bigger screens, then bigger grids of photos and more things to load. Even on latest and powerful macs, it takes sometime to build thumbnails, download necessary things to show the user. This is the loader that VSCO cam already uses it during initial setup. I thought it’l be consistent to use the same loader for Suite also.
The Design
Icon
When an app goes from mobile to desktop, the first question pop is why not use the iOS icon. But OS X Human Interface Guidelines says
“If you’re developing an OS X version of an iOS app, you should not reuse your iOS app icon. ”
Yosemite iconography encourages two types of icons. One being semi skeuomorphic one, rotated by 9º and another being circular icon with consistent lighting and soft shadows. VSCO was always about minimalism and zero skeumorphism. So I went with the second practice. This way its consistent and recognisable for mobile app users. Unlike iOS, OS X icon sizes can go lower sizes. Using a black & white logo like in iOS will be very hard to identify in those small sizes, So I picked the coloured version of VSCO logo for this icon.
Layout
When I started the design of the VSCO, I realised the App may soon be released for different platforms apart from OS X. So I split the layout in to three parts.
- Left Pane: The left bar will navigation
- Center Section: Content
- Right Pane: Tools and other information
Left Pane will give keep the navigation upfront and gives clear hierarchy to the content to its right. During Editing photos, Left pane acts on primary use case — accessing filters.
Centre Pane keeps the content in the centre and will get un diverted attention from user. Different screens need different kind of layout, but I gave a consistent padding and enough white space to keep aesthetically consistent with the VSCO Cam mobile app.
The Right pane offers tools, meta information including sync status and quick access to updates. In VSCO mobile, Updates come when you swipe right on any screen. It gives the latest information on what is happening in the VSCO community. Keeping search at the top helps the users to quickly search people, journals and much more.
Style Guide
After quick research and testing, I found Proxima nova is VSCO’s type. I realised they tend to use uppercase type across the app to give a modern look. I realised It also helps them in differentiating ‘i’ and ‘l’ on small sizes. I brought the same consistent typography and their colour hues to VSCO suite. As much as I tried not to use pure black, It looks less distracting as a background while editing photos with Fade & Contrast tools.
Resources and Credits
Design is based on VSCO cam app. All rights belongs to Visual Supply & Co.
Apple Human Interface Guidelines.
Beautiful Photos belong to Jaymantri.
Apart from filters for VSCO Cam, Visual Supply & Co’s business runs on VSCO Films for Adobe Lightroom. I doubt they will enter in to market where they already have professional customers. This concept just explores what if they do and how it may look.
Thanks for reading this case study
I am Suganth, Product Designer from India. If you like to talk to me more about this project or anything else, just mail me at suganth@live.in
