Challenge Overview
Welcome to the GE - Data Classification HTML5 Mobile Prototype Challenge. The main task of this project is to create a clickable HTML5 UI Prototype, based on the provided design storyboards and DC-Sequence PDF files. This Prototype will utilize HTML5 and Responsive Design to simulate the appearance and behavior of the app on a mobile phone.
The Data Classification application is designed to be responsive web application that helps users understand, learn and use GE’s Data Classification principles to classify, label and handle documents and data appropriately.
Review the "GE-Flows" folder where we have provided the different user-flows to help clarify the diferent click/touch paths we would like to capture.
This challenge is focused on the “Mobile” view (see provided PSD files) but we still want to plan for the Tablet and Desktop views by including the appropriate break points.
Final Submission Guidelines
Important!
- The expected deliverables from this UI Prototype Challenge is HTML/CSS/JS code.
- This application can use Bootstrap (http://getbootstrap.com/getting-started). Please follow coding standards and writing clean code.
- We want to make sure what you are creating supports the mobile responsive/break points (correct framework)
- You can use AngularJS or jQuery for building out the interactions and click-paths
UI Prototype Page Requirements:
- Important: Please see DC-Sequence-Full.pdf for the flow of the design.
- All elements should be as pixel perfect as possible. Pay attention to padding, margin, line-height, etc.
- Match the storyboards as close as possible across all required browsers.
Header and Footer (most pages)
- Navigation (hamburger icon) should open the menu
- Search icon should open up 02-3-Search_Revised - the text field should be in focus and automatically open the keyboard
- Help / ? Icon should open up the tutorial overlay screen for the page that the user is on - Example of “?” icon (05-10a-Handling-Word.png)
- Back button should take user to the previous screen they were on
- Capture will open camera - see Camera instructions below (last page)
- Home will take user to the dashboard
- My Tag will take user to the My Tags page
Create index.html
- Create index.html as the starting page to let user access all pages within the prototype
Splash
000-0-Splash.png
- This is the intro screen to the application
- There will be five slides, user should be able to swipe through the pages and dot indicator will change
- Swiping past the last slide will take them to the homepage
- “click to skip” will take user to homepage
Tutorial Page/Overlay
00-00-Tutorial thru 00-02-Tutorial
- When opening app for first time the page overlay should display.
- There are three slides, user can swipe between them
- Or user can tap anywhere to close
- Swiping a fourth time when on the last “circle” will also close the overlay
Homepage
01-2-Homepage.png
- All buttons should work and open their respective pages
- Tapping/activated buttons should look like 01-3-Homepage
- Classify should go to (04-2a-Classify.png)
- Handling should go to (05-2-Handling.png)
- Resources should go to (06-1-Resources.png)
- My Tags should go to (07-1a-MyTags.png)
- Bottom banner will show content/quotes/twitter type announcements - hard code for now
- Add the “pull down to refresh” feature
- Search icon will open (02-1-Search.png)
Search Overlay
02-3-Search
- Clicking the search icon in the header will open this search overlay
- The text field should be in focus and automatically open the keyboard
- Add a few keywords that we can search by that this will work with (Use: Classification, Handling, Resources, My Tags)
- Out of Scope: The text does not need to be highlighted in search results
- Show more button goes to 02-1-Search_Revised.png
Search Page
02-1-Search, 02-2-Search
- Same functionality as overlay but more real estate
- Search results is a scrollable div
- Retain search that was performed in the previous search overlay
Menu
03-2-Menu.png, 03-3-Menu.png
- All links need to go to their respective pages
- Add the person icon and John Doe as placeholder profile information
- User should be able to swipe from left to right to open menu - not just by tapping hamburger icon
- User should be able to swipe right to left to close menu
- Remove “FAQ” and "Search" as menu items
Classify - Step 1 - Questions
04-2-Classify.png, 04-2b-Classify.png
- Important: See DC-Sequence-Classify.pdf for the flow
- Toggle should work
- Toggle should always default to No (grey toggle background)
- Continue will take them to the next question.
- Toggle changes color depending on what answers they’ve chosen
- Continue will take them to next Classification step - Screens: 04-8 thru 04-11 depending on what answers they gave. (see DC-Sequence-Classify.pdf)
Classify - Step 2
04-8-Classify.png thru 04-11-Classify.png
- Depending on what their answers were, we should take them to the appropriate classification level screen
- Depending on their classification level from the answers they gave, the color and text will be different
- “?” circle link takes user to more detailed explanation of classification level in Resources section
- Restart will take the user back to the first page of the Classify process
- Handling button will take the user to the next step in the process and retain classification level - 05-6-Handling.png
Handing - Step 1 - If skipped Classify
05-2-Handling.png thru 05-5-Handling.png
- Important: See DC-Sequence-Handling.pdf for the flow
- Some users don’t need to use the walk through part that Classify offers and can click Handling on the dashboard
- For users clicking Handling from the dashboard, they will be taken here where they can edit the slider if needed
- Since user didn’t go through questions, default the slider to Confidential
- Tapping the circle slider button will take them to the next step of Handling
Handing - Choose what you want to do
05-6-Handling.png
- User will come to this page either from Classify-Step 2 or Handling-Step 1 depending on their path chosen
- Notice the progress bar is showing what step I’m on for the handling portion - I’ve completed the Classify portion so that’s greyed out.
- Labeling should go to 05-7-Handling_Revised.png
- Storage should should go to dummy link “#”
- Transmission should go to dummy link “#”
- Destruction should go to dummy link “#”
Handling - Type of document
- Word should go to 05-8-Handling.png thru 05-8d-Handling.png
- Notice the progress bar is showing what step I’m on for the handling portion - I’ve completed the Classify and Handling portion so those should be greyed out and Labeling should be blue.
Handling - Labeling
05-8-Handling.png thru 05-8d-Handling.png
- It should retain their classification level and the header will change depending on what they chose in the previous steps
- Accordions should work
- Images are links and will open a modal - 05-9-Handling.png
- For other accordion content/info, please see the folder GE-FilesforHandlingAccordions in attachments.
Image Modal
05-9-Handling.png
- Image should be centered with image name below it
- X in the corner should close the modal
- This is the correct X for modals that should be used in all other modals
Resources
06-1-Resources.png thru 06-3-Resources.png
- Important: See DC-Sequence-Resources.pdf for the flow
- Sections should be accordion expand/collapse
- Invert colors when tapped/clicked
- If I swipe to the left on a topic I should see the Delete option
- Clicking Delete should remove topic
- Expand all link/button will expand all accordions
- When expanded, arrow should point down. When closed should point up.
- User should be able to click and reorganize/move the topics in the order they want using the “...” icon
- Add more is a link that allows users to add more through a modal - This button will be a dummy link that will be added in a future release but want the button there for demo purposes
My Tags
07-1a-MyTags.png thru 07-2-MyTags.png
- Important: See DC-Sequence-MyTags.pdf for the flow
- Sections should be accordion expand/collapse - all collapses on page load
- Invert colors when tapped/clicked
- User should be able to click and reorganize/move the topics in the order they want
- If I swipe to the left on a topic I should see the Delete option
- Once tag is deleted - tag counter (10 tags) should update
- Notice Filter button in header - this should open 07-3-MyTags.png
My Tags - Filter Modal
07-3-MyTags.png
- Sort will have two options in the dropdown, "A - Z" or "Z - A"
- Classification dropdown will have four options, Public, Internal, Confidential, Restricted
- Attachments dropdown will be yes or no
- x should close the modal - Should use X that is used in 05-9-Handling
My Tag - Tag Creator
07-4-MyTags.png thru 07-5-MyTags.png
- User clicks on “My Tag” in the bottom banner and is presented with create tag modal
- Only Tag Name is required
- Classification field should be a dropdown with four options - Restricted, Confidential, Internal, Public
- x should close the modal - Should use X that is used in 05-9-Handling
- Clicking the paperclip icon will display 07-4-MyTags_Revised_Attachment_2
- After choosing attachment page will look like 07-4-MyTags_Revised_Attachment_3
- Submitting the tag should add it to the My Tags page - tag counter should increase by one
My Tags - Tag Detail Page
- Click on a tag should take the user to detail page of that tag
- The “x” beside the attachments will delete the attachment from that tag
- Close button will take them back to the my tags page
Feedback
09-1-Feedback.png
- Feedback tab is always selected by default
- Subject field needs to be editable
- Message field needs to be editable
- Clear button should work and clear fields
- Submit button should submit the information - dummy submit
- Native/browser pop up confirmation - “Thank you for submitting your feedback.”
Feedback - Inbox
09-2-Feedback.png thru 09-4-Feedback.png
- Create a few dummy messages
- Inbox tab should show how many unread messages there are (3)
- Messages should be able to be searched using search box on page
- User should be able to delete message - left swipe
- Clear Inbox will clear all messages
- Messages already read will have grey text but still clickable
- Search field should work and narrow results
Sync Data
11-1-Sync.png thru 11-2-Sync.png
- Offline/Online toggle should work and change colors when toggled
- Need to be able to switch tabs from New to Pending
- When user switches to Online - Last sync should update to show sync was successful - change to time toggle was switched
- Create a few dummy messages/tags
Camera
12-1-Camera.png thru - 12-2-Camera.png
- When user clicks “Capture” in bottom bar it should bring up a mock camera screenshot
- After screenshot is faked - show the modal in 12-2-Camera.png
~
Code Requirements
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML5/CSS3 code that works in all the requested browsers.
- Making sure the responsive break points are correct
- All elements should be pixel precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
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.
- Use CSS3 styling (if possible) when creating all styles.
- 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.
Browsers Requirements
- Chrome on desktop (for breakpoints)
- Safari browser on iPhone Retina and Standard (Landscape & Portrait View)
- Native browser on Android (Landscape & Portrait View)