DIGITAL DESIGN

VFILES

VFILES

VFILES is a startup bridging connections between youth culture and the fashion world.

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

BRAND

VFILES

ROLE

UX Design, Concepting, Production

YEAR

2013

The concept of VFILES was to create an online space where anyone can browse collections of fashion images, create unique collections, and upload images to share with a community. Within those basic guidelines there were tools to collaborate with other users, organize media, comment, and even shop. What we were attempting to create was technically challenging and the goal was to make this application simple enough for both 9 and 90 year olds to use.

VFILES is a startup bridging connections between youth culture and the fashion world. During my time there, it had broad ambitions with many areas of focus, the core being a media sharing platform. The concept was to create an online space where anyone can browse collections of fashion images, create unique collections, and upload images to share with a community. Within those basic guidelines there were tools to collaborate with other users, organize media, comment, and even shop. What we were attempting to create was technically challenging and the goal was to make this application simple enough for both 9 and 90 year olds to use.

The Concept

Vfiles is a homonym; VFILES (all caps) refers to the company/platform and vfiles (uncaped) refers to collections of images that users create and share on the platform. The platform was simple in concept; users would create collections of images called vfiles. the images could be uploaded by the users or added from other user’s vfiles. Users could also follow, like, and share vfiles as well as other users or tags. Any updates from users, vfiles, or tags would would then populate a user’s homepage feed. 

The interface was intentionally designed to play off of a kitschy web 2.0 aesthetic as a pushback from the flat design that was becoming standard at the time. The color palette of bright yellow and light grey was contradictory to what most online companies were doing at the time and even today.

Vfiles is a homonym; VFILES (all caps) refers to the company/platform and vfiles (uncaped) refers to collections of images that users create and share on the platform. The platform was simple in concept; users would create collections of images called vfiles. the images could be uploaded by the users or added from other user’s vfiles. Users could also follow, like, and share vfiles as well as other users or tags. Any updates from users, vfiles, or tags would would then populate a user’s homepage feed. Advanced options also allowed users to create shared vfiles and to make some vfiles or files private.


The interface was intentionally designed to play off of a kitschy web 2.0 aesthetic as a pushback from the flat design that was becoming standard at the time. The color palette of bright yellow and light grey was contradictory to what most other online companies were doing at the time and even today.

User Uploading

Creating your vfiles was supposed to be easy, fun, and visual. The UX flow was designed to be innovative for any user, utilizing drag & drop, understandable error states, and visual progress indicators. 

Creating your vfiles were supposed to be easy, fun, and visual. The UX flow was designed to be innovative for any user, utilizing drop & drop, understandable error states, and visual progress indicators. 

vfiles—user-uploading-02

The process for users to create vfiles is simply by relying on visual interface cues.

Page Headers

Vfiles was foremost an image based company and we wanted that to be highlighted in all aspects of the platform. We wanted users to be able to add cover images to their collection as well as their own profiles. One issue that we wanted to avoid was users not being able to see the cover once they scrolled below it, an issue we noticed on Facebook and Twitter profiles.

After playing with some ideas I drafted up some wireframes showing how we could utilize motion to convey that the cover image would always be present.

Vfiles was foremost an image based company and we wanted that to be highlighted in all aspects of the platform. We wanted users to be able to add cover images to their collection as well as their own profiles. One issue that we wanted to avoid, was users not being able to see the cover once they scrolled below it, an issue we noticed one facebook and twitter profiles.

After playing with some ideas I drafted up some wireframes showing how we could utilize motion to convey that the cover image would always be present.

vfiles – page header – wireframes
vfiles – page header – mockups

Reviewing wireframes with teams allows brings up issues that were missed or ways to improve designs. Issues were definitely caught in this phase and improved on. Once functionality was approved with the wireframes, I mocked up in full fidelity the animation aspect for a clear understanding. Additionally, I created a simply upload and crop process so cover images would look exactly how users would want.

Reviewing wireframes with teams allows brings up issues that were missed or ways to improve designs. Issues were definitely caught int his phase and improved on. Once functionality was approved with the wireframes, I mocked up in full fidelity addition the animation aspect for a clear understanding. Additionally I created a simply upload and crop process so cover images would look exactly how user’s would want.

header_animation_imac-cropped
vfiles-coverupload-laptop-copped

Search

Building a platform that can support an unlimited amount of rich media also means that it needs to be searchable. We decided early on that users should have the ability to search for all items within the VFILES platform. The issue I had to address was that vfiles were represented differently than images, which were different than videos, which were different from users and so on. These elements were not designed to live side by side. I devised a system in which search results would populate a landing area with top results and a tabbed interface for detail specific search. This also included the ability to filter and sort based on the user’s criteria.

Building a platform that can support an unlimited amount of rich media also means that it needs to be searchable. We decided early on that users should have the ability to search for all items within the VFILES platform. The issue I had to address was that vfiles were represented differently than images, which were different than videos, which were different from users and so on. These elements were not designed to live side by side. I devised a system in which search results would populate a landing area with top results and a tabbed interface for detail specific search. This also included the ability to filter and sort based on the user’s criteria.

search_animation_imac-cropped

The process for users to create vfiles is simply by relying on visual interface cues.

iOS App

It was decided that we should try and experiment with launching an iOS app. In the end, we just created a simple proof of concept wherein users would see their homepage feed represented in the app.

It was decided that we should try and experiment with launching an iOS app. In the end, we just created a simple proof of concept wherein users would see their homepage feed represented in the app.

vfiles ios app

The process for users to create vfiles is simply by relying on visual interface cues.

Homepage

In addition to a the content hub that a typical landing page would house, the VFILES homepage had to sell the concept of the company to potential new users. By far, the most design effort went into the layout and UI of the homepage. I evolved it over a period of a year with user expectations shifting as the goals of the company changed. The main focus was highlighting all of the different forms of content we had, the communities, the video series, and everything in between. The hero section evolved many times in order to show users how easy the site was to use.

In addition to a the content hub that a typical landing page would house, the VFILES homepage had to sell the concept of the company to potential new users. By far, the most design effort went into the layout and UI of the homepage. I evolved it over a period of a year with user expectations shifting as the goals of the company changed. The main focus was highlighting all of the different forms of content we had, the communities, the video series, and everything in between. Most importantly, showing users how easy the site was to use. To do this we utilized a grid and jammed as much content into the different sections within it. The hero section evolved many times.

vfiles homepage evolution

The evolution of the VFILES homepage

NEXT PROJECT