00 Mattia Fregola

Overview

Intro

Table of contents

This is the Foodbomb product that venues (and most recently consumers) can use to search, compare, and order wholesale food products.

When I joined Foodbomb the product was clumsy and a very poor Information Architecture made it very difficult to use (according to user feedback).

Within 2 months since I joined, together with the front-end team, we redesigned the existing product almost from scratch by simply implementing TNT , our UI library .

Summary

This is the Foodbomb product that venues (and most recently consumers) can use to search, compare, and order wholesale food products.

When I joined Foodbomb the product was clumsy and a very poor Information Architecture made it very difficult to use (according to user feedback).

Within 2 months since I joined, together with the front-end team, we redesigned the existing product almost from scratch by simply implementing TNT, our UI library.

With this fresh scaffolding, we were able to develop a number of features in a very short time.

Problem

  • The product was pretty far from great here's what it looked like
⚠️
WARNING! The following content may contain elements that are not suitable for aesthetically sensitive audiences.
  • See more screenshots of the old product

Team

For this project I've teamed up with Adam the greatest full stack developer I've had the pleasure to work with. Since my first day at Foodbomb we synced up immediately and were able to move faster than the speed of thought.

Process

First and foremost, I started reviewing the information flows for each of the products we were building. I did this by giving myself a very very very boring task: map all the information flows across the apps.

💁
Note: To avoid making our competition happy, I'll only show the Information Architecture work for the Venues Shop (open the toggle to see it).

Information Architecture

Venues Shop Information Architecture

Page nameContainsActionsRelations
Orders indexCancelled OrdersDispatched OrdersPending OrdersDownload InvoiceDuplicate OrderSingle Order
Single OrderOrder DetailsDownload InvoiceDuplicate OrderSingle Order, Reports
SpecialsSpecialsAdd Products to Cart
Suppliers indexSupplier InfoSuppliers IndexBookmark SuppliersFilter SuppliersSort SuppliersSingle Supplier page
Global searchSearch ProductsSearch SuppliersSearch ProductsSingle Supplier page
Single Supplier pageSupplier InfoSupplier's ProductsAdd Products to CartBrowse ProductsFilter ProductsSearch ProductsSort ProductsSuppliers index
Categories pagesSearch ProductsAdd Products to CartBrowse ProductsFilter ProductsLinks to PagesSearch ProductsSort ProductsSingle Supplier page
ReportsBy CategoryBy ProductBy SupplierDownload CSV
LocationsLocationsAdd LocationEdit Locations
Account settingsContact DetailsPasword SettingsPayment SettingsDelete AccountEdit Settings
HelpHelp PortalLink to help portal
ContactsFoodbomb AddressFoodbomb EmailFoodbomb Phone NumberCall NumberCopy DetailsLink to MapsMailto
Sign OutNASignout
Cart (full)Products per SupplierSupplier DetailsWarningsLink to SupplierSingle Supplier page
Cart (empty)Promotional MaterialsLing to OrdersLink to BrowsingLink to SpecialsSpecials
DashboardCoupon CodesPending OrdersPromotional MaterialsRecent SpecialsRecent SuppliersSupplier RecommendationsLinks to PagesSpecials, Single Supplier page, Orders index, Single Order



Once the information was clearly mapped, and having already prepared both the branding guidelines and the UI library, I jumped into Figma to create a high fidelity mockup of the main flows. I reviewed the mockups together with Adam first, and with the whole team later, and ultimately guerilla-tested with 5 users for extra validation.

Once happy with the result, Adam jumped into building and within 3 days our brand new app was up and running in front of out users.

Launch

Starting from the first released, I've setup the foundations for the product marketing function as well. While we don't have a dedicated person to take care of this, we've responsibilities across engineering, design, and marketing.

For internal stakeholders

I've introduced the awesome tool called Loom to the engineering team. This allowed us to record and share a walk-through video. Here is the video we've sent to internal team for this release.

For venues

For venues, I've coordinated with the marketing team to create a recurrent monthly EDM with feature releases updates. Here is the one that went out on for this project.

Note: the email template was something I only just came across and reviewed the very next day.

Results

Instead of fluffing this up, here's some customer comments, followed by a breakdown of the type of comments received from our lovely Venues.

One thing to note is that since the end of March, due to COVID-19, we ventured into the b2c world. This meant we started receiving a ton of more feedback. Whilst initially I thought this would mean polluted data, I now believe that consumer feedback gives further validation.

It looks so gooooood! very slick and easy
Super easy to use! Can't wait to see my first delivery!
SUPER easy to use, we love it!

💁
We collect this feedback at the end of the checkout process with a simple section containing the 3 emojis 😡 😐 🙂 and a form requesting a comment after a click.

Delighted comments are those containing multiple exclamation marks, or particularly strong positive words, such as love, fantastic, or great.

Feedback with comments

Date - Year-Month🤬negative😐neutral🙂positive😍delighted
2020-Feb1084
2020-Mar065512
2020-Apr12323884
2020-May1910963
Grand Total338410163


Continuous improvement

Though the results have been extremely positive, one can never stop improving. As a team, we keep on collecting all the feedback we can, have regular interviews with our venues, and aim at making their life simple everyday.

We've recently introduced NPS feedback form as well to avoid collecting feedback only after checkout, and once again, results are extremely pleasant.

Keep moving

Back to portfolio