Food Retail Mobile App UI Design Challenge

Welcome to the “Food Retail Mobile App UI Design Challenge". Client already has an existing food app. We need to design a few missing functionalities to the app.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial designs for checkpoint feedback
01) Gift Basket
02) Blue Rewards

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented
01) Gift Basket
02) Blue Rewards
03) Complimentary Coffee

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

• Design an android mobile application.
• Create 3 UI screens.
• Provide a simple, clean and modern design which follows the existing app.

• Our client is a food retailer and already has the app. 
• They want to add a gift basket, complimentary coffee and Blue rewards functionality to the existing mobile app.

• Client’s customer: app will be used to purchase food products.

• Hampers: gifts containing small nonperishable food items, or other selection products that are usually available during special occasions or holidays.

• Name: Harold Johnson
• Role: Regular shopper
• Goals: To add product to gift basket, complimentary coffee and Blue rewards
• Frustrations: There are some missing functionalities in the app
• Wants: Ability to add product to gift basket, get a complimentary coffee and get Blue rewards

• Harold logs into the mobile app and can browse and order food items.
• He wants to send a gift basket to his parents. So, he sees this feature on the app called Gift Basket. He clicks on it and is able to pick a basket, choose a size and add products to the basket and buy them. 
• He can also avail complimentary coffee from the app. So, for every 10 cups of coffee he buys through the app, he gets one complimentary coffee free. 
• He also sees a cashback functionality from his profile section called the Blue rewards, where he can get some cash back. 

• Creativity: Conservative; barely new ideas, use what is already proven to work.
• Exploration: Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
• Aesthetics: Hi-fidelity design; provide a top-notch finished looking visual design.
• Branding: Strict; carefully follow the provided guidelines and stick to them.

• We just want to see the gift basket functionality.
• Users should be able to select a basket, choose the size of the basket and add food products into the basket.
• They can also add more baskets.
• Buying the gift basket is not in scope for this challenge

• This functionality comes under the Profile section of the app.
• Show a screen with a member card and barcode with total of cashback available.
• Need to show the Blue rewards logo (can google and find it).
• A button to redeem the cash.
• Use a placeholder inside the member card. 

• This functionality is about buying 10 cups of coffee and getting one complimentary coffee free. It needs to be color coded. For eg, every cup of coffee that he adds to the basket, you can have a green code/color, and the complimentary coffee color can be pink. 
• To redeem the complimentary coffee, users need to enter a PIN code which will be provided by the vendor. 

• Font: Proxima Nova
• Colors:
  • Primary: #BBD849, #FFFFFF, #333333, 
  • Secondary:: #EBE2DD, #E03042, #F5F4F2,
  • Text colors: #00000
• Icons: Preferred line icon. You may create icons from scratch or use any free for commercial use stock icons in your design. 
• Logo: please use a placeholder. Please avoid using any real logo in your design or you will fail screening.
• Style: clean, simple, and modern
• Form: see attached screenshot on documentation thread.

• Pixel 4: 1080 x 2280 px (design @1 or 360x760 and export in x2 or x3)

• We need you to upload your screens to Marvel App
• Please request for marvel app in the challenge forum
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources