Ironhack’s Prework:Challenge 2_Reverse Wireframing Instagram
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.
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.
