Wireframing challenge
This article has been written for the assignment of Ironhack — fulltime UX bootcamp in March 2022
About the challenge
My challenge consists on creating a wireframe version of the User floof the chosen app — in my case it will be the mobile app TED based on screenshots. My final product will be 8 interactive prototype screens built in Figma. The layout of the screens should present the similarity with the real app and the whole look should be as simple as possible with black and white colors.
I started the challenge by explaining the following concepts:
What is a User flow
User flow is a path that the user travels — from entry point to the end goal — in order to complete a task in a user interface. It can be shown visually on a digital platform or can be written on paper. Both ways display all the ways that users take while using your product.
User flow are extremely useful if we want to:
- create a new intuitive interface
- evaluate existing interfaces
- present our product to our team
- promote user-centered design
The power of Wireframing
Wireframes give a visual representation (they can be drawn by hand or created digitally) of how the flow of the app or website you are creating will be. They provide a clear overview of the page structure, layout, user flow and functionality.
Wireframing is the Art of Efficiency
A wireframe acts as a tool that allows designers to visualize their ideas in a really fast way, share them with other people, and get valuable feedback. They keep the whole concept user-focused, and they are cheap to create.
A little bit about TED
The TED (technology, entertainment, design) is a tool for browsing, downloading, and viewing short videos (maximum 18 minutes long) where experts speak on education, business, science, tech, creativity and more interesting areas. The main goal of this nonprofit organization is to spread educational content, seeking out interesting people to speak and share their knowledge and passions with the audience. As we can read on TED’s website “we look for engaging, charismatic speakers whose talks expose new ideas that are supported by concrete evidence and are relevant to a broad, international audience.” The application has gained popularity in recent years.
But what makes TED talk so popular? All speeches are available online for personal learning, sharing the content in commercial contexts (for example, in corporate learning or talent development) for anyone and for no cost. All videos are short and fun to watch.
Inventory of the UI elements
Before starting the Wireframing it’s important to understand which UI elements create the application and what’s the aim of the overall design. In my case, TED app has simple and intuitive interface with strong color contrast.
Below you can see screenshots I used to create wireframes:
TED’s UI elements
TED’s user flow
In my challenge users main goal is to create an account on the TED app in order to have access to all existing videos and articles.
Steps to create the user flow:
Determine what the user wants to achieve: create an account in aim to watch different TED talks
Determine the entry point: download the TED application from an app store
Basic steps the user should follow: sign in / personal information / email confirmation
Final action: the user is signed in and has full access to all the content
Here is the mid-fidelity prototype with the components created in Figma:
Guide to user flow
To achieve the user’s goal, the flow is divided into several tasks and involves the following actions:
1. User downloads the TED app. He receives the “welcome to TED” message and is asked to “answer two quick questions to get started”. He clicks on the button “Let’s go” and goes to the second screen.
2. User start with the following questions: “what interests you” and “what are you looking for”. He gives the answer by choosing between multiple categories. These two questions are important because depending on users answer TED app selects personally recommended videos based on users interests and motivations.
3. The next step is “sign in to TED”. It allows the user to sign up with Google, Facebook or email. After completing personal information the user receives an email confirmation and is all set to start watching TED talks.
The main app page that appears after completing the process is divided into 3 sections.
- Your latest recommendation
- More recommendations
- Newest Talks
4. By clicking directly on the player TED takes the user to the main video page where the the talk can be watched, add it to likes or list, share it or download it directly to mobile.
Figma Mid-Fi Wireframe and user flow
The overall flow is simple and quite short. The app is guiding the user through the whole process to reach the main goal which is signing up. Wireframes are large and clear, with each onscreen element clearly labeled.
Final thoughts
Since it was the first time I worked with wireframes, this challenge introduced me to the wireframing world and taught me about the importance of its design process. It showed me that it’s crucial to understand how our product works or will work and how users will interact with the product. It gives us the groundwork to introduce changes, perfect user paths and create the best user experience. During the task also I learned more about different UI elements, how to identify them and name them properly.
This simple task, although I found it very challenging, it made me more curious and motivated to keep learning more and improving my skills.
