Register
Submit a solution
The challenge is finished.

Challenge Overview

Project Overview:
Welcome to the FORRESTER RESEARCH WAVE APP HTML5 UI Prototype Challenge! The goal of this challenge is to create a tablet only HTML5 Prototype application based on designs already provided and this clickable Invision Prototype.

As part of this challenge, you will need to document all HTML5/CSS3/JavaScript code. We need a clear explanation of the code to help us figure out all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:
The main task of this competition is to develop a tablet only HTML5 prototype based on designs already provided, this clickable Invision Prototype and the data from the included Forrester Wave Reports. Your prototype must work properly in Safari and Chrome. Because this prototype is relatively simple, use of animations and anything that can enhance the interactive appeal of this project is key. We would like to see examples of how the various screens, graphs and charts would animate on load as well as interactive animations for button taps and screen transitions.

Project Assets:
The report data used in this prototype can be pulled from these two included wave reports:
- WaveBPMSuites.pdf
- Wave_SaaS_2014.pdf

Survey Manager Required Pages - optimized for the tablet browser:

1) Login page:
https://projects.invisionapp.com/d/main#/console/4525648/97972466/preview
Required Fields:

  • Username and Password
    • Authentication (only the following credentials are allowed entry):
      • User: forrester
      • Pass: forrester
    • Show error state for incorrect username/password
  • Remember Me
    • Show interactivity of buttons only. Functions for buttons are not needed for this prototype.
  • Forgot Password
    • No Interactivity for this prototype.

Buttons:

  • Login: always pass the user to the next screen (no error message)

2) Dashboard
https://projects.invisionapp.com/d/main#/console/4525648/98209240/preview

The Dashboard is the default loading screen after logging into the app. Elements should animate on load - We are open to ideas on how this is accomplished.

There are two views for this screen:

Left Navigation:

  • Dashboard: No action if on this screen
  • Report Search: Loads Search screen
  • Favorites: Loads Favorites screen
  • Settings: Loads blank screen with page title
  • Help/FAQ: Loads blank screen with page title

Recently Viewed Waves:

  • Horizontally scrollable - loads max 4 report previews at a time
    • Pagination at upper left of section indicates which report set the user is currently viewing

Recently Published Waves:

  • Horizontally scrollable - loads max 5 report previews at a time
    • Pagination at upper left of section indicates which report set the user is currently viewing
    • User taps on report - Load Report Details

Bottom Buttons:

  • Saved Searches
    • Loads Search Screen - Saved Searches Tab
  • Custom Waves
    • Loads Favorites Screen - Custom Waves Tab
  • Favorite Waves
    • Loads Favorite Reports Screen

3) Report Search
https://projects.invisionapp.com/d/main#/console/4525648/101218038/preview

This screen shows the user the various options they might search for reports. The user’s saved searches also appear in this section under a separate tab.

Upon first time load, the user should have the ability to scroll through the entire list of published reports. Guided search options will reduce the number of reports shown based on the options selected with the guided search area.

Search Bar

  • Recent Searches

Guided Search

  • Begin Search:
    • Shows “offerings” Category:
      • (only option) Enterprise Applications, press takes to second guided search step:
        • Collaboration
        • CRM
        • HCM
        • Supply
        • Chain Management
  • User selects predetermined categories to drill down reports.
    • For this prototype, show only two categories for guided search: Vendor and Offering. Regardless of what is selected, after each step, the list of reports shown below should shorten to show that the guided search is drilling down the list of possible reports that match the guided search criteria.
    • If user taps (X) in guided search, that category is removed and the search is taken back one step.
  • Nav Bar:
    • Save Search: Saves search to “Saved Searches” tab
    • List View: Shows list of reports that match guided search criteria (shown)
    • Thumbnail view: Shows thumbnails of reports (use same report thumbnails from “recently viewed reports” on dashboard screen)

Saved Searches

  • Shows a list of all saved searches
    • Each saved search shows:
      • Each guided search category selected
      • Vendors that appeared in the guided search results
      • Search Button (to re-execute the search)
      • X Button (to delete the saved search)

4) Report Details
https://projects.invisionapp.com/d/main#/console/4525648/98289029/preview

Report Details screen is the most important screen of the application. Animations for elements on this screen are very important. Elements should tastefully animate on load and each point of interaction should have its own subtle animation.

Right Navigation:

If a user changes the standard parameters of the report, via the right navigation, and “favorites” that report, it is saved under the “custom waves” section of the favorites screen. If a user does not customize the report and leaves all defaults switched on, the report is saved under the “favorite report” tab of the favorites screen.

  • Dashboard: Loads Dashboard screen
  • Report Search: Loads Search screen
  • Favorites: Loads Favorites screen
  • Settings: No action
  • Help/FAQ: No action

Top Navigation:

  • <Search: Takes user back to search reports screen
  • Download Icon: Lipsum text, Ok or Cancel
  • Mail Icon: Alert Window with Email To - From Name - Message Entry and Submit button. Action on submit: Thank You message appears - OK button to close window.
  • Print Icon: Alert Window: AirPrint to Printer: HP OfficeJet 3223 - Print Button - Cancel
  • Favorite (Star) Icon: Replace outline star with filled in yellow star
    • If a user changes the standard parameters of the report, via the right navigation, and “favorites” that report, it is saved under the “custom waves” section of the favorites screen. If a user does not customize the report and leaves all defaults switched on, the report is saved under the “favorite report” tab of the favorites screen.

Right Navigation:

  • Current Offering - Strategy - Market Presence - Vendors:
    • Each Section should expand to reveal sub categories
    • Current Offering - Strategy - Market Presence all have the ability to be switched on and off. This functionality:
    • Each Section title’s font weight should be bold if not expanded and regular if expanded
    • If an individual Vendor is deselected from the list, their name and icon within the Wave Graphic should be reduced in opacity by .5. Simultaneously, the vendor’s information should be removed and from the “Vendor Scorecard” section of this screen.
    • If a user alters the wave graph by turning the subcategories on and off within the right navigation, a “CUSTOM WAVE” watermark should appear over the wave graph.

Wave Graph and Text

  • Graph and elements should animate on load.
  • If a user alters the wave graph by turning the subcategories within the right navigation on and off, a “CUSTOM WAVE” watermark should appear over the wave graph.
  • Vendors within graph are controlled by the Right Navigation Panel and Vendor Scorecard section below. Vendors deselected from right panel should have their icon and name reduced in opacity on the Wave Graph by .5.
  • Vendors selected for comparison in the “Vendor Scorecard” area, should be highlighted in the Wave Graph with a black inner dot and a yellow border surrounding each Vendor Icon on the Wave Graph. The vendor name changing to #FFF and a subtle drop shadow applied to both the vendor name and identification dot.  (See InvisionApp for example - Click “Appian” vendor from scorecard section to view interaction.)
  • Text area to the right of the graph should be vertically scrollable within its own section, which ends at the same lower boundary as the Wave Graph. Please include scroll bar shown in storyboards.

Vendor Scorecard

  • Section is horizontally scrollable to select each vendor for comparison.
  • User taps on vendor card, vendor detail screen loads.
  • Each Vendor from graph should be shown here with a snapshot of each of their individual Current Offering - Strategy - Market Presence numbers and corresponding graphs shown.
    • Each Vendor metric is ranked on a scale of 1-5 and iscolor coordinated based on their numerical value:
      • 4-5 - #8abb4c
      • 3-4 - #333e48
      • >3 - #f7a800
      • 0 - #969a9d
  • Vendors selected for comparison via check box: Card should be highlighted with a blue background in this section.  Simultaneously in the Wave Graph, a black inner dot and a yellow border surrounding each Vendor Icon on the Wave Graph. The vendor name changing to #FFF and a subtle drop shadow applied to both the vendor name and identification dot. (See InvisionApp for example - Click “Appian” vendor from scorecard section to view interaction.)
  • User has selected vendors to compare, taps “Compare” button and loads the “Vendor Comparison” Screen: https://projects.invisionapp.com/d/main#/console/4525648/98448726/preview#project_console (maximum of 4 vendors compared at once with this function)
  • “Fullscreen” enlarges the vendor scorecard and displays stats for each vendor in the report
    https://projects.invisionapp.com/d/main#/console/4525648/101245177/preview#project_console
    • Vendors should be displayed in the same order (Left to right) as they appear vertically (from top right to bottom left) in the Wave graphic on the Report Details screen.
    • Area between “Vendor Scorecard” and “Forrester Weighting - Pegasystems - Appian - etc.” is considered the scorecard section header and should remain locked with details from chart scrolling beneath it.
    • All content below is scrollable within the chart area only.
    • If a non participating vendor is part of the report, their numerical values should be set to 0 for that column. Vendor name and numerical values should be set to a color of #c4cacf.
    • Each Vendor metric is ranked on a scale of 1-5 and are color coordinated based on their numerical value:
      • 4-5 - #8abb4c
      • 3-4 - #333e48
      • >3 - #f7a800
      • 0 - #969a9d

5) Vendor Compare
https://projects.invisionapp.com/d/main#/console/4525648/98448726/preview

This screen shows the breakdown of each vendor’s specific categories and now they rank against each other. Elements should tastefully animate on load.

  • The highest overall ranked vendor should appear to the left. Remaining vendor scores are compared to this vendor and are colored accordingly.
    • Each Vendor metric is ranked on a scale of 1-5. Rank color differences are compared to the highest ranked overall vendor in report, in this case - Pegasystems. If a Vendor’s rank is less than that of Pegasystems, the rank should be colored orange. If a Vendor’s rank is more than that of Pegasystems, it should be colored green.
  • Top Navigation:
    • <Report: Takes user back to search report details screen.

6) Favorites
https://projects.invisionapp.com/d/main#/console/4525648/98448726/preview

This screen shows both the favorited reports for the user and the custom waves that the user has created.

  • The highest overall ranked vendor should appear to the left. Remaining

Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices.
- 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.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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).
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Requirements:
- 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.
- Angular.js for javascript framework (https://angularjs.org/)
- Zurb Foundation for responsive framework (http://foundation.zurb.com/)
-- a comparision of Zurb and Bootstrap http://responsive.vermilion.com/compare.php
- You are allowed to use JQuery for this contest.

Browsers Requirements:
- Latest Chrome and Safari Mobile Browsers.

Documentation Provided:
- Storyboard Screens and PSD files.
- Clickable Storyboard (https://invis.io/H641JQG8M)



Final Submission Guidelines

Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.

Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30051306