DinDin
The challenge
According to the National Restaurant Association, restaurants generate an estimated 22 to 33 billion pounds of food waste annually in the United States. Much of this waste is unavoidable from a business standpoint, since restaurants and bakeries must over-prepare food if they want to maximize profits. As a result, a significant portion of the waste consists of fresh, ready-to-eat food.
If there was a way to sell these end-of-day food products, it would provide an option for customers looking to save money, as well as help food sellers reduce their waste, and make a little extra money.
The opportunity
The aim of DinDin is to create a discount marketplace where low-budget customers can shop for surplus meals and groceries at the end of the day, when sellers are nearing closing time. My target audience is already familiar with food ordering platforms, so I need to leverage the design patterns common to that experience.
Research
Competitive analysis
Sadly, food waste prevention is not a high priority problem in the U.S. tech world. Fortunately, there are several successful startups abroad from which I can draw inspiration. FlashFood (Canada), Karma (Sweden), and Too Good To Go (Denmark) are prime examples of surplus food marketplaces.
FlashFood
In terms of design, this app has potential for improvement. The white-on-white pattern, as well as tile outline inconsistency (some have a drop shadow, others a border) could be handled better. The text density, sizing, and contrast leave a lot to be desired. But the savings info is an excellent addition to the experience, and something I will want to consider.
Karma
Here's an app that's full of design inspiration. Aside from their brilliant use of photography to capture the user's attention, I'm a big fan of their horizontal scrolling filters on the Food screen, as well as the way they've used partial sheets to avoid too many screens in the journey. I also find the increment/decrement buttons on the product screen to be elegant and intuitive.
Too Good To Go
One design element on this app that is missing from the other two is the cover photo for each seller on the main feed. This is a great way to communicate the types of food sold at each business, as well as showcase their best products. I also appreciate the full-bleed cover photo on the seller screen, which gives the user the feeling that they're in the store.
Journey map
Before I can even begin to lay out the steps for my customer journey, I need to understand the state of mind of my customer at each phase of the process. A journey map helps me standardize the journey phases and forms of engagement, so I can focus instead on my customer.
By having a clear understanding of what my customer is thinking, doing, and feeling, I can begin to discover opportunities for maximizing the positive experience. Once I know those opportunities, I can prioritize them in my UX designs.
UX diagram
While the happy path for this app is relatively straightforward, there were many other scenarios to account for. What happens if a user tries to add products to their cart from multiple sellers? What if a store is active but has no products? What if a category exists but has no stores?
This is where a tool like Lucidchart can make a significant impact on a project like this. A key step in accounting for all scenarios and edge cases is to lay out every possible step in each scenario, and ensure the user is not left stuck in a dead end.
The design
Taking all of the lessons learned and inspiration gathered from competitive analysis, and combining them with my own aesthetic decisions, I was able to produce an app that makes the user feel that they are a few taps away from a fresh, delicious, low-cost meal.
Since I know that my users are either hungry or will be soon, I can lean on eye-catching photography and iconography to help them easily find what they're craving, without having to read too much. I've also decided to dial it back with color, only using different colors to communicate information, which allows the imagery to really pop.
