Colruyt Group Product Information Database Design Challenge

Welcome to the Colruyt Group Product Information Database Design Challenge! 

In this challenge we're looking for a responsive design for a website that tells supermarket shoppers and healthcare professionals everything they need to know about the products in Colruyt's stores

In this challenge, we are looking for DESIGN CONCEPTS on how this Application could work. What should the user see and experience when using the application!.

Round 1

Submit your initial designs for Checkpoint Feedback

0. Front Page (Desktop)
1. Product Page (Desktop + Mobile)

Feel free to add any other additional screens which are necessary to explain your concept.

Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

0. Front Page (Desktop + Mobile)
1. Product Page (Desktop + Mobile)

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

For this challenge we’d like you to design concepts for a responsive website that enables a user to find the information they want about a product as easily as possible. Once found, that data needs to be presented so that its meaning is clear and unambiguous.

Colruyt Group are a European retail group focussed primarily on a chain of supermarkets. European Union regulations require them to post information about the products they sell online, including nutritional values, allergens and special instructions. Currently they have a simple version of this site online, which can be viewed here:
https://fic.colruytgroup.com/productinfo/requestproductdetails?language=EN&channel=COGO&articlenumber=1837859

As you’ll see this presents the information with very little visual flair. More importantly this design does not work for mobile devices, which is important as Colruyt would like their customers to be able to access the site on their phones whilst they were shopping in their stores.

Design Considerations
- Looking for modern, intuitive, responsive user interface that works as well on mobile as on desktop
- Focus on the design being a great user experience
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path, so we can see how the interactions fit together in the application
- Stock Photos: Feel free to use any images related to this site

Screen Size:
- Desktop: 1024px width and height as required
- Mobile: 320 x 480 px

Design and Branding Guidelines
Colruyt Group's brand guidelines are attached. Note that the language used in the document is Dutch.
IMPORTANT: Only use the logo and colour information from the brand guidelines - DO NOT use it to guide your design.
You should also read Colruyt Group's Mission and Brand site so you understand the business and its aims.

User Scenario:
As a shopper I would like to:
- Search for product information
- Access that information at home or in store
- Find information regarding health, instructions for use, storage, preparation and, importantly, sustainability.

As a healthcare professional (doctor, dietician) I would like to:
- Search for a product
- Access data about any allergens that product might contain
- Access nutritional information about the product

Screen Requirements
We are looking for you to design a website with the following screens:

0. Front Page
- Give a search box for the user to enter a product
- Give an introduction to the site, explaining the information it contains

1. Product Page
- Barcode is the top level of the data - each barcode can have different allergens, ingredients, etc.
- We will need Provide a picture of the product

The following details are required:

Allergens
- Values for: Gluten, Celery, Crustaceans, Eggs, Fish, Lupin, Milk, Molluscs, Mustard, Peanuts, Sesame, Soy, Sulphites, Nuts
- Categories: Contains, May Contain, Does Not Contain, Unknown

Nutritional values
- Value per 100g or 100ml and value per portion
- Values for prepared and unprepared
- Values as a percentage of recommended daily amounts (RDAs)

Vitamins
- Value per 100g or 100ml and value per portion
- Values for prepared and unprepared
- Values as a percentage of recommended daily amounts (RDAs)

Minerals
- Value per 100g or 100ml and value per portion
- Values for prepared and unprepared
- Values as a percentage of recommended daily amounts (RDAs)
- Instructions for use
- Producer details
- Waste Management
- Origin Information

Marketing information
-The portion to be used (e.g. 'one glass is 250 ml')
- Storage instructions (e.g. 'in the dark away from heat')
- Cooking tips
- Extra info on allergenes
- Environment and packaging (can packaging be recycled and if so, how?)

Keywords

Target Audience:
- Supermarket Shoppers
- Healthcare professionals 

Judging Criteria
How well you plan the user experience and capture your ideas visually
Cleanliness of your graphics and design
How well you minimise the number of clicks required to complete the process and so get the user to the content as quickly and easily as possible

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 colours. We may ask you to update your design or graphics based on checkpoint feedback.