Challenge Overview
Welcome to American Express - Card Chooser UI Prototype Challenge. Task of this challenge is to come up with a prototype for American express - Card Chooser section, please go through the storyboards to get an understanding on how the pages work.
You will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
Final Submission Guidelines
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all latest browsers.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Challenge Assets:
Please download challenge assets (storyboard files) in the forums.
Required Pages:
We need below pages and functionalities in the prototype!
NOTE:
- We need all functionalities/interactions as given in the storyboards.
- We want to make sure the prototype which you are creating is responsive, though we don’t have a mobile storyboards for now, we just want to make sure it’s wrapped by a responsive framework like bootstrap for future enhancement.
- You can use Arial font for this challenge
0. Header & Footer:
- This is just a placeholder as client will be looking to reuse their existing headers.
- For now, just create a top area by following the storyboard.
- Create a simple footer with a copyright message in the center (footer need to be after the content in the page)
1. Main Navigation > Cards:
- When a user chooses the cards from the main navigation, this page is shown “01 Profiles business-01.jpg”
- At the top we show four sub-navigation.
1.1 Pick a Spending Profile (01 Profiles business-01.jpg):
- This is a simple page with slides that indicate the different types of profiles that a user can choose based on their spending.
- Note that in this view, at the top “Pick a spending profile” is actively selected.
- Selecting any of the profiles will show the corresponding slide as shown in “01 Profiles business-01.jpg, 02 Profile Office-01.jpg, 03 Profile Household-01.jpg and 04 Profile Entertainment-01.jpg”
- Clicking on “Select” in any of the slides show take the user to 07_Suggested Cards_Suggested Cards.jpg
1.2 Find me suitable cards:
- This page initially (by default) shows rewards calculator, after which users are guided to the suggested cards page.
Rewards Calculator (06 Rewards Calculator-01.jpg):
- This screen allows user to visualize their estimated expenses based on the amount entered for their monthly spending.
- Note that in this view, at the top “Find me suitable cards” is actively selected.
- Once user enters the amount, we need to show a chart as shown in the storyboard.
- You can use charts like highcharts (http://www.highcharts.com/) to show us a demo of this.
- On clicking the “Take me to the card suggestions” should direct the user to 07_Suggested Cards_Suggested Cards.jpg
Suggested Cards (07_Suggested Cards_Suggested Cards.jpg):
- Follow the storyboards for content in this page
- Filter: Create the filter as shown in the left, in this view - user will be able to choose (check boxes) under Card types, Rewards, features, partner cards..(for all these filters items selected style must follow like the how the selection is made under “Rewards” filter.
- When a user selects “Clear all” shown near the “Filters” then all selection in the filters must be removed and same holds true when “Clear” is clicked in individual filter items but filters only in that particular section need to be removed.
- Cards: In the right side, we show a list of cards - follow the styles as shown in the storyboard.
- There is no pagination and it will be long scrolling page.
- When a user hover their mouse over a card, we show as shown in 08_Suggested Cards Hover_Suggested Cards Hover.jpg. (see below)
- When a user has selected a card for comparison, then we need to indicate that it is selected for comparison as shown in 09_Suggested Cards Compare_Suggested Cards Compare.jpg
- Note: When a user hovers a card already selected for comparison, then instead of “Compare” we need to show remove option and the card highlight will be removed.
Mouse hover (08_Suggested Cards Hover_Suggested Cards Hover.jpg):
In mouse hover for a card, they have 3 options:
- Quick View: We show a modal window with card details as shown in 10_Suggested Cards QuickView_Suggested Cards QuickView.jpg. (see below)
- Compare: Adds the cards to comparison..highlights the card view as shown in 09_Suggested Cards Compare_Suggested Cards Compare.jpg (Note: When a user hovers a card already selected for comparison, then instead of “Compare” we need to show remove option and the card highlight will be removed. Make sure this is captured). A user needs to select a minimum of 2 cards to view the “comparison” of cards.
- Apply Now: For now, just make it a dummy link (#).
Quick View Modal window (10_Suggested Cards QuickView_Suggested Cards QuickView.jpg):
In this view, a user will have option to two options:
- Compare: will add the card for comparison (just need to highlight that card)
- Apply Now: For now, just make it a dummy link (#).
1.3 View All Cards (11 All Cards_All Cards.jpg):
- This is same as suggested cards view, just that spending profile is not shown like the suggested cards view.
- All interactions mentioned under “Suggested cards” view is applicable in this page.
1.4 Compare (17 Compare view-01.jpg):
- Follow the content as shown in the storyboards
- When a user selects a minimum of two cards for comparison, only then a user will be able to view this page - a user views this page by clicking “Compare” show at the top.
- We allow up to three cards to be compared in this view.
- A user should be able to remove a card that’s being compared, when a card is removed - then show a blank space for that column and at the just show a button similar to “Apply Now” but with the label “Add Card” - clicking on “Add Card” should take the user to either “View all cards or suggested cards” page based on page from where they landed here.
2. Main Navigation > My Account:
- This view is same as “1. Main Navigation > Cards” view expect that first sub-navigation is “My spending”
2.1 My Spending (15 Existing customer Spending-01.jpg):
- When user chooses “My Account” from top navigation, then we show this view.
- Use highcharts to show the chart shown in this view
- Clicking on “Yeah, Show me” takes the user to “Find me suitable cards” view.
2.2 Find me suitable cards (16 Existing customer suggestions-01.jpg):
- This is same as the suggested cards page like 07_Suggested Cards_Suggested Cards.jpg
- All functionalities mentioned under that are applicable here as well
2.3 View All Cards
- We don't have a storyboard for this but this is same as the 'View All Cards' page like 11 All Cards_All Cards.jpg
- All functionalities mentioned under that are applicable here as well.
2.4 Compare
- We don't have a storyboard for this but this is same as the 'Compare' page like 17 Compare view-01.jpg
- All functionalities mentioned under that are applicable here as well.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
Coding Standards:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage.
The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- We prefer you use jQuery for this challenge.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.