Challenge Summary
Welcome to AppXpress – ContentChecked Holdings Mobile App Redesign Challenge!
ContentChecked is a mobile application for iOS and Android that allows users to scan product barcodes to determine of the food product they are interested in is suitable based off their personalized dietary preferences. ContentChecked is specifically for food allergies and intolerances.
There are sixteen allergens that the user can choose to avoid. They are listed in the app - the current lite version is free and available on App Store and Google Play.
If a user scans a product and that product contains one or more of their allergens they set to avoid, then the app will prompt them to click on “alternatives”, Alternatives is a list of similar, but suitable products for the user.
User can add any product they want to their “shopping list”, Inside the shopping list feature are two lists: one active, and one collection of 'archived' products the user has saved for future shopping lists. We do not yet have this feature, but hope to replace the “favorites” feature with said “shopping list” feature.
Round 1
Submit your design for a Checkpoint feedback:
0. Navigation.
1. Welcome Screen.
2. Allergy Settings.
3. Scanning Page.
4. Shopping List.
5. Recipe Screen.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final Design plus Checkpoint feedback:
0. Navigation.
1. Welcome Screen.
2. Allergy Settings.
3. Scanning Page.
4. Shopping List.
5. Recipe Screen.
6. Settings Screen.
7. History Screen.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description:
The goal of this application is to allow users to scan a food product barcode and quickly determine if it is suitable for them based of their pre-set dietary settings.
You are provided with current application screenshots so you can understand the application, we are looking for a full redesign here.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Branding Guidelines:
- Please use the provided screenshots for branding guidelines.
Supporting Documents:
- Current app screenshots (WireFrameScreens.pdf).
Design Goals:
- How should this application be designed?
- Read the user flow and decide what should the priority features be (what is the priority navigation for this user?)
- How quickly the user can find what he wants? What should the priority features be?
- How quickly can the user understand and interact with the app?
- The application should be easy to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
Target devices:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Make sure you create graphic in “vector” format, so when resize the graphic still look sharp! It will be great if you can provide the landscape version.
User Flow:
- Sally is on of the app users, she logins.
- Sally set her dietary restrictions (i.e. avoid gluten).
- Sally scans a product with barcode scanner.
- Sally sees "product profile" which shows the dietary profile for the things she set to avoid (i.e. 'free from milk, contains gluten"), the ingredient list, photo of product, product name, etc.
- If product is not suitable, Sally can view "alternatives" list.
- If product is suitable, Sally can add it to "shopping list" (currently "favorites").
- In shopping list, Sally can star or like a product to add it to their most "live" or recent shopping list.
- Sally can share, like, comment, rate any product they scan or find.
- Sally can share their shopping list with friends and family.
- If Sally sees a problem with a product, they may report it to ContentChecked team.
- Sally may browse, like, and save recipe to shopping list to remind them to buy the ingredients.
- Sally can change settings at any time.
- Sally can view their history of scanned items.
Main App Features:
1. Barcode Scanner.
2. Settings.
3. Favorites (we would like to change to "shopping list" instead).
4. Recipes.
Required Screens:
0) Navigation:
- How does the user navigate this application?
- Include navigation that you think fits with this application.
- Focus on the priority items and how things should be sized.
1) Welcome Screen:
- Please refer to page 1 of WireFrameScreens.pdf
- This page should reflect the ContentChecked branding and look "premium" in design.
- A user should be able to get to a Help/Getting Started page.
- User needs to fill the following fields:
-- Username (email).
-- Phone (optional).
-- Date of birth (optional).
- User needs to accept the terms.
- User can watch a video about the app to understand what’s it all about.
- Then we need a “next” button.
2) Allergy Settings:
- Please refer to page 2 of WireFrameScreens.pdf
- User will need to set his dietary restrictions:
-- Celery.
-- Eggs.
-- Fish.
-- Gluten.
-- Lactose.
-- Lupine.
-- Milk.
-- Molluscs.
-- Mustard.
- Then when the user finishes he clicks done.
3) Scanning Page:
- User scans a product with barcode scanner.
- User will now see "product profile" which shows the dietary profile for the things she set to avoid (i.e. 'free from milk, contains gluten"), the ingredient list, photo of product, product name, etc
- If product is not suitable, user can view "alternatives" list.
- If product is suitable, user can add it to "shopping list" (currently "favorites").
4) Shopping List:
- In shopping list, user can star or like a product to add it to their most "live" or recent shopping list.
- User can share, like, comment, rate any product they scan or find. (Please refer to page 9 of WireFrameScreens.pdf)
- User can share their shopping list with friends and family.
- If user sees a problem with a product, they may report it to ContentChecked team.
5) Recipe Screen:
- Please refer to page 7 of WireFrameScreens.pdf
- User may browse, like, and save recipe to shopping list to remind them to buy the ingredients.
6) Settings Screen:
- Please refer to page 8 of WireFrameScreens.pdf
- User can change settings at any time.
7) History Screen:
- User can view their history of scanned items.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target audience:
The users of this app are those with dietary restrictions and preferences.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
- Making the site something they would check and potentially participate.
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.