Challenge Summary
Welcome to the Land O'Lakes - Purina Mills Merchandising Responsive UI Design Challenge! The goal of this project is to build a website that inform the customers and potential customers of the products, services, people and locations of Purina Animal Nutrition LLC Ingredients Merchandising.
For this challenge, we are looking for your best responsive UI designs and layout ideas to design several pages. Keep in mind that the end product will be built using Zurb Foundation and WordPress.
1) Landing page
2) Product page
3) Product Details page
4) Peoples page
5) Biography page
6) Locations page
The goal of this challenge is to design the pages outlined below. These pages should be optimized for Zurb Foundation and WordPress.
- Tablet size: width 768px and height as required.
- Desktop size: width 1280px and height as required.
- Make sure your work is in a vector format to easily scale for retina.
- Double check your storyboard source files to make sure all graphic assets are easy to export for the next development.
- Feel free to suggest any logic/functions that can bring good User Experience for this website.
- The web site design will need to be clean and professional while structuring the information to be easily browsed by customers.
- Design must meet the A conformance level of WCAG 2.0 guidelines.
- Branding style can follow www.purinamills.com. Refer to Purina-Style-Guide.pdf from the provided branding files for more info.
- the main persistent components of the site will consist of branding, primary navigation, secondary navigation, site search input and footer information.
Primary Navigation screens
1) Landing page
- briefly introduce the products, services and people.
2) Products page
- display all products in alphabetical order.
- product list can be filtered by categories: energy, feed ingredients, grains, oilseeds or by location or by people.
- this page needs to cross-reference information to the People and Locations landing page. Example: a product will display information about a product along with the people and locations that specialize in that particular product.
3) Product Details page
- displays product information, images, category, location, and people.
4) Peoples page
- this page will list all the team members and personnel that support the team in alphabetical order and categorized by competency.
- a photo of each member, along with name, title and location will link to a biography when available.
- need to cross reference to Product and Locations page.
5) Biography page
- this will also list product and/or service specialization
6) Locations page
- this will consist of a map of the United States with the Purina Animal Nutrition LLC Ingredients Merchandising locations plotted.
- each plotted location will be linked to its location detail page.
- need to cross reference to Product and People page.
7) Locations Details page
- this contains a photo of the location, address, and contact information
- it has also list of staff, list of products, and list of services.
8) Services page
- this page will provide a detailed description of each of the services provided
Secondary Navigation screens
9) About page
- will contain some background on the Purina Animal Nutrition LLC Ingredients Merchandising team, Purina feed, and Land O’Lakes Inc.
- it will also have about/history info.
10) Contact page
- will contain an contact form to send correspondence to the Purina Animal Nutrition LLC Ingredients Merchandising team.
11) Resources page
- will contain links to helpful documents, information, and links.
12) Login page
- this will have a login form that will provide access to client portal login.
- https://www.perdueagribusiness.com
- http://www.lansingtradegroup.com
- Please request an MarvelApp project from the Copilot through the challenge forum.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience
- How well you interpret the example screens and show us new ideas and concepts
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.
For this challenge, we are looking for your best responsive UI designs and layout ideas to design several pages. Keep in mind that the end product will be built using Zurb Foundation and WordPress.
Round 1
Submit your initial designs for checkpoint feedback.1) Landing page
2) Product page
3) Product Details page
4) Peoples page
5) Biography page
6) Locations page
Round 2
Submit your final designs of all the pages with updated solution based on client checkpoint feedback.The goal of this challenge is to design the pages outlined below. These pages should be optimized for Zurb Foundation and WordPress.
Design Requirements:
- Mobile size: width 375px and height as required.- Tablet size: width 768px and height as required.
- Desktop size: width 1280px and height as required.
- Make sure your work is in a vector format to easily scale for retina.
- Double check your storyboard source files to make sure all graphic assets are easy to export for the next development.
- Feel free to suggest any logic/functions that can bring good User Experience for this website.
- The web site design will need to be clean and professional while structuring the information to be easily browsed by customers.
- Design must meet the A conformance level of WCAG 2.0 guidelines.
- Branding style can follow www.purinamills.com. Refer to Purina-Style-Guide.pdf from the provided branding files for more info.
Screen Requirements:
0) Overall pages- the main persistent components of the site will consist of branding, primary navigation, secondary navigation, site search input and footer information.
Primary Navigation screens
1) Landing page
- briefly introduce the products, services and people.
2) Products page
- display all products in alphabetical order.
- product list can be filtered by categories: energy, feed ingredients, grains, oilseeds or by location or by people.
- this page needs to cross-reference information to the People and Locations landing page. Example: a product will display information about a product along with the people and locations that specialize in that particular product.
3) Product Details page
- displays product information, images, category, location, and people.
4) Peoples page
- this page will list all the team members and personnel that support the team in alphabetical order and categorized by competency.
- a photo of each member, along with name, title and location will link to a biography when available.
- need to cross reference to Product and Locations page.
5) Biography page
- this will also list product and/or service specialization
6) Locations page
- this will consist of a map of the United States with the Purina Animal Nutrition LLC Ingredients Merchandising locations plotted.
- each plotted location will be linked to its location detail page.
- need to cross reference to Product and People page.
7) Locations Details page
- this contains a photo of the location, address, and contact information
- it has also list of staff, list of products, and list of services.
8) Services page
- this page will provide a detailed description of each of the services provided
Secondary Navigation screens
9) About page
- will contain some background on the Purina Animal Nutrition LLC Ingredients Merchandising team, Purina feed, and Land O’Lakes Inc.
- it will also have about/history info.
10) Contact page
- will contain an contact form to send correspondence to the Purina Animal Nutrition LLC Ingredients Merchandising team.
11) Resources page
- will contain links to helpful documents, information, and links.
12) Login page
- this will have a login form that will provide access to client portal login.
Site Reference:
The following are client’s competitor websites for your reference only and DO NOT clone them.- https://www.perdueagribusiness.com
- http://www.lansingtradegroup.com
MarvelApp
- You must upload your submission to MarvelApp so we can provide direct feedback on your designs.- Please request an MarvelApp project from the Copilot through the challenge forum.
Target Audience
- Purina Animal Nutrition LLC Ingredient Merchandising customers with a need for expertise in international and domestic trading and merchandising.Judging Criteria
- How well you plan the user experience and capture your ideas visually.- Cleanliness of your graphics and design.
- Overall design, UI and user experience
- How well you interpret the example screens and show us new ideas and concepts
Submission & Source Files
Preview ImagePlease 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.