Challenge 2: Wireframing

TikTok Basic Flow Breakdown

Why TikTok?

For Ironhack’s Challenge 2, I have chosen to explore TikTok. The reason for which I chose this app is because it’s popularity as a social media app has grown tremendously during this period of time. It is quickly reaching the popularity of Instagram, if not even surpassing it when it comes to the younger audience.

User Flow

As a user flow, I’ve chosen to focus on the basics of the app (the main navigation bar). Since the app is growing its user database and appealing now to more mature audiences, I found it very interesting to see how they managed to respond to this. It must be easily navigable all around and also simple in order for all audiences to be able to explore it fully.

Reverse Engineering

To start, I have screenshot the main screens of the app and created a low-fi prototype to identify the main buttons, text input fields and structure of the app.

The low fidelity prototype can be viewed below.

Invision Prototype

The main part of this challenge was to create a working mid-fi prototype in Invision. I very much enjoyed doing this as I believe every step of creating a prototype helps you discover multiple goals to be reached in a smooth userflow. I have also added the screens created in Invision below.

The Invision prototype can be accessed below. https://projects.invisionapp.com/prototype/ckb5fe35s0038q501llojqfaa/play

Conclusion

As a conclusion, I really enjoyed this challenge. It helped me understand how important it is to go through all the steps before getting to a high-fidelity protoype. Breaking down all the elements needed for a smooth user flow is key in designing a great user experience. Also, exploring such a popular app like TikTok helped me understand how important it is to simplify in order to reach all types of users.