Challenge Overview
Welcome to the Applause Real-Time Sales Leaderboard UI Prototype Challenge!
This challenge purpose is to build Real Time-Leaderboard UI Prototype based on provided storyboard screens that will displaying on a Real-Time TV to check how well Applause Sales Team performing.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Final Submission Guidelines
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Applause Real-Time Sales Leaderboard Page Requirements:
- Grab storyboard from this link: https://www.dropbox.com/s/8f2xoxnsjhuh5f5/Applause-Storyboard.zip?dl=0
0. index.html
- Create index.html page that contains all separated links as stated below:
1. Summary Page Leaderboard
screenshot: 00.OnePager_V2.png
- This screen contains all section of Sales Leaderboard
- Main content area should set with 1920px x 1080px screen size, outside the content need filled with repetition background. This
- Main content area need placed on center top of browser screen
- Background image need filled behind main content area
- Storyboard use “Nanum Gothic” font, you can linked to Google Font site, check details here: http://www.google.com/fonts/earlyaccess
- For this summary page, page showing 3 columns layout
- Match the difference of each boxes background title
- On every box title you need implement inner shadow and outer shadow. Also, the gradient effect on text.
- All those properties need to be done via css stylesheet.
- Applause logo placed in the bottom right of screen. Match the application text and properties.
- In some period time, we need refresh the data being displayed, show information and animation transition how that data changed for every boxes.
- Show us easy configuration for data change.
- All information data like image path, amounts, division and Opportunity Owner need load via separated JSON file
- You can grab actual information from attached Sample Data - Leaderboard Appirio (2).xlsx
- Read detail instructions for every section below:
QTD Stack Ranking
- This box placed in the left side of page
- This box displayed 8 row of Sales Team
- Photo placeholder placed in left side, and need use consistent size
- Sales information in the right side
- Amounts need support max to 10 characters
- You might need adjust the width of Amount area
- Division information displayed next to Amounts
- Opportunity Owner showing arrow in the left side
- In page load, we’re thinking to show “Flip” animation on every row that will show up one by one in quick sequence. Any up-to-date effect or better ideas? Feel free to suggest.
- Show smooth and no lag animation effect.
YLD Stack Ranking
- This box placed in the center of page
- Basically this area will show similar layout and function like QTD Stack Ranking
- Notice the the title background use different color
- You need show us different content.
QDT Pipeline Creation
- This box placed in right top of page
- Match title background style
- Opportunity Owner placed in the left side
- Amounts placed in the right side
- Amounts need support max to 10 characters
- You might need adjust the width of Amount area
- Each row need use “Flip” animation effect on page load
- Also simulate when data changed on some period time in same time like other boxes
Weekly Activity
- This box placed in right bottom of page
- Match title background style
- Date information in the left side, follow date format
- Opportunity Owner placed next to it
- Activity type placed in the right side
- Each row need use “Flip” animation effect on page load
- Also simulate when data changed on some period time in same time like other boxes
2. QTD Stack Ranking
screenshot: 01.QTDSTACKRANKING_V2.png
- This is full size version of QTD Stack Ranking
- Match background image like storyboard look
- You need show bigger box that separated in 2 columns
- Re-use consistent animation on page load and on data change
- Match spacing/margin for every boxes
3. YLD Stack Ranking
screenshot: 02.YLDStackranking_V2.png
- This is full size version of YLD Stack Ranking
- Match background image like storyboard look
- You need show bigger box that separated in 2 columns
- Re-use consistent animation on page load and on data change
- Match spacing/margin for every boxes
4. QTD Pipeline Creation
screenshot: 03.QTDPipelineCreation_V2.png
- This is full size version of QTD Pipeline Creation
- Match background image like storyboard look
- You need show bigger box that separated in 2 columns
- Numbers of rows increased on full size version
- Re-use consistent animation on page load and on data change
- Match spacing/margin for every row
5. Weekly Activity
screenshot: 04.WeeklyActivity_V2.png
- This is full size version of Weekly Activity
- Match background image like storyboard look
- Weekly activity remain show 7 rows of data
- Re-use consistent animation on page load and on data change
- Match spacing/margin for every row
Code Requirements:
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.
CSS3
- 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 element styling.
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.
JAVASCRIPT:
- All JavaScript used must not have any copyrights to any 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.
- Important!: Performance on Animation and Data Change is our main concern! Pick best practice javascript code in your submission
Browsers Requirements:
- Latest Safari Browser on MAC and PC
- Latest Chrome Browser on MAC and PC
- Latest Firefox Browser on MAC and PC