UI Challenge: Wireframing an existing app
--
Every app we use has its own inherent interaction design and user flow, which enables us to carry on our intended action : book a train ticket, ordering food, buying clothes…When the design is successful, the goal is easily reached. But what makes a user flow fundamentally good? How is each step of the process defined?
In this challenge, we will reverse-engineer an existing (and simple!) app, and dive into the core of its internal interaction design and user flow thanks to Wireframing.
What is Wireframing?
Wireframes are black & white layouts that outline the size and position of elements on a page. They’re usually created after the flowchart or the navigation map, acting as the connection between Information Architecture and visual design.
When creating wireframes, the goal is to focus on functionality, behavior, how to display certain information and prioritize content. The fact that wireframes lack typographic style, colour, or graphics, allows us to reduce the cognitive load and the number of decisions we must make so that we can focus on the structure. Wireframes are the skeleton of the entire user experience.
Below is an example of what a good wireframe looks like:
💡 ️One thing worth mentioning here, since design jargon can sometimes get a tad confusing : Wireframes aren’t prototypes. They are not interactive, and do not show much detail. Once a wireframe starts becoming interactive, it becomes a prototype.
The prototyping part will actually be the final part of this challenge. But first, let’s create some wireframes!
Wireframing the TooGoodToGo app
I chose to work on the app TooGoodToGo. TooGoodToGo is a free app aiming at reducing food waste, by connecting customers to restaurants and stores that have unsolds.
For this exercise, I worked on the basic user task which is buying a food basket from one of the selected sellers.
To do so, I took a screenshot at every step of the process (6 in total):
I started by making a quick low-fi representation of these 6 screens and of what should be the user flow:
Now, time to entrust the task of giving these a more decent look to our new friend: Sketch! The result: ⬇️
Aaaaaand…the final touch: bringing these wireframes to life by creating an interactive prototype with Marvel!
(In case the interactive image doesn’t work properly, you can check out my work here :) )
In conclusion, I found this exercise really interesting and it made me realise the importance of wireframing within the design process. Besides, I realise it is not as easy as it looks like at first glance — selecting the right amount of elements to mention and how accurately is actually something that requires time and practice.
Thanks for reading, hope you also enjoyed this challenge! 😊
