TooGoodToGo: Add a feature — Delivery (UX/UI design)
TooGoodToGo made it incredibly easy to save food from the thrashcan! But if you are inconvenienced? Who will save you? TGTG has your back with their new delivery feature.
Help reduce food waste
TooGoodToGo is a great application. It allows supermarkets, restaurants and other food shops to offer food on the expiration date. You buy a bag with random items for a much lower price than they would usually sell for. However, you should eat it quick! This way the stores do not have to throw the food away.
The problem
The way the app works is that a user buys from the app and goes to the store between certain times to pick up his bag. However, what happens if you are inconvenienced? Or if you really want something, but can’t leave the office? This is where our added feature comes in.
The added feature introduces a delivery option on new orders, and offers a way to add delivery to an order you already placed.
Confirming the feature’s potential
“TLDR: Delivery is hot! There are many ways in which food is being delivered ant the industry is growing quickly.” Before deciding on the specifics of the feature I did some research. I started with a quick competitive analysis. Looking at the Netherlands delivery is growing. There are four different delivery services in Amsterdam and several supermarkets offer the service. Not to mention sushi and pizza places who generally have their own delivery system. Finally there are the upcoming subscription boxes where boxes with fresh ingredients and recipes are delivered to your door. Overall delivery revenue (platform to consumer) has increased by €43 million comparerd to 2018. This is expected to keep growing on a year to year basis. The same goes for restaurant to consumer delivery. Source.
“TLDR: Interviews showed current users are interested in (paying for) delivery!” Having confirmed there is a growing market for delivery I conducted two interviews with current TGTG users. I wanted to know if the current users would be interested in this feature. They had similar opinions. They knew TGTG bags had a lot of value, and they were willing to have them delivered. They would even be willing to pay extra for this (as long as it was not too much). They both sharerd concerns about not being able to pick it up after buying and wondered what would happen if they did not show up. Would they lose their money.
Feature specifics
While working on this feature I wanted it to be in line with TGTG’s core belief: A world without food waste. For this reason I added two different versions of the delivery service.
→ Eco delivery: Your order would be delivered collectively. This means that delivery would change if new orders are placed, since they work ‘efficiently’. You won’t be sure when it arrives at your door, but it saves costs and CO2.
→ Lightning delivery: Your order would be delivered individually. Delivery would be uninterrupted, straight to your door. This goes faster, but is a little more expensive.
The delivery itself could be either through an integration with existing delivery services, or through a new service of their own!
→ Adding delivery to the basket: Finally I have made it possible to add delivery straight to your order, or add it to an existing order afterwards. This second option is especially useful for those who planned to go themselves, but were somehow inconvenienced.
Prototyping
I did some user flows and mid-fi designs, but because I was mostly practicing my UI I am going to cut right to the good stuff… The final design!
In the comparison below I have added a really simple checkbox. I actually iterated on this design, because my original button was too large. It disrupted the information architecture, but also presented the delivery as a ‘main feature’ instead of a ‘supporting feature’.
After pressing the ‘add delivery’ check-box the user is presented with two options. The eco- and lightning-delivery. Eco is set as the default, but the user can swipe right to see the other option.
Designing for the app was quite a challenge. The overall design is quite simple and there are not many input methods. There was little to fall back on. This is, for example, why the eco- and lightning selection boxes are based on the cards used for the store information. I left the checkout process mostly untouched, save for a delivery/billing address page (shown in the preview below).
Finally, the ‘order overview’ has two different states. The first lets you add delivery to an existing order. This has been designed to feel very similar to adding it straight to the cart. Secondly, if an order already has delivery included, it gives the option to see the map and track the delivery.
See the whole flow in the video below!
One more thing…
So… your TGTG bag is being delivered. The doorbell rings and you run downstairs. The delivery guy asks to swipe your phone, but you realise you have left it upstairs. No problem, with the new Apple Watch app!
Stores confirm you received the goods by swiping your phone. This could just as easily be done with a Watch feature however!
Conclusion
Designing for an existing product or services always brings its own challenges and constraints. In this case working with a well-designed, but simple app, required me to design something that fit well with the overall flow. In my original mid-fi design I completely blew this, because my ‘add delivery’ button was far too big and did not fit in. However, in the iterated hi-fi design the feature blends in well and adds to the overal application.
If you liked this article and have questions or suggestions, please leave a message below. Thank you for reading!
