Challenge Summary
Welcome to PGP Wegmans Portal Design Challenge! In this challenge, we are looking for [topcoder] community to help create set of interfaces for our new application. We are providing wireframes to help get you going, plus we are providing a previous storyboard for branding and colors reference.
Note: This challenge will be run as a one round challenge, meaning we will not have checkpoint prizes and feedback.
About Project:
Our client, PGP is looking for fresh look for their new portal that they are contracting us for to service their client Wegmans. The portal in the end will be built on Salesforce Communities and leveraged via iPads. Their leadership staff and service agents will be the ends users. The portal in the end will enable the end users to submit service tickets, review the tickets and the ability to review checklists. All of which is critical to the success of the operation as a whole and drive a better UX for the users.
As stated above, the functionality that the portal will support at a high-level is:
- Submit tickets
- Review specific tickets
- View checklists (a survey of sorts)
Style Theme:
- We'd like to have a clean and simple design.
Supporting Documents:
- Branding Guideline (Wegmans_Portal.pdf.zip)
- Click thru wireframe (Wireframe.zip)
- Logos (Logos.zip)
Design Considerations:
- Please go through branding guidelines given.
- The App should be easy to use.
- REMEMBER: DO NOT COPY the wireframes exactly - The wireframes are meant to help guide you and let you understand the application the audience would like to see designed. Think about the user
experience/user interactions and show us your solutions! You can do something different or whatever you think make sense of this mobile application.
- Review the wireframes - they are very detailed and will help, but do not copy 100% the layout, be creative!
Screen Size:
- Desktop/iPad 1024px width and height as required.
Required Screens:
We have provided a click thru wireframe for you to use for this challenge in addition to the branding guideline document. Please do not copy the wireframes exactly.
1. Login page
login.html
- User should be able to provide his email address and password.
- We need “Don’t have an account?” & “Forgot password?” links.
- We need a sign in button.
2. Store look up page
store_lookup.html
- We need a store look up by store number.
- Show search suggestions when entering some numbers.
3. Store list page
store_list_screen.html
- Show the stores found in the area.
4. Selected store page
- In this screen we will have three main options:
A) Create Service Request
store_result_screen.html
Fields:
- Region
- Store
- Department
- Date Reported
- RSC Case number
- Equipment type
- Issue Reported
- We need a submit service request in button.
B) View Wegmans Data
view_wegmans_data.html
- Two different Service Ticket types that are essentially cases:
-- Warewash
-- Sanitation
- List view with filters.
- Table Fields:
-- Region
-- Store
-- Department
-- Date Reported
-- RSC Case number
-- Equipment type
-- Issue Reported
-- Resolution Status
C) View PM Checklist
view_pm_checklist.html
- Very similar to a survey
- Broken down by department
- Should only be one for the entire store’s checklist
- Structure
-- Department:
1) Area:
- Floor
- Shelves
- Storeroom
- Checkout
- Bathroom
- These areas will have sub fields or checklists that would open like an accordion or something:
-- Rating 1-5 of upkeep?
-- Sanitary 1-5
-- Up to standard?
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:
- Wegmans leadership staff.
- Wegmans service agents.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
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.