Ironhack UX / UI Wireframing Challenge

I have chosen to do the re-build (from the fully functional app UI frontend back to the wireframe level) of the TED app.

It is an educational video app, which enables users to listen to diverse talks from all over the world nearly about any topic one can imagine. They are inspirational, educational, mind-blowing, and challenging.

The main reason why I have chosen this app is that I am using it on a daily basis. I love listening to podcasts and even more so with adding a visual video story to them. The other reason is that I am a strong believer in simplicity, hence TED app represents intuitive simplicity, ease of browsing through the video topics, and has really simplified workflows.

I’ve chosen to work on the user intro flow, meaning how a user would look at the app for the first time, browsing through the 4 main functionalities, ending up looking into the recommended videos.

The user intro flow first starts with the first screen — the home screen. Then leads to podcast database, following with search menu and ending up with user profile. Only then, from the user profile, I lead the user to the recommended videos.

User Flow Sketch

Wireframes

The TED app is not too dense with UI elements. The interface is rather clean and minimalistic. Yet, of course, such UI elements as Input Controls (list box, buttons) and Navigational components (text and picture fields, tags, icons and search bars) are there. They have used a few Information Components to still keep the user on track with notifications of started downloads, a few tooltips at first open.

Welcome to click through the interactive wireframe too.

*Always happy to answer any questions or hear your comments on my work.