IRONHACK PREWORK: CHALLENGE 2 — WIREFRAMING

Reverse engineering Instagram’s Interaction Design and User Flow with one key word in mind: simplicity.

3 min readDec 7, 2020

Welcome to another Challenge of Ironhack’s Prework. This time, our task is to create a wireframe version of the user flow of an app based on screenshots. I decided to go for one of the apps i use and enjoy the most: Instagram.

“The gram” is one of the most versatile apps out there, and I knew that its many different funcionalities would allow me to succeed in this Challenge by getting a solid wireframe analysis. I have chosen two of the main user flows while using the app: posting a new photo and the new stories bar.

Here’s a graphic description of both the user flow from our Home Screen:

Our starting point will always be Instagram’s (1) Home Screen, where will find other users posts scrolling up and down our screens. From here, we will either access the (2) Stories screen, clicking on any of the story bubbles in the upper section by scrolling through it or (3) our User’s Profile, by clicking on our user bubble in the Tab Bar at the bottom of our screens.

Once we finish watching all our followed user’s stories, we will be automatically redirected to the Home Screen. However, if we prefer so, we can click on the right side of our screens to get back to the previous story.

We need to access our User’s Profile to post a new photo. We simply have to click on the “+” icon at the top of our profile and a creation pannel will emerge from the bottom. We then click the “Post” option, which the first one of the pannel. Afterwords, we will be directed to our Gallery, in order to select the image we want to post. We can resize our image, and select the desired format by clicking the size bubble at the bottom left side of our selected image. Some steps have been ommited, for this challenge’s sake, in order not to be overcomplicat it, but once we select our image we simply click “Next” to post our image, and be redirected to our User’s Profile, with our updated feed.

Once the user flows were defined, I created a wireframe on Figma. Here’s the result:

Please, feel free to click the link bellow to interact with my prototype.

To conclude…

Despite it being quite challenging, I have enjoyed this task a lot. I’m a frequent Instagram user and yet never really paid attention to the UI elements contained in it. During the course of this task, i bumped into Instagram’s guidelines and resources, which helped me a lot. I also used Ironhack’s lifesaving Wireframing Kit, which saved me a lot of time drawing icons.

Hope you enjoy this.

On the flip side,

Manuel

IRONHACK PREWORK: CHALLENGE 2 — WIREFRAMING

Reverse engineering Instagram’s Interaction Design and User Flow with one key word in mind: simplicity.

Written by Manuel Soria