Using the cards in context
Combined with smarter use of data, the card-based design reduces the feeling of a lot of steps to the process, starting on the initial screen the user sees when they open the app.
In the current design (left), you’re thrown right into a full list of options with various ways to filter them, and a lot of redundant and bright interface elements.
There’s a lot of red. The word “Lunch” is repeated 4 times in this one shot alone. There are two toolbars to filter the results in four different ways. Down at the bottom is a lost little link to the “Meal Planner,” a tool which has no utility since you can’t pick meals any more than a day in advance.
My proposed design (right) embraces all that MealPal already knows about you. The way a “favorite” works has been changed from favoriting the restaurant (which may have only one meal you like, and clutter your list of favorites other days) to favoriting the meals themselves.
Your favorite meals that are available today are displayed first, so you can immediately jump on a meal you love. Next, I show offerings from restaurants who have offered favorite meals in the past — there’s a good chance you might like something else they have.
Below that, not shown in this screen, is a list of all meals. This format provides an opportunity for other curated “food playlists” as the data gets smarter. (Meals that people with similar favorites have liked would be a great place to start.) You can dive right in to reserving any of these meals, or tap “See all” to see the full list in any category:
My proposal for the full list view (left) moves all the filtering options to the bottom toolbar so they are comfortably within thumb’s reach. Adding favorite meals is made much easier with a large tap target. (In the current design, the target is so small you end up tapping into the reservation screen more often than not.)
The search field — for the user who knows specifically what they want — has been turned into a simple button at the top, separate from the filtering tools for the browsing user. Tapping a meal opens the details in-place, so you don’t lose context:
Unlike in the current design (left), where you are whisked to a different screen to see ingredients, restaurant location, and other details, my proposal uses the card metaphor to show the information in the list itself. If you don’t like what you see, you can continue scrolling just as you were before with no need to shift modes and tap back out of the details screen.
Once your reservation has been made, it will appear in-context (right) as the top-most item in all lists of meals with a clear, legible design that focuses on the order number. The layout of the current design (left) is similar, but feels much harder to read at a glance, mostly due to a limited use of white-space, small fonts, and overly designed borders and colors.
Are you a MealPal user? Do you have the same frustrations I do with the current app? Or do my “fixes” do nothing for you? As ever, let me know by responding here on Medium or on Twitter @AdamFC. And if you or someone you know works at MealPal, please get in touch — as a designer and a customer it would make me so happy if any of these changes made it to the app. Thanks for reading!