Wolt 2022: UI Designer Assignment
As an applicant for UI/UX designer position for Wolt, my assignment was to design a new interface for a fulfillment app to be used by our grocery partners. The app is aimed to enable the grocery partners to collect and fulfill orders in a more efficient and effective way. The preparation and collection process of food and grocery items differs greatly, thus the need for new tools to support our grocery partners.
My approach for this task was to create a design that is intuitive and easy to use for the grocery partners. I had the freedom to create custom components and explore various visual styles, while keeping in mind the consistency with the rest of Wolt's applications. I aimed to create an interface that feels like an integral part of the Wolt ecosystem.
Problem 1: Overview of current orders
My solution for the task of creating a landing view with a list of incoming orders was to divide the orders into three different sections: New, Packing, and Ready. This approach would allow for a clear and organized overview of the orders, and make it easy for the user to quickly access the information they need.
The "New" section is intended for orders that are incoming and require confirmation and time estimates before moving to the "Packing" screen, where the collecting and packing of the orders takes place.
The "Packing" section is for orders that are currently being collected and packed, giving the the end-user real-time information about the progress of the order.
The "Ready" section is for orders that have been collected, packed and marked as ready for the courier to pick up. Idea behind this to help the grocery store worker to easily identify and keep track of the orders that are ready for delivery to the client.
Problem 2: Amount of items
Visualizing the missing items from the order was to help fastening the collection processes. Manually adding items one by one also couldn't be the answer as this would be slowing the collection phase too much. For the work task of adding items as collected was to include a button that allows the user to mark items as collected in the app. This feature would first automatically mark all items in the full quantity that the client ordered.
In case an item is out of stock or there isn't enough of a certain item, the user would have the ability to reduce the amount of the items. This would help keeping the collection phase faster than adding items one by one with "add"-button and simplifies communication of missing items for grocery partner company and in later phase for the client that ordered the groceries. The app would show a little notification of the item's status, indicating if the item is out of stock fully or partly, helping the user to understand the situation. This same component could also be used for UI of the customers to visualize missing items.
Problem 3: Power-users!
My approach to improve efficiency for more experienced workers was to create a feature that enables power-users to easily access and manage multiple active orders at once. Specifically, I added a button located on the header of the collection order screen that, when clicked, opens a menu displaying all current active and ready orders. This allows power-users to quickly browse through the orders while multitasking and collecting items for multiple different orders at the same time, eliminating the need to navigate back and forth multiple screens.
This feature is designed to be intuitive and user-friendly, ensuring that power-users are able to take full advantage of the app's features and improve their workflow. It allows power-users to manage multiple orders more efficiently, saving them time and increasing their productivity.
