How we built our Supply Drop local delivery app in a few days after COVID-19

Dan Supply Drop

I’ve had a bunch of other breweries ask us what we did to put together our Supply Drop local beer delivery app in the days after the COVID-19 lock-down. In this post I’ll go through what we did.

I’ll say at the start that this method might not be the best way to go about it, it’s just what I knew and what I had access to and got a result quickly and cheaply for us.

What is it?

In the days following the shut down of bars and restaurants, it became obvious that we were going to have to find another way to sell our beer. We were also going to have to find other work for our sales team who could no longer do their normal jobs. We already had an online store using couriers to send our beer out, but we decided to build a service around doing our own same day beer deliveries with our own cars and team. So we built a service to operate from Wednesday to Sunday 1-6pm for same day fresh beer delivery available via a mobile website and apps in the app stores. We called it Supply Drop.

7 days and no budget

We bought ourselves a week and the sales guys took a week off and I got to work building Supply Drop. We had a week and we had virtually no budget for it. So with that in mind we had to make a few compromises.

First off I didn’t want a full custom native app that would have cost a fortune and taken forever. The app stores were slow to approve apps at the time so we needed to make sure we had a simple mobile website first and the apps could come later. We also didn’t really have the time to skill the team up in using a whole new platform, so rather than build a new system we decided to use the one we already used for our website (WordPress and WooCommerce).

Finally because we had no idea of whether this was going to work, we also didn’t want to invest too much time and money in it. We would build what the startup kids call an MVP (Minimum Viable Product). It had to look good and it had to work, but it was fine if there were a few issues to be handled manually behind the scenes.

WordPress and WooCommerce

We use WordPress for our website already and use WooCommerce for our online store. It’s not the easiest system to use but it’s 100% configurable and customisable. If you know what you are doing you can do basically anything you want with WordPress, and anything you can’t do, you can get any web developer to do for you. In addition, there are loads of plugins that can help with basically anything you can think of.

For the main mobile website I wanted something very different to our normal online store. This is our normal store.

The current Black Hops online store

The online store is great but it’s a very typical online shopping cart type setup which isn’t exactly ideal for a quick, mobile-friendly ordering system. You have loads of products listed, you click on the product read about it, choose an option, add it to your cart, go back to the homepage browse through more products, click the product, read about it, choose an option, add it to your cart. When you’re done you go to the cart page and estimate shipping and refine your order then you go through to the checkout and put in payment info etc. It’s not what we wanted for Supply Drop.

Supply Drop needed to be more similar to something like Uber Eats where all the products are on the one page, there’s not a lot of info, you fly through it, add what you need and check out.

On the right is an image of what Supply Drop looks like. Here are the main things that are different between Supply Drop and our normal online store design, I’ll explain further down how it was done.

  • It has its own look and feel to it. I wanted something that looked and felt like a unique service not our normal online store.
  • All the products are on the one page as opposed to having pages for each product. You actually can’t click through for more info on the product, but I’ve added in a little (i) icon where it will pop up a little info box and tell you more about that product.
  • There are less products than the normal online store so it’s not too overwhelming and it’s manageable for the drivers.
  • You can choose your product size and add it right there from the single page.
  • Once you’ve chosen all of your products you get a ‘Check out’ link which you can click to take you straight to the checkout. We skip the cart process entirely, and it will automatically choose the Supply Drop $5 shipping method. You enter your payment info and finalise the purchase.
  • We also support Google and Apple Pay if you are accessing it via a computer or mobile website.
  • If you access it via a computer browser, it’s still a nice simple one page ordering system (image below).
Supply Drop on the computer

Here’s how all of those various things were achieved.

Firstly I found a plugin that could do a 1 page ordering site for WooCommerce. It’s called WordPress Product Table from Barn2. Here’s the link. It costs $140 as a one off purchase.

This plugin enabled me to build a one page ordering table where all the items were listed on the page. There is a lot you can do with configuring the table just with the plugin settings. So things like hiding the table columns, hiding the product description, choosing the colours I wanted and the size and position of the images, whether to link to the product pages (I didn’t want to), what order to sort them in etc were all simple settings in the plugin.

Getting the exact look I wanted was done with CSS with a simple CSS plugin that I use in WordPress called Simple Custom CSS (link here). I’m able to do most of this myself with the help of Google, but if you don’t know CSS yourself, it’s very simple for any web developer to help with.

