Using Reverse Engineer +Wireframing — Case: Too Good to Go
Moving on with the challenges, I am back to write article 2 of 3, from the Ironhack UX/UI Bootcamp prework, that I am part of.
So, here I come to talk about the Challenge 2: Wireframing!
For this challenge, we worked with the concept of “Reverse Engineer”. Based on the screens, I needed to iterate 5 of them, as the same ones in the real app. From there, I come up working with the “reverse” process of wireframing. From a High-Fi prototype, coming down to Low-fi, I ended up with the wireframes version of the user flow of the chosen app.
The chosen app: Too Good To Go.
I chose this app because I have been using it very often to be sincere. Some time ago I started getting annoyed with the fact that my bins were getting full really fast — being home full time because of the corona, made me realize the amount of waste that we produce daily. Also, I am always looking for ways where I can save a penny here and there.
That’s when I found out about the app To Good To Go.
The app is anti-waste food service. You can find daily many stores, supermarkets, restaurants, hotels, options where you can buy for an accessible price the surplus food.
The app Flow:
The interface of the app is super clean and intuitive to use. From the first time, you get it already how it works.
The user flows from the moment that you already have an account is simple and fast to use. The UI elements from the app include filter options, cards displaying the stores, sliders, notifications, tooltips, and so on.
Task analysis:
You start in the discover screen, where you can have a general look at the options that are available for the day, starting from your favorites stores previously selected on the onboard process.
After that you can browse, using filters, and the options are displayed either in the format of a list or using the map.
You also have the option to browse only from your favorite list, which can be handy if you like to stick to your predilects places.
Wireframing:
To develop the Low-Fi prototype, I rapidly sketched the steps described above, to have an idea about the buttons, screens, and card connections.
The Mid-fi Prototype:
After getting an idea about how the interactions worked on these 5 screens, I developed the prototype, as this was a good practice to absorber the insights that I had so far.
You can play a bit here. 😁
My learnings:
Going through the reverse engineer was a good way to have insights and understand in a deeper level the why’s and how’s behind the app flows and interactions. Dedicating time to the iteration process of a product is key to deliver to the users a sharp and intuitive product.
As Don Norman already said:
“Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible, serving us without drawing attention to itself. Bad design, on the other hand, screams out its inadequacies, making itself very noticeable.”
― Donald A. Norman, The Design of Everyday Things
