Challenge Summary
Welcome to the AMEX Credit Card Responsive Referral Web Portal - Design Challenge!
Using the desktop wireframe and style guide provided, create a responsive (mobile & desktop) web portal for the purpose of referring credit cards to potential new American express card holders.
The intended interaction is a step-by-step process by which a current cardholder refers their friends or contacts and informs them of American Express’ unique cardholder benefits.
The wireframes are a suggested user flow and meant as a guide. While contributors may design around this wireframe, we would like to see varying ideas for design and user flow. All contributors should feel free to come up with their own ideas if they would like.
Note: Do not only give us a colored version of wireframes as they are just meant to show you what we are looking for and explain the idea. You are highly encouraged to provide your own ideas and solutions to this application beyond the provided wireframes.
Round 1
Submit your design for a Checkpoint feedback
1. Login. (Desktop + Mobile)
2. Share 1 – Personalize. (Desktop + Mobile)
3. Share 2 - Card Select / Select share method. (Desktop + Mobile)
- Any screens from Round 2 that you'd like to show (not required).
- Any additional screen(s) you think are needed.
- Provide us with a click map for your design along with all priority screens.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file naming and numbering.
Round 2
Final design plus any Checkpoint feedback:
1. Login. (Desktop + Mobile)
2. Share 1 – Personalize. (Desktop + Mobile)
3. Share 2 - Card Select / Select share method. (Desktop + Mobile)
4. Share 3 – Email. (Desktop + Mobile)
5. Thank you / Rewards Info. (Desktop + Mobile)
- Any additional screen(s) you think are needed
- Any feedback/suggestions provided at checkpoint.
- Provide us with a click map for your design along with all priority screens.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file naming and numbering.
Challenge Overview
The goal of this challenge is to create a responsive (mobile & desktop) web portal for the purpose of referring credit cards to potential new American express card holders.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Supporting Documents:
- Colors (AmexColors.pdf)
- Contrast Ratios:
-- Utilize high-contrast text and images with a contrast ratio of at least 4.5:1.
Online tools can quickly validate if you have sufficient contrast.
- Typography (BentonSans Regular.otf)
-- Benton Sans Primary / Arial Secondary.
- Images to be used (images.zip).
- Wireframe (wireframe.zip)
Design Requirements:
All submissions must include:
- Utilization of included photography as a background imagery.
- Adherence to the provided color palette & style guide.
- Desktop and mobile designs.
- Area for altering the end of a URL to be custom to the user.
- Share via facebook messenger (pre populated url and customized link to offer).
- Share via email (share screen with entries and show status of offer).
- Credit card selector (2-5 cards)
- Area for competition information:
-- (offer example: refer a friend and enter for a chance to win a round trip vacation to Disney World in Orlando Florida!)
- Area showing benefits/incentives of referring a user to the program:
-- Gamification/interaction preferred.
Screen Sizes
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px, portrait mode only.
- Desktop: 1280px width and height as required.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp! It will be great if you can provide the landscape version.
Required Screens
1. Login:
- Login with Amex info OR CC info.
- Username.
- Password.
- Forgot User/pass.
- Competition Area:
-- Example: Refer to win a round trip vacation for four to Disney World in Orlando, Florida.
-- Need a state with and without competition info
2. Share 1 – Personalize:
- Customizable link.
-- Show a hint/tooltip to customize link, or somehow draw emphasis to customizable section of URL
- User may explore various card offers.
3. Share 2 - Card Select / Select share method:
- Card selector
- APPROVED COPY.
-- Share your personalised link where your friends can apply.
-- You can send your referral via Email or Facebook Private Message using the buttons below.
-- You’ll earn 5,000 Nectar points if your friend is approved for the Nectar Credit Card and they will receive 21,000 Nectar points if they spend £2,000 in the first three months of Card Membership.
(dependant on referral card selected)
- Share via contacts (Gmail / Yahoo / Windows Live Hotmail)
- Email Link:
-- Proceed to Next screen.
- Share via facebook private message:
-- Opens app/website(new window/tab), pre populated message w/ customized link.
- Link to terms/conditions:
-- Expand section of site with terms/conditions.
- Area showing benefits/incentives of referring a user to the program
-- Potential Content to be shown:
(Example: dependent on card selected - Show what a cardmember could use their points for if they refer free)
1. Video.
2. Gamification/guided interaction.
3. Images/Text.
4. Tables/Charts.
- Competition Area
(Example: Refer to win a round trip vacation for four to Disney World in Orlando, Florida)
-- Include a state with and without competition info.
4. Share 3 - Email
- Show First / Last / Email Fields:
-- Send emails recipient from browser.
5. Thank you / Rewards Info:
- Thank you messaging.
- Button: Refer more friends.
-- Takes user back to refer list screen.
- Area showing benefits/incentives of referring a user to the program:
-- Potential Content to be shown:
(Example: dependent on card selected - Show what a cardmember could use their points for if they refer free)
1. Video.
2. Gamification/guided interaction.
3. Images/Text.
4. Tables/Charts.
- Competition Area
(Example: Refer to win a round trip vacation for four to Disney World in Orlando, Florida)
-- Include a state with and without competition info.
Important
- Keep things consistent. This means all graphic styles should work together.
- All graphics should have a similar feel and general aesthetic appearance.
Target Audience
- Potential new AMEX card holders.
Judging Criteria
- How easy the app is to use.
- How user friendly the flow is and if it's easy to navigate between sections.
- If your ideas are flushed out and make sense - as mentioned above, polish will be added later, focus on the ideas.
- Cleanliness of the designs.
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. See more information about 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.