III) Designing for Meals, instead of an endless list of food items.
Alright, so now that we have a slighty better idea of how your interactions with these apps dictate what you and everyone else sees in the long run, we’re still left with the question of how can we design something that adds more context without adding even more filters and options for users to have to navigate through.
Thus, I began by pulling the food items right out of the menus and placing them onto a home page. After a user taps on an item, the aim would be to guess and display several of the most likely items they might tap next.
Unfortunately, after creating a few mockups and testing it out with friends/family this was even more overwhelming than current apps, with a myriad of potential issues and limitations:
- We would be limited to rewarding items a user taps on, and assume all other options were worse.
- Why did a user choose one item over the other?
- What if a user wants something different from what they would normally choose but it wasn’t displayed prominently enough?
- Does the user prefer combination x-y-z over combination a-b-c taste wise, or is it just because they had no idea such a combination was possible?
What would a GAN/DeepRL do?
After a considerable time mulling around and a flurry of headlines in the news, I came across some research regarding Generative Adversarial Networks and in particular Deep Reinforcement Learning. And although on the very surface these are similar to the Seq2Seq model I discussed above, DeepRL goes several steps further and instead of merely focusing on what the correct response to an input should be, is able to take each individual input and learns what the best sequence of steps are needed in order to produce a positive outcome. Such techniques have been implemented by DeepMind with their infamous AlphaGo AI, which has already shown a solid track record of quickly learning and applying that knowledge to incredibly abstract problems, by intuitively understanding how to reach it’s goal. You can read more about this from DeepMind themselves, here.
I was inspired by this goal oriented approach and even though I would be ignoring the fact that there was little to no data easily available (in current form) to back any of this up, I was inspired to come up with what I called Meal Cards — A container comprised of what could begin with a decent guess of what a meal could be but, with the right tools could eventually learn to bring some order and sense to menus.
Here, I’ve tried to give an idea of how meal cards could further be grouped by different Scenarios; Breakfast, Sports Game, Night Out, Dining w/Family etc. & Food-based Themes.
At this point I had a basic idea of what I wanted the focus of my design to be, as well as several key goals it had to achieve:
- Three scenarios; Ordering while Dining-In (Single Menu); Pick-Up; Delivery
- Easily switch between Scenarios/Theme Playlists.
- Remove as much chance of any potential bias snowballing out of control.
- Reduce a user’s short term memory load.
- Make a fun & interactive way to fine tune the Meal Cards!
Now to begin putting all of that together into a neat package.
Armed with this list, a bunch of crude drawings and diagrams, I downloaded Framer.js and decided to use this as a task to get acquainted with Coffee Script itself; made a rectangle in the design page and eventually I managed to come up with this.
What I wanted to do was make the Home Page the absolute centrepiece of the entire app and have the user’s context drive what to display on it, whilst always keeping a consistent centre of navigation, with natural positioning of the complimentary sections of the entire app (Swiping up moves you to the section above, wherever you are; swiping back down should return you to your original position).
“Hey User’s name” is a nice and friendly welcome to the app and will stay constant, allowing you to always click on your name to see an Overview (I talk more about this section below).
“Here are some meals we think you’ll love for Most Likely Scenario & Playlist today!” This section would adapt to your location, weather, time of day and try to suggest what type of meals you’d be interested in looking through right now. Moreover, you can tap on it and switch the suggestion for another one or search and find Meal Cards that fit in that parameter instead. Also, if you’re Dining-In it would only display meal cards that fall under the same scenario but from that specific restaurant.
Below this we would display n types of Meal Cards (composed of multiple suggested items) that fall under the Scenario (e.g Lunch) that you can swipe left if it’s unsuitable and you don’t want to see any more suggestions like this. Or swipe right if it’s good but not quite good enough. By n types of Meal cards, I essentially wanted to allow users to swipe within a specific lane of Meal Cards, where each lane is composed of generally similar Meal Cards but with slight changes with the combinations. Each lane will also be different, but all n lanes will fall under one shared Scenario. Personally, I think having five would be best as it’s not overwhelming you with options, while also giving you enough to compare between.
Once, you’ve found a Meal Card you like you can hold down on it and complete the order with any additional modifications. We would then use these modifications to help autofill subsequent next Meal Cards.
Contextual Sorting (Playlists)
As described above, this section would bring together the most likely scenarios and themes of food you would interact with based on the time of day, weather and so on, as well as taking whether you’re dining in, picking up or ordering for delivery into account. They’re akin to Curated Playlists, composed of Meal Cards you can swipe through.
Irregardless, of how the Home Page has adapted to your context (Scenario/Theme + Dining In, Picking Up or Ordering In) you can always swipe up to enter what I call the Power Search. Why the cheesy name? Well it allows a single or multiple users to combine their different taste preferences, budgets, current contexts, etc. together and use that to drive the curation of Meal Cards on the home page! Specifically, your history would dictate what would be on each of the three sections and allow you to the fine-tune it to your likings (The third page would be populated and weighted using a mix of your preferences as well as what’s currently popular).
The main aim for this section was to help individuals who quite literally have no idea what their stomach is telling them to eat, and for those moments when you’re in a group wishing you could read everyone else’s minds to help you decide what to actually order.