Back 2020 | UX/UI Design
Iblea Pesca
INTRO
Iblea Pesca is a Sicilian fishing company founded in 1989. The owner started to fish when he was 13 years old on a little boat in hometown Scicli, in the South of Sicily. On his way back home with his catch of the day, some people asked him if they could buy some fish. This is when he decided he would eventually found a fishing company.
Today, Iblea Pesca has 85 employees.
CONTEXT
This family business is still working in a very traditional and manual way. In order to scale-up and to become one of the main actors in the agricultural sector in the South of Italy, Iblea Pesca needs to go through a digital transformation.
There first objective in this digital transformation is to get a solution that:
- Remove friction and enables a smoother ordering process.
- Accelerate the process of the orders preparation in an efficient way and with limited effort.
- Remove the human error (handwriting mistakes, communication problems, last minute changes)
Design Process.
RESEARCH
Iblea Pesca works mainly B2B. They have different types of customers who order fish every day in the desired quantity:
- Supermarkets (1st to be served according to the catch of the day)
- Restaurants
- Hotels
- Fish shops
I could observe the ordering process and discuss with some of the workers during one of their shifts.
Ordering process.
Happening mostly at night, the ordering process is very archaic.
The fishermen usually bring the catch of the day at 2am in a warehouse. Then starts the division of the fish to match the orders placed by the customers.
The orders are received as follow:
- Supermarkets send via email a list of fish they would like to get one day before, around noon.
- The other customers send via WhatsApp message paper lists - usually handwritten – sometimes a few days, sometimes a few hours before.
2 people are in charge to sort out all the different lists. They use a whiteboard to write down orders.
Division of the fish
From 2am to 4am, 4 employees are dividing the fish in the warehouse:
- They make piles of boxes according to the whiteboard.
- A manual double check is done during the last 30minutes to avoid any mistakes.
- The owner fixes the prices at that moment, according to the demand and the offer.
- From 4am, the 1st delivery trucks leave to the supermarkets and the 1st B2B clients arrive to pick-up their orders.
On average 90% of all the orders are fulfilled, but it happens that sometimes the fish ordered is not available. Hence, the owner finds solution together with the clients on the phone.
PROBLEM DEFINITION
This ordering process makes room for a lot of problems and human errors:
- Orders are not centralized (sent via emails or WhatsApp to different phone numbers),
- Lists are often handwritten. It leads to difficulties to read/understand. As a result, it is easy to make mistakes in the order preparation,
- The division of the fish happens at night in the very early morning,
- The whole division process is not organized efficiently: employees are screaming from one side to the other of the warehouse and there is no clear division of the tasks.
- Some clients sometimes give a phone call to add more fish to their orders while the division happens.
- Employees are quite old and seem reluctant to change, but they do work with phones (WhatsApp).
GOAL: Enable a smoother and more efficient ordering process through digitalization.
We can do this by providing a solution to both sides: Iblea Pesca employees / their customers.
For the first part of the project, I decided, together with the company to focus on the solution that would serve better the customers.
As Iblea Pesca customer, when I want to order fish for the upcoming days, I want to have a fast, easy and reliable way to submit and edit my order, so I can be sure there won't be any issue when I receive it.
IDEATION
After some brainstorming, I concluded that the best solution to make the ordering process smoother for the customers is a mobile app.
My observations during the research phase made me come up with several key features that would make a great user experience:
- Easy search: an interface providing an easy way to navigate through the app to find the correct product given all the different caracteristics (fresh vs. frozen, origin, units etc.)
- Date and delivery method selection: some customers like to place their orders a few days upfront and a few have different addresses for delivery.
- Favorites: customers tend to order the same quite frequently. Giving them the opportunity to save products or orders as favorite enables a quicker process.
- Instant notification system: customers can get updates about the preparation of their order - if some products are missing or if it is ready to be picked-up.
WIREFRAMES
I used Whimsical to sketch low-fi prototypes.
"Don't fall in love with your designs" they say.
I had several design ideas in mind for the homepage. I tested them one by one with some customers. For each design, they explained what was intuitive and clear to them.
On my side, I also realized it was complicated to integrate a CTA to add products directly from this Explore page to the Cart: as there are many different characteristics to take into account for one kind of fish, this feature would require to duplicate content (eg. Fresh Salmon per kilo from Atlantic + Fresh salmon per unit from Atlantic + Frozen salon per kilo from North Sea, etc.). This is not ideal and brings a lot of confusion for the user. That's why I decided to skip this "Add to cart" CTA from the Explore page.
With this in my and the customers' feedback, I came up with a final new design.
Onboarding
The Iblea Pesca app onboarding flow it pretty straightforward.
After a Sign-up page, the customer will be asked to fill up some information to provide him with a customised experience:
- Default address: in order to make the ordering process faster, this address will be saved as the default one when choosing "Delivery by truck".
- Preferred products: these products will appear on the top of the Explore page. This will facilitate the search for the first uses.
- Delivery option: the selected option will be the default one on the app when the customer will place an order. The user will be able to change these choices anytime in the settings section.
The user can always skip the onboarding. Thus, default settings will be automatically applied. Only when choosing a delivery by truck, the user will have to fill in the information for the delivery address.
The Log-in screen will directly lead to the Explore page of the app.
Main sections
The Product page gives all the necessary details to the user to select the type of fish he wants to order. He can see some information about the fish. A dropdown menu helps to select the correct type of fish (fresh / frozen, origin / unit). From there he can directly type the quantities and adjust it with 2 CTA.
One requirement from the client was to enable their customer to leave a comment attached to the order (eg. to indicate the specific boat they want to get the fish from).
After making his selection, the user can choose to add this specific type of fish (from the dropdown menu) to his favorites.
The Cart page provides a summary of the order with the possibility to adjust directly the quantities from there.
The user has to choose the delivery option and the delivery date. He can modify the address if needed. After submitting the order, he gets an order confirmation page.
In the Order section, the user has an overview of his coming and past orders. He can easily see the summary for each one. A CTA also allow him to create a new order: it redirects him to the Explore page.
From the summary page, he can save the order to his favorites to make his future purchases faster. He also gets CTAs to add more product to coming orders or place the same order for past orders.
The Favorite section gathers all the products and all the orders that the user has previously added to his favorites. This overview enables him to quickly place an order: he just needs to click the different CTAs to add something to his cart.
If he didn't add anything to his favorites, a CTA brings him back to the Explore page.
