May 2018
Foodster
Overview
At least once a month, AdobeXD runs a UI challenge on its Twitter: using a premade UI asset or kit, design a specific type of app in XD. In May, Adobe asked us to use
Ana Miminoshvili's line icon set
in a menu ordering app design. I designed Foodster, a chill restaurant app that makes ordering new foods easy. I was incredibly lucky to win the grand prize on my first entry to the Lucky Draw challenges and got a brand new 13" Macbook to take home!
Jump to my solution here.
Users
I often hear my friends and cousins wanting to explore new foods, so I wanted to design an app for
users roughly age 18-30 who want to have new food experiences.
After tapping an appealing menu item, ideally the user would find suggestions for other matching items to create an enhanced and holistic meal.
Brainstorming
I identified a few key items I would need to keep in mind for the design:
1.
Considering the target demographic, the app should have a fairly youthful and energetic
appearance. The word "hipster" flashed through my mind frequently, although I don't think I adhered to that aesthetic very closely.
2.
Suggestions should be both easy to identify and easy to add to cart
when they appear. Users should be given enough information (photo and title) to quickly discern whether it's something they're interested in. If users like what they see from the thumbnail, they should be able to instantly add to cart in one tap.
3.
The design should use the line icon set as much as possible.
At the time I entered, I didn't realize it was a Lucky Draw challenge and hoped the judges would appreciate using the icon set frequently. I tried to come up with a few different ways to integrate the icons into the UI.
Solution
Branding
Considering the demographic, I used yellow for its happy and energetic effects and tried to keep the copy text casual. I also integrated the icons into the logo--scroll for more on icon usage!
SUGGESTIONS
For the suggestions, I used the same cards that are used in the menu since they're designed to show an overview of information and have a quick-add button. Each menu item will have a curated collection of good pairings, and if any category has greater than 2 cards, they'll be hidden with a 'See more' button.
Icon Set usage
I tried using the icon set in as many places as I could think of. I integrated them into the logo, as mentioned before, and used them anywhere the food categories are represented. I also added a low opacity version of the icons to the menu's detailed description boxes.
AdobeXD Prototype
Hint: Scroll down the home screen for the first action!
Thanks for reading!