Unboxing WOLT
The art of creating wireframes without loosing it
My second UX/UI Design Bootcamp Challenge is all about reverse engineering a particular user flow.
I have to say, I was never a big fan of food delivery and I find some of the work conditions difficult to deal with, but we are still walking through the valley called Corona and therefore the restaurants are closed due to the restriction (at least in Berlin). This is why I like to support my local restaurants by ordering online and picking it up. I am using the food-delivery app WOLT since a while now and so I decided to create a wireframe version of my user flow for ordering my favorite Pizza Margherita in WOLT.🍕
WOLT (which is a Finnish company)is a food delivery platform, where you can order food from restaurants via mobile apps or a web browser. You can either pick it up or have delivered by couriers ( recognizable with the catchy blue backpacks).
As you can see in the screenshots below this particular user flow is quite complex, but the colors and the design imply a fresh look and an easy use.
But for this challenge I needed to take one step back. It is important to understand the structure and functionality -the skeleton- of the app. This is called a wireframe. The user and the designer shouldn't be distracted by color and design in order to test usability of the user flow.
Therefore wireframes should look and feel black and white only.
Creating wireframes early in the process saves a lot of time and budget, as well as helps the client see the project at an early stage.
I’ve chosen ordering a pizza at WOLT because I wanted to challenge myself with the Figma prototyping tool and learn more about its features. I also wanted to understand the structure of this app and what makes the user-experience so easy and convenient. Or not.
The user flow
In the screenshot above I tried to create a wireframe version of my WOLT app. Lets break it down into each step:
- After starting the application the user starts with the landing page. He has now already the possibility to explore some suggested restaurants in Berlin. He also has the possibility in the lower menu to search for a specific restaurant, find a restaurant nearby, find his profile or look for delivery options in his area. The user selects the last option.
- There is now a list with restaurants who will deliver to his address. He selects the first restaurant and is landing on the menu of that restaurant.
- Because our user is curious about the restaurant he clicks at the icon at the right corner.
- A pop-up window appears and he chose to get some more information about this restaurant.
- The user sees now an entire page about the details of the restaurant such as deliver-range, offer, opening hours and other information. After he found his information he returns to the last page.
- The user starts to browse through the menu which is divided into starters, salats, pizza and else.
- The user browses down until he decides to click the pizza button at the upper menu bar.
- The page will open with a range of pizza choice. The user selects the first pizza.
- When selected, the user finds some more details about the pizza choice and has already the option to change the amount, add some extras or add the selected item to his cart, which he does.
- He has one selected item in his cart with no extras and is ready to press the check-out button .
- The user has to choose, if he wants the food to be delivered to his address or if he likes to pick up the food instead.
- Since this restaurant is nearby, he decides to pick up the food by himself. The display shows when the order is ready to be picked up.
- The user is one step away from purchasing the order. He just needs to choose one of the payment methods. In this case he just scrolls down and choses the set payment method and selects the pay-button.
- I did mimic the final notification, because I didn't purchase the order in real life. 😩
What I've learned
When using the app I found it pleasantly fast to complete an order or even to browse the menu. While I created my wireframes, I was surprised how many frames it took to complete the task. It felt much more difficult and elaborate to browse through the app.
To be honest I felt a bit overwhelmed with all the little elements and features. It took me quite a while to create this flow on Figma. I also had some difficulties deciding when to use phony text or text labels. I was looking forward to do even more wireframes to improve my Figma skills, but I am afraid I kind of lost sight of the quality.
To keep my layers organized and structures was easier said then done. For my next project I will make sure to find the right amount of frames in order to focus more on the content.
Sounds like I've learned a lot. 😅