Google / Apple payment buttons were done with a simple setting in the Stripe payment plugin.

The little (i) icon and more information was done with a Code Snippet that I had a developer do for me. It was a couple of hours work. We also have a message at the top of the screen that changes depending on the time of day. At first we were doing it manually, but I got my developer to automate that. Again it was an hour or so work.

I also had my developer add some code to Skip the cart page and go straight to the checkout and also have a button on there to wipe your cart and start over if people have the wrong things in their cart. I just googled how other people were doing this, found what was needed and sent it to my developer.

We set all the products up in WooCommerce in their own category and I set them to not show in the normal online store. So they technically are part of the normal list of products in WooCommerce, you just can’t find them. There are some downsides with this approach, but it was a good quick solution.

I set up a shipping method that we wanted to use only for products in this category and I got my developer to hide other shipping options. So if you go to Supply Drop and and your products you’ll go through to the checkout and the Shipping option will already be selected for you.

When the order is placed it goes into the rest of our orders but I have some email filters that search for the product category and forward the email to an app called Zapier (which connects apps together) which sends the orders onto another app called Trello. The drivers use Trello on their phones to see the orders, and drag them into a completed list when they are done. All of that can be done by a non developer and was all free. It’s not a perfect solution, there’s a bit of room for error, but it’s automated and free.

The Google Play and Apple App Store Apps

Once I’d built the mobile store I turned my attention to getting together a native app for the app stores for the service. I thought this would be a great point of difference and with the help of my mate Jarrod from The App Match, we were able to do it very cheaply and very quickly.

Jarrod uses a white label version of a tool called Good Barber which is a drag and drop mobile app builder. After discussing a few options, we decided to go with this option and he spent about 10 minutes on a Zoom call showing me how to use it.

Good Barber is super simple to use. I built the main app in about 2 hours just by dragging sections in, configuring the colours etc and getting it ready to launch. Good Barber has a bunch of cool existing features including a loyalty program, so it meant we had a great way of encouraging people to download the app.

Good Barber is a pretty awesome drag and drop app builder

The app is very simple it just has the ability for people to create an app account, scan a QR code for the loyalty program and also gives people the ability to share their supply drop with us. But the important thing is it produces an app file that we were able to have accepted into the Google Play and Apple App Stores, which would have otherwise been a huge amount of work.

We had to set up a Google and Apple developer account and pay the fees for those (I think $150 / year for Apple). Then we submitted the apps, and after an initial rejection, they were accepted into both stores (apps are often initially rejected for small reasons).

Good Barber also gives us some pretty cool stats, I can see who’s using the app, and how many downloads we’ve had etc. It’s been less than a week since we launched the app and we’ve had 3,500 page views and 540 app downloads (about half Android and half iPhone).

Other thoughts

The app itself doesn’t do anything for delivery, we handle all of that stuff manually. Once drivers get the orders in Trello, they manually text the customer and tell them they are on the way then they drag the order into the completed list. They add deliveries into Google Maps using the Save feature and it will show them all of the deliveries on a map. At the end of the day the Chair Force staff mark the order as completed in WooCommerce back at HQ.

There are many other ways you could go about building an app to do this. This approach was what we did based on what skills we had and the people we had access to, the time and budget etc. Here are a few other options you might consider:

  • Having just a mobile website would probably be fine in most cases. You could do that with WordPress / WooCommerce or if you are starting from scratch and aren’t super technical, something like Shopify could probably do the same thing and would be easier.
  • There are many services that handle delivery of product and you could use their apps. Obviously you pay a lot for that but they probably work really well. I didn’t look too far into existing apps that offer this, I was pretty set on building our own. But that might be a good option in a lot of cases.
  • There are template apps you can get that do really good online stores and even ones that are specifically designed for food and drink delivery. Again I didn’t look too far into them because I wanted to build it quickly off our store and I wanted to get the site live before the apps. But it’s worth chatting to someone about what templates are out there or doing some research yourself.
  • Building your own fully custom app is always an option. This is probably going to be very expensive, but ultimately for people with bigger budgets might be the most elegant option if you do it well.

If you have any more questions, feel free to ask them in our Facebook Ambassador group.