Challenge 2: Wireframing

VSCO, Photo and Video Editor

On this IronHack challenge, I chose to continue with the app I used on a previous exercise. VSCO is a great app for editing, adding cool filters to photos and most recent videos.

miSchma
3 min readMar 4, 2021

I find it very pleasant to the eye and just fun to use, as it also works as a “low-key” social platform where one can not only edit and save edited pictures but also post them, check other user’s posts and repost them (something like a retweet function).

I have had the app on my phone for a long time already and in the past, have also used the paid version, which gives you access to tons of filters and other features. However the free version works very well too and there is still a good number of filters to use.

In this challenge, the goal is to “reverse engineer” a task from the app using wireframing, which means creating a simple visual representation of the app flow. In this case, I chose the next task and its flow :

Edit a picture on VSCO

Flow to edit a picture on the App.

To start editing, we just need to open the app and we will find ourselves in the Studio section. From there, we have access to our phone pictures and can choose one by selecting it.

After that, we can choose and apply filters, save and post (or both) the newly edited picture, and even add a little description text to it. In this case, I chose both options and after pressing “Post” (“Veröffentlichen” on the screenshots) I was sent to my feed, where my latest picture is placed on top.

Wireframing, wireframe, wire…

As I mentioned, I like this app because of its very simple and minimalistic looks and colors. However, when it came to the point of actually having to start working on the wireframe, I must say I had a difficult time avoiding wanting to add details, shadows, icons, etc.

I believe the app and this specific task go to the point as it is very visual, there’s very little text, some dropdown menus, toggles, and straight-forward buttons. On the other side, it does have a couple of special -very cute- icons that can be a reason for confusion for a new user and, in this case, bring some doubt to a wireframing-newbie like me.

About the tools I used, I chose Figma, which I find great and feel comfortable using.

Flow, flow, flow, and more flow.

I know I still have a lot to work on, especially figuring out which details, text, icons should stay on a wireframe. Here I decided to leave the “Studio” title as it is one of the basic and most essential sections/options on the app, such as the “Feed” section (on the last screen).

Overall I do think this app‘s minimalistic structure helps the user not to be distracted and go to the point in an enjoyable way, which also shows in the wireframe.

--

--