Challenge Overview
Provide a web-based clickable HTML prototype utilizing the provided Functional Description to provide a UI that will allow users to access and export a document revision information at a given point in time for indexed Google Drive documents.
This project is not based on a wireframe or a storyboard so as part of your task you will need to envision the best flow possible for the functionality presented in the requirements (which is attached with this competition)
The basic requirements are as follows but more details are provided with attached document:
- General Workflow Overview (for full requirements consult the attached specification.)
- The application will allow for marking Google Drive users as "legal hold required" which will initiate specific actions with reference to any documents in the user's Google Drive. We will have the ability to search for users to mark through a variety of search criteria.
- Marking a user as legal hold should trigger an index process to index all documents owned by that user, including document name, document Id, revision date, revision Id, hasComments (true/false) at the time that the Legal Hold is placed. The index will contain multiple revisions for each document.
- The application will provide the ability to search indexed users and provide all the documents and document revisions for that user. It will then allow for exporting and downloading documents/revisions.
- Special considerations will be needed for comments within the documents.
- UI View
- This application will be split into three screens or views but it is quite open to how this is implemented. The main idea is to keep the flow and the views relatively simple and intuitive. The application must be easy to use.
- Users will have three levels of authentication:
- Support User: Will be managed by Google Group that is specified by the Service Admin.
- eDiscovery User: Will be managed by Google Group that is specified by the Service Admin.
- Service Admin: Needs to be super admin of domain and should be set in config file of the system.
Challenge Requirements:
This challenge is to create a working HTML Prototype for the Legal Hold Time Capsule based on the provided requirements document. This is currently envisioned as working within a browser environment.
(It is not expected that users will access this application beyond a secure environment, and not typically on a mobile device).
The clickable prototype should be accessible from traditional browsers, allowing movement among views and basic navigation, dynamically rendered on laptop & desktop screens of various sizes. (There are no device resolution constraints at this time, however extra points will be awarded for adaptive design for device screen size flexibility).
Possible future challenges related to this concept include application development using APIs.
Final Submission Guidelines
Key Considerations
- Please validate the app user interface on traditional browsers: IE 10.0+, and latest 2 versions of Firefox, Chrome, Safari
- Ensure quality and efficient HTML/CSS3 code works with all requested browsers.
- Please ensure fonts, look and feel, hover-state for links and button states, and forms input (input field, dropdown, text area) are simple and consistent among noted browsers.
- Prototype pages are to be linked to each other and able to model each use case in the requirements (please ask if flow clarification is needed)
- Please employ a responsive design framework when viewed on various desktop and laptop screen sizes
- May use any web framework of your choice which enables responsive and fluid layout creation to best meet the requirements best (e.g.: Bootstrap, Grumby2, GroundworkCSS)
- NOTE: you can also look into using http://www.polymer-project.org for this prototype which would be considered a bonus.
- Prototype pages are to be linked to each other and able to model each use case in the requirements (please ask if flow clarification is needed)
- Minimum height is 768px and width 1024px for all pages
- Please leverage all usable real estate on the screen for all views and layout, scaling page content as needed. See this site for references: http://codepen.io/benpearson/pen/fkEGc
- Please ensure quality and efficient HTML/CSS3 code works with all requested browsers
- All elements should be Pixel Precision, and please pay attention to padding, margins, line-height, etc
- Ensure to document the prototype, detailing the UI code structure and provide comments across the JS code.
CODE GUIDELINES: HTML5, CSS3, & Javascript
- Provide comments for a clear explanation of the code usage
- Please use clean INDENTATION
- Ensure no conflicts nor errors in naming
- If HTML, please use HTML to make the HTML code clean; Please use CSS3 styling wherever possible
- If Javascript, please provide any Open Source Javascript you think will help show the functionality and design of the application and please separate data elements on the individual pages into respective JSON files, and do not hardcode them into the script / HTML pages. You may use a standard set of values to simulate the use case requirements. You are NOT REQUIRED to build the ability to save/manage the different state of the data across the prototype.
- Provide source code
IMAGES
- Any Images should be properly compressed while still having good visual quality
- Please use best practices for background based image
- Please use sprites when using icons for your submission
BROWSER REQUIREMENTS: Latest version of Firefox, Safari, & Chrome, as well as IE 10+