Wireframing my favorite social media app: Instagram 📷

Experimenting paper wireframing and new design tool: Figma

Photo by Kelly Sikkema on Unsplash

For the second challenge of the Ironhack’s Prework assignments, students were asked to work on Wireframing using «Reverse Engineering Style ». To do so, we had to pick a famous app of our choice and create wireframes out of it: lo-fi paper wireframes and a lo-fi wireframes on a design tool. I’m still discovering Figma (I’m more of a Adobe XD user) so I decided to continue to train on this new tool, especially because it will be the main tool used during the bootcamp.

For this challenge, I picked Instagram mainly because it’s one of the best app designed to me: it’s a visual focused app, so it was, in my opinion, designed to be beautiful without interfering with the users’ content: their pictures. It has always been simple to use and even when the Instagram team adds new features (recently Reels for exemple), they always make it super user-friendly, without requiring the user to start over again the learning process.

Screenshots of my search flow on Instagram as an inspiration for this challenge.

When discovering the app, I remember myself first using the app to find inspiration from the best before posting my own content. That’s why the wireframes I created focus on the « search » feature of the app :

• The user first starts on the homepage with his « feed » (pictures of the people the user is following / sponsored ad)
• Then using the magnifying glass icon at the top right, the search page will appear, with a feed of pictures related to the user’s interests
• Taping the search bar at the top of the page will display « Top pages » which are on trend (right now, it is mainly Covid-19 related), and also previously researched profile pages
• When typing the keyword of the research (people or subject), the search results will automatically appear and adapt according to the user’s search
• When the user is finished with the search, Instagram will show profile pages that are more accurate, as well as related searches including most popular hashtags and location.
• Once the user has found what he/she is looking for, taping the username will display the profile page of the given account.
• On the profile page, many useful information are display at the top : profile picture, number of posts, of followers and of followed pages, name of the page, main description, links if given. In order to follow the page, the user simply has to tap the « follow » button.
• Once the user has subscribed to the page, the application will suggest some related instagram pages that could be of interest for the user — which is to my mind a wonderful feature especially when looking for inspiration.

✏️ Here are my paper Lo-Fi Wireframes (I used some Iphone 8 templates to have a more accurate size of the different elements):

🖥 Then, I created the same wireframes on Figma, with more details than the paper version and included some animation as well.

From right to left : Instagram user’s homepage, search page, starting research

From right to left : search results, Profile page, Profile page once users has followed

⭐️ Key Learnings from this challenge:

• I was maybe too focused on the details like even sizing or straight line when wireframing on paper.
  Note to self: sketching doesn’t have to be perfect!
• Ironhack’s UI kit was really helpful during the process, I certainly saved a lot of time using this toolkit with premade icons, keyboard etc. Thank you for that!
• Before starting wireframing on Figma, I tried to focus on the common patterns that could help me speed up the process and automate the workflow.
• I still need some practice on Figma as I’m not familiar yet with all the keyboard shortcuts and functionnalities, I might even try to find a complete lesson about this tool because I find it really interesting to use.
• At first, adding animations and prototype interactions seemed like a more complicated task than designing but I was wrong, Figma makes it really easy to add animations and relations between the different frames, loved it!

Thank you for reading my first post ✨