Challenge Summary
Welcome to the Salesforce PDEverywhere - Manufacturer and Retailer Community Portal Design Challenge..
Our client in this challenge is looking for your help to design the look & feel of a portal and community websit designs that will be accessed via Desktop browsers and iPad.
We are looking for your design expertise to help us create innovative interfaces for this application!!
Round 1
Submit your initial screen for Checkpoint feedback
Scenario 1
1.1 Home (Desktop)
1.2 Product Overview Page (Desktop)
1.3 New or Existing Product Data Input (Desktop)
Scenario 2
2.1 Home (Desktop)
2.2 Search Results Page (Desktop)
2.3 Product Overview/Details Page (Desktop)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: 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 page with all checkpoint feedback implemented.
Scenario 1
1.1 Home (Desktop)
1.2 Product Overview/Details Page (Desktop)
1.3 New or Existing Product Data Input (Desktop)
Scenario 2
2.1 Home (Desktop)
2.2 Search Results Page (Desktop)
2.3 Product Overview/Details Page (Desktop)
Scenario 3
3.1 Product Details (iPad Portrait)
3.2 Chatter (iPad Portrait)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Purpose of this challenge is to create the look and feel for 3 interfaces which will allow for entry and consumption of consumer good product information via desktop web browser and iPad. These interfaces should all have a common look and feel however the target user for each interface is different.
The Applications are (with target user):
- Product Specifications Community Portal (Manufacturer) - Scenario 1 (Desktop Web Browser)
- Retail Manager’s Community Portal (Retailer) - Scenario 2 (Desktop Web Browser)
- Manufacturer Rep Mobile App (Sales Representative) - Scenario 3 (iPad Application)
IMPORTANT!! Design Considerations
- Keep things consistent. Try to develop a unified design which scales to each of the three use-cases.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Fonts are open to the designers..
- Follow the colors from the attached branding guidelines document.
- PDEverywhere (Branding Guidelines.zip) will be the lead brand for this challenge, but we need to show how it works with co-branded partners (logo and images attached).
- Please use the provided example branding items (logos, and images) that can we used in your design concepts
- Please use a placeholder for logo for PDEverwhere.
- We have attched few design examples - to help you get inspired..please DO NOT COPY
Screen Sizes:
- Scenarios 1 & 2 are desktop-based, please use 1440 x 900 or scaled larger equivalent
- Scenario 3 is iPad: 1536 x 2048 resolution at 264 pixels per inch (ppi)
Required Designs:
We are looking for your help to designs the screens for above mentioned 3 applications based on the below given scenario..
A. Manufacturer: (Desktop)
Product Manufacturers (i.e. Coca Cola) to enter their complex product data via an online portal.
Scenario 1:
For this example, we have assumed that a GDSN (Global Data Synchronization Network) Specialist at Coca-cola, responsible for entering detailed product information into a central data system. This user will be uploading attributes for all products on a recurring basis (weekly). Details uploaded by the manufacturing company (Coca-cola) will be used by the retailers (Kroger) and feed into their product master. In this Product Specification Community Portal, we will allow Manufacturing employees to input new/modify existing product data.
1.1 Home:
- Welcome screen with menu items for product listings
- Analytics widget with overall categories with greatest number of new products entered (popular categories leaderboard: “50 new soft drink entries this week, 20 new flavored teas”)
- Come up with a notifications bar: social conversations (question from retailer), new product entry notifications..
- Need to show a global search bar..
- Global menu items: home, new product data entry, analytics dashboard, product contents
1.2 Product Overview/Details Page:
- Primary product details and all available attributes for said product
- Includes analytics (graphs) on things like product quantity sold, trending sales, competitive products, complementary products (“ships well with/goes well with”) for the category
- Collaboration feed around this SKU/product where others have asked questions about it and add buttons to share with downstream retailers like Kroger; buttons to share with external
- Ask the experts/get help button (Think of linking this content to a product expert that the user can collaborate with)
1.3 New or Existing Product Data Input:
- We expect this screen to be modal overlays..
- Assume the user has decided to edit the data or it could be a new product data input.
- A manufacturing user entering data for a product like a bottle of Coc- Cola may need to enter dozens or hundreds of product attributes. These would include, but not be limited to, ounces of coke in a bottle, physical size of bottle, weight of bottle, # bottles in a case, size of case, weight of case, number of cases in a crate, size of crate, weight of case, etc. Other attributes could include nutritional info, UPC code, whether the product is Kosher/Halal/Other, etc.
- Product attributes (size of can in ounces, physical dimensions of can/case/crate/pallet, etc.) will vary widely depending on region, the type of product, and the end retailer who will be distributing and stocking the product (i.e. to input Lysol, person at P&G needs to enter corrosive info, to enter Crest Toothpaste, person needs to enter fluoride content, gel vs. paste, etc.).
There are three kinds of product attributes:
- Core attributes - the same across all distributors for a product (weight, liquid volume, dimension)
- Region-specific attributes - attributes that apply only to specific regions (I’m in the U.S., so my interface should automatically suggest fields which are relevant to the U.S.)
- Retailer-specific attributes - attributes that apply only to specific retailers (is the product organic?)
Design Problem:
- Current user interface presents the data entry person with a UI including dozens of attribute groupings in tabs and dozens or hundreds of fields on each tab.
- New UI should take into consideration WHO is entering the data, WHERE the product is being sold and through WHICH retailer such that the UI presents only the relevant subset of all available fields.
- Fields to be populated must be obvious, interdependencies between fields should be clear and order of completion should be intuitive.
- Interfaces should allow for easy data entry for high volumes of data (with 100s of attributes).
B. Retailer: (Desktop)
Retail partners (stores/major distribution chains i.e. Kroger, Walmart etc..) accessing Manufacturer product data via their own online portal.
Scenario 2:
A retail buyer (category manager) at Kroger, responsible for gathering product information for items sold in Kroger grocery stores. This buyer needs to be able to interact with product data, so below use-cases are required to allow the user at the retail store to interact with product data.
2.1 Home Page:
- Kroger employee arrives at Home Screen, key areas of the home screen include the following..
- We would like to see a profile section..
- Search Bar that allows the user to search for a product quickly to manage it.
- Recently viewed items
- Recommended Items / Future Coming Soon Items - based on prior product data download
- News feed (aka Chatter) showing changes in product data? E.g. Coca Cola 6 Pack now 1 inch longer
- My Products “dashboard” - with button “Commit Data Changes to Back End?”
2.2 Search Results Page:
- Kroger Employee Searches for coca-cola and the results show up..
- Think on how to show the search result
- Faceted searching, filters, and categories might help end-users zero in on the specific product or group of products they want to review.
- show the filters in this page to allow users to further customize the search results
- Search on Attributes e.g. “Does not contain Caffeine” or “does it contain arsenic?” or “Is the product certified organic?”
- Smart Search? (e.g. Did you mean this?)
2.3 Product Overview/Details Page:
- Assume name of the product as "Coke Zero 6 Pack"
- Generic get help now/Ask a product expert
- Product Hierarchy reference (“View Product Hierarchy” Button)
- Includes specific product packaging information, the weight of the product, what quantity fits in a standard box, how many boxes fit on a shipping palette
- Need to show the standard product attributes ex. dimension, weight, volume (if liquid)
- As a retailer, they might have specific attributes to be entered for a product, so need ability to view Retailer (Kroger) Specific Attributes - example: “contains trace elements of nuts?”
- Need ability for a retailer to “Request New Attribute”, think on how a user can initiate such requests to the manufacturer?
- Section for Similar Products. Merchandised Alongside/Complementary Products.
C. Product Sales Representative walking around a Store: (iPad Application)
- Mobile App for users to view product data (i.e. Product Sales rep walking around a store)
Wireframe for the below flow has been attached..
- We would like you to think on overall look & feel of this iPad application that will be used by the sales representative..
- How should the navigation be shown?
- What are the features that can be shown to help the user, search etc..
Scenario 3:
A new item from Glade is delivered via truck. The receiver (i.e. Product Sales rep walking around a store) in the warehouse scans the item, which brings up the product record. Upon a quick glance, she realizes an inconsistency in one of the key attributes - the item weight is incorrect, as this is a new type of Glade plug-in air freshener that are delivered in a 12 pack, however the product record displays this as a 3 pack. The receiver immediately reaches out to the Kroger merchandising group, posting a notification about the inconsistency. A Buyer responds with correct product information, then submits a request to update the information in the Product Master. Approval is then provided by the Procurement Manager, which results in an update to the Product Master.
3.1 Product Details:
- Once the receiver scans the product, we need to show the details of the product that was scanned..
- Product details need to show basic information about the product (e.g. item weight) along with the product image.
- Going through the details, user identifies the inconsistency (incorrect weight) and decides to notify Kroger merchandising group, they tap the “Notify” button.
- Allow the user to attach a picture of the actual product.
3.2 Chatter:
- Receiver’s notification on product inconsistency is shared to the Procurement Group
- A buyer responds with correct product information and submits a request to make the change for correct product information to be updated in the Product Master
- Approval is provided by the Procurement Manager and the correct product information is now updated in the Product Master
Target Audience:
- Business Owners and Executives
Judging Criteria
- How well you design the provided design challenge
- Cleanliness of your graphics and design.
- Design and User Experience.
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors. Winner of this challenge might be asked to create the retina designs as a part of final fixes.
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.