The Wireframe: an app skeleton
A wireframe is a graphical skeleton of a website that guides the content and concepts of the pages and helps designers and clients to discuss the details of the website building. (mockplus.com)
In this post, we are going to see how we can use a wireframe to analyze the user flow in an app.
Introducing the app
Are you free on weekends? or Do you have a date and you don’t have a place for dinner? Usually, you would search for some restaurants in your city by googling and calling to make a reservation, but everything is way much easier and faster with El Tenedor. This app, whose developers are members of the TripAdvisor group, offers you the possibility of making a reservation wherever you want with only two clicks thanks to the geolocation function. You can enjoy great discounts and find the most suitable restaurant thanks to the comments and reviews of the community.
If you are not sure about the restaurant you would like to go to, you can do a quick search and choose an option based on the reviews. In this post we will analyze the specific steps (or user flow) we have to follow to make a task, using as an example: How to find a Burger in Madrid.
Tasks Analysis
Through the task analysis process, we can divide the route into five steps to follow with their respective subtasks.
- Search a burger restaurant in Madrid
- Navigate through search bar
- Search for burger restaurant
- Search for the area where you want the restaurant to be located
2. Process of choosing the desired restaurant
- Navigate through the screen of restaurants
- Select the one you prefer
3. Configuration of the reservation
- Select the hour, date, and number of guests of the reservation
- Fill in your personal information in order to make the reservation
- Fill in the mandatory fields such as name or email
4. Confirmation process
- Press confirmation button and validation screen
Lofi version
In the Lo-fi version, we can see how the user flow works with this task. We draw the wireframes with the help of user interface elements such as Input Controls, Buttons, icons, or navigational components.
Wireframing
To work with user flow more dynamically, we use the wireframes to make an interactive prototype with the app screenshots.
Now that we have the complete user flow, we verify that the reasons why the users choose El Tenedor are because this app is absolutely intuitive and easy to use.
The app organization and how its interface elements are used make it possible for the user to quickly find what they are looking for, obtaining a satisfactory result and ensuring their return to the app. Furthermore, the use of interactive icons and the decision to place the right information on each screen (some of them are very simple for settings and choices and others are more complex for those parts where information is offered for the user) does not interfere with the design, which perfectly maintains its function throughout the entire process.
Conclusions
Sometimes finding what we are looking for within an app can be tedious. So with this process, we can see where we are failing or what we could improve. In this case, when we do the lo-fi version, I had some doubts about what information would be relevant for the users.
Besides, there are screens within the process that may not be necessary to understand it, so it’s also complicated to know if the user will be able to follow the entire route with the screen you have made.
Anyway, by analyzing and researching more applications along with the users’ behavior, we would draw more and more conclusions and answers to our questions.
Here you have the link to the interactive prototype for those curious who want to test the process.
Thanks for reading!
