Ironhack’s Prework:Challenge 2_Reverse Wireframing Instagram

Photo by Luke Chesser on Unsplash

I chose instagram to work with for my second challenge of Ironhack pre-work.

The flow I worked on was from the first screen users see when they open the app to the comment screen after entering an account page from their feed.

Personal feed/first page > Account profile > A view of a content > A view of comments > A view of comment with a keyboard

I decided to work on instagram because:

• It is one of the most frequently used interface for many people around me and myself as well
• The interface is heavy on visuals and consistent elements that I find aesthetically pleasing and easy to look at
• There are many flows that I was interested in working on

First, I gathered the UI elements that are consistent in the interface such as its logo, saved button, post button, profile icons, like button, etc.

Then, I screenshotted a couple while browsing the app as I would normally on a normal day. I could jot down some interesting user flows meanwhile.

I chose the first flow I had when I opened the app which was commenting on a post I saw on my feed while scrolling.

And the fun started. The drawing part!

I drew low fidelity wireframe to have a clear idea on what I want to focus on. I wanted to focus on the seamless instagram experience from scrolling on the first screen to commenting on a post that was on user’s feed.

I chose Figma to draw my reverse low-fi wireframe.

https://www.figma.com/file/945Dgbv4HnE5wrUlBHYTwJ/PREWORK-UI-Reverse-Wireframing-Instagram?node-id=0%3A1

I found that UI component kits for many popular apps are available in Figma including Instagram. I duplicated one of them and I found very useful elements that saved lots of time for me :)

This exercise was helpful to visualize interface in simpler ways. I could see the functionality of each part better when the fancy cute colors and images were gone.

Improvements:

• Familiarity with shortcuts: Throughout the process, I definitely became a better friend with Figma. I actually started to feel a bit more comfortable creating icons and buttons using rectangles. I got faster with short-keys!
• More hours on figma: I think the only way to learn is to do it! I had great time using more tools and features while this challenge.

Challenges:

• Ctrl+g, ctrl+r.. and repeat: I found it difficult to keep grouping and re-naming every time I create anything. I still don’t really have ways to name them in smart ways either! Are they.. icons? buttons? bar? or just a.. box?? …I am sure I will get better at these soon.
• I couldn’t figure out how to save assets and component kits into my library. Once I figure this out, my life will be a lot easier
• It was a lot easier for me to get carried away with design details and small decision making.