Product | Venues Shop
A venue-facing ordering experience designed to feel clearer and more usable under pressure.
01
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 .
Structure
- H2 Summary
- H1 Problem
- H1 Team
- H1 Process
- H3 Information Architecture
- H1 Launch
- H3 For internal stakeholders
- H3 For venues
- H1 Results
- H1 Continuous improvement
Table of contents
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
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.
Information Architecture
Venues Shop Information Architecture
| Page name | Contains | Actions | Relations |
|---|---|---|---|
| Orders index | Cancelled OrdersDispatched OrdersPending Orders | Download InvoiceDuplicate Order | Single Order |
| Single Order | Order Details | Download InvoiceDuplicate Order | Single Order, Reports |
| Specials | Specials | Add Products to Cart | |
| Suppliers index | Supplier InfoSuppliers Index | Bookmark SuppliersFilter SuppliersSort Suppliers | Single Supplier page |
| Global search | Search ProductsSearch Suppliers | Search Products | Single Supplier page |
| Single Supplier page | Supplier InfoSupplier's Products | Add Products to CartBrowse ProductsFilter ProductsSearch ProductsSort Products | Suppliers index |
| Categories pages | Search Products | Add Products to CartBrowse ProductsFilter ProductsLinks to PagesSearch ProductsSort Products | Single Supplier page |
| Reports | By CategoryBy ProductBy Supplier | Download CSV | |
| Locations | Locations | Add LocationEdit Locations | |
| Account settings | Contact DetailsPasword SettingsPayment Settings | Delete AccountEdit Settings | |
| Help | Help Portal | Link to help portal | |
| Contacts | Foodbomb AddressFoodbomb EmailFoodbomb Phone Number | Call NumberCopy DetailsLink to MapsMailto | |
| Sign Out | NA | Signout | |
| Cart (full) | Products per SupplierSupplier DetailsWarnings | Link to Supplier | Single Supplier page |
| Cart (empty) | Promotional Materials | Ling to OrdersLink to BrowsingLink to Specials | Specials |
| Dashboard | Coupon CodesPending OrdersPromotional MaterialsRecent SpecialsRecent SuppliersSupplier Recommendations | Links to Pages | Specials, 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!
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-Feb | 1 | 0 | 8 | 4 |
| 2020-Mar | 0 | 6 | 55 | 12 |
| 2020-Apr | 1 | 23 | 238 | 84 |
| 2020-May | 1 | 9 | 109 | 63 |
| Grand Total | 3 | 38 | 410 | 163 |
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.
03
.png)
.png)
.png)
.png)
.png)
