Challenge Summary
Welcome to Appollo - Wallet Pass Design Challenge!
Our client is looking to rebuild an existing product for their wallet pass. We are looking to help them redesign their generic pass style. Here's a link to the Apple document on how to do a pass design.
Good luck everyone!
- Initial design.
- 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).
- Final design with any checkpoint feedback implemented.
- 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 challenge is to create a set of screens to design a "Wallet Pass" for our customer. Here's a link to the Apple document on how to do a pass design.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Note: Apollo is just a codename for our client.
Notes:
- Pass designer is a web app and will function on native firefox and chrome updated browsers in PC and MAC environments.
- Need a visually appealing Generic pass layout from the Apple pass choices.
- Pass designer login credentials needed for designing passes and using the web app.
Design Notes:
- This is going to be a web App.
- Desktop Size: 1280px width and height as required.
- Should be resizeable to function on a tablet (iPad, other), so please consider responsiveness while designing your solution.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Required Screens:
00 Splash Screen:
- A simple splash screen for when the user connects to the wifi. This is the screen you are directed to when you connect to a retail or public wifi access point that is configured with a captive web portal. This page should be branded according to provided branding guidelines. (splash screen example.png).
-- It only needs to contain a link to the Pass.
01 Sign In Screen:
- Please refer to sign in.png
- User needs to fill the following information:
-- Username.
-- Password.
- We need sign in button and forgot password link.
02 Forgot Password:
- Please refer to forgot password.png
- User can potentially select from events in the location, and set his message settings (private, etc).
- Once profile is setup with location and discovery details.
03 Dashboard:
- Please refer to dashboard.png
- User will be able to create a new template for wallet passes by clicking on new template.
- User can see how many.
-- Downloaded the passes.
-- Installed the passes.
-- Updated passes.
-- Deleted passes.
As numbers and chart.
- User can see created passes by this web portal.
-- Options for created passes (options.png)
- Clicking on the pass will open the pass template filled with the selected pass data.
04 New Pass Template:
- Clicking on new template will show pass types options. (pass type.png)
- Please refer to pass types in Apple document on how to do a pass design link.
- After selecting pass type user needs to fill data:
-- Image data (image data.png).
-- Logo data:
---- logo text.png
---- logo header.png
---- logo primary.png
---- logo secondary.png
---- logo auxiliary.png
Note: Logo and text fields are optional/removable as required, doesn’t require all fields to function; fields should be in the admin tool to make the pass but they aren't required for every pass.
-- Back fields & associated apps data:
---- associated apps.png
---- back fields.png
---- Associated apps needs ability to search App Store in appropriate Country.
-- Locations data:
---- locations.png
---- ibeacons.png
-- Barcode data (barcode data.png).
-- General Information Data (general information data.png)
-- Usage data (usage data.png).
- Note: Need Color Picker function to identify colour palette from other website and apply color into PASS.
05 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles:Reference 1, Reference 2
Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)
Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.
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
Branding Guidelines:
- Branding Guidelines (Branding Guidelines.zip).
Supporting Documents:
- Screenshots for current app that we need to redesign (screenshots.zip).
Target audience:
- Apollo customers and Marketing Agencies
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Stock Artwork:
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
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.
Our client is looking to rebuild an existing product for their wallet pass. We are looking to help them redesign their generic pass style. Here's a link to the Apple document on how to do a pass design.
Good luck everyone!
Round 1
Submit your initial design for a checkpoint feedback:- Initial design.
- 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:- Final design with any checkpoint feedback implemented.
- 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 challenge is to create a set of screens to design a "Wallet Pass" for our customer. Here's a link to the Apple document on how to do a pass design.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Note: Apollo is just a codename for our client.
Notes:
- Pass designer is a web app and will function on native firefox and chrome updated browsers in PC and MAC environments.
- Need a visually appealing Generic pass layout from the Apple pass choices.
- Pass designer login credentials needed for designing passes and using the web app.
Design Notes:
- This is going to be a web App.
- Desktop Size: 1280px width and height as required.
- Should be resizeable to function on a tablet (iPad, other), so please consider responsiveness while designing your solution.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Required Screens:
00 Splash Screen:
- A simple splash screen for when the user connects to the wifi. This is the screen you are directed to when you connect to a retail or public wifi access point that is configured with a captive web portal. This page should be branded according to provided branding guidelines. (splash screen example.png).
-- It only needs to contain a link to the Pass.
01 Sign In Screen:
- Please refer to sign in.png
- User needs to fill the following information:
-- Username.
-- Password.
- We need sign in button and forgot password link.
02 Forgot Password:
- Please refer to forgot password.png
- User can potentially select from events in the location, and set his message settings (private, etc).
- Once profile is setup with location and discovery details.
03 Dashboard:
- Please refer to dashboard.png
- User will be able to create a new template for wallet passes by clicking on new template.
- User can see how many.
-- Downloaded the passes.
-- Installed the passes.
-- Updated passes.
-- Deleted passes.
As numbers and chart.
- User can see created passes by this web portal.
-- Options for created passes (options.png)
- Clicking on the pass will open the pass template filled with the selected pass data.
04 New Pass Template:
- Clicking on new template will show pass types options. (pass type.png)
- Please refer to pass types in Apple document on how to do a pass design link.
- After selecting pass type user needs to fill data:
-- Image data (image data.png).
-- Logo data:
---- logo text.png
---- logo header.png
---- logo primary.png
---- logo secondary.png
---- logo auxiliary.png
Note: Logo and text fields are optional/removable as required, doesn’t require all fields to function; fields should be in the admin tool to make the pass but they aren't required for every pass.
-- Back fields & associated apps data:
---- associated apps.png
---- back fields.png
---- Associated apps needs ability to search App Store in appropriate Country.
-- Locations data:
---- locations.png
---- ibeacons.png
-- Barcode data (barcode data.png).
-- General Information Data (general information data.png)
-- Usage data (usage data.png).
- Note: Need Color Picker function to identify colour palette from other website and apply color into PASS.
05 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles:Reference 1, Reference 2
Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)
Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.
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
Branding Guidelines:
- Branding Guidelines (Branding Guidelines.zip).
Supporting Documents:
- Screenshots for current app that we need to redesign (screenshots.zip).
Target audience:
- Apollo customers and Marketing Agencies
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Stock Artwork:
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
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.