IronHack PreWork — Wolt
Challenge 2: Wireframing
Wireframes give a simple visual representation of how the flow of the app or website you are creating will be.
The Task
The assignment for this PreWork challenge is to “reverse engineer” (i.e. creating wireframes starting from the visual interface) a popular mobile app of my choice, in order to analyse and learn to prioritise certain elements when illustrating user flows.
Why a wireframe?
Wireframes give us a clear and concrete structure visualisation of the flow of an app or website.
Thanks to their monochromatic colour display and visual essentiality, it allows the user to focus exclusively on:
- what elements should be in;
- why they should be there,
- where to put them,
- how they function.
Basically, it allows us to quickly test and reiterate at the early stages of our design, without an excessive expenditure of resources.
My Choice: Wolt
Wolt is a food-delivery platform born on 2014 in Helsinki, Finland. It’s supported via mobile app and web browser. It operates in 18 countries and over 60 cities — it currently has partnered with over 6000 restaurant.
Mainly because I’m a proud and passionate foodie, I decided to point my focus towards an app I’m pretty familiar with: Wolt.
It gives a really good basic delivery service, with the addition of being able also to pick-up directly at the restaurant or to have it delivered everywhere I am. Nice no?
Another thing that I notice, I’m always experiencing a bit of difficulty choosing the food to order — due to some other food delivery service with a too wide range of option and an unclear interface.
Wolt is helping me a bit here!
Finally, the visual side is really attractive and gives already a feeling of more quality compared to the competitors.
Driven by curiosity, I want to analyze further this fresh and pleasant looking app, that quickly took the monopoly in the areas populated mostly by young (or let’s say — tech-savvy) people in Berlin.
The Process
User Flow
I’m going to analyse the process of ordering a meal, having already used the app in advance, logged in as a user and already submitted info for payment and delivery.
In this case, I will focus only on the “Search” function since it’s the most direct and quickest to order.
Scenario
Our user Charlie, a 27 y/o freelancer based in Berlin, is working full on a project and would like to have a pizza quickly delivered to his doorstep
User Flow steps
- Open App
- Select Search
- Write or Select “Pizza” on the Search bar
- Select Restaurant serving Pizza
- Select Pizza type
- Add to Order
- Select Delivery type
- Check order overview
- Confirm
- Pizza is on its way!
Reference Screenshots
Wireframe
Prototype
I really enjoyed playing with this newly discovered Figma’s function.
I added some additional screens that are not present in the previous Wireframe, just to give the opportunity for the tester to take alternative choice to get to the task goal and with the last one, to encourage once again the testing to even develop an even deeper insight on the process.
Please, give it a try and let me know how it goes! :)
How was it?
This wasn’t my first time using Figma, but it was definitely the first time I used it for this kind of application.
I found that, in this part of the process, we try to understand deeply the user flow and is extremely interesting to see how the challenge here is to keep as simple as it can be.
Patient decisions and thoughtful choices took the place when creating and making my prototype functional.
This has been a really meaningful step in understanding the user’s perspective and how our visual and structural choices can influence the action of the user.
Having more time, I will be happy to analyse further this app and the other functions such as Discovery (kind of foodie blog where new and trending restaurants are advertised), Nearby (giving a clear and accessible overview of the restaurants in your area) and the Pick-Up option (really nice, since it gives you a nice excuse to have a small walk around the area).
