GE - Data Classification Responsive Design Challenge 2

Welcome back to the GE "Data Classification" Responsive Design Challenge 2. We just completed our first design concepts challenge and we are now looking to refine and update our new Data Classification application experience. The goal of this challenge is to focus on the overall “responsive” user experience, take our provided design feedback and help design a great application!

Round 1

Round 1 - Initial Design Concepts for checkpoint review
01: Homepage (mobile)
02: Search (mobile)
03: Navigation/Menu (mobile)
04: Classify (mobile and desktop) - priority
05: Handling (mobile and desktop) - priority
06: Resources (mobile)
07: My Tags (mobile)
Make sure to numbers your screens (01, 02, 03, 04 etc)

Round 2

Round 2 - Final Design Concepts plus any checkpoint feedback and updates
01: Homepage (mobile and desktop)
02: Search (mobile and desktop)
03: Navigation/Menu (mobile and desktop)
04: Classify (mobile and desktop)
05: Handling (mobile and desktop)
06: Resources (mobile and desktop)
07: My Tags (mobile and desktop)
08: Tutorial (mobile and desktop)
09: Feedback (mobile and desktop)
10: FAQs (mobile and desktop)
11: Sync Data (mobile and desktop)
Make sure to numbers your screens (01, 02, 03, 04 etc)

Challenge Description
This is the second challenge in the GE Data Classification project. The first challenge focused on design concepts and high fidelity wireframes. For this challenge we are looking for polished and finalized designs that will help us build our UI Prototype. We have analyzed the different screens and the overall user experience. We have outlined specific requirements and design problems that need to be fixed or updated.

The GE Data Classification Application is where employees can educate themselves about Data Classification as well as help guide them on how to classify, label and handle their documents and data appropriately.

If you need more information about Data Classification please open the DataClassificationTalkingPoints.doc in the attachments.

We’re here to help!
- Make sure to download the source files!
- If you have any questions at all, please don’t hesitate to ask in the forums!

Design Requirements
- Do not redesign the application! Follow the provided design as your base design and make new design decisions based on the challenge specification.
- Think mobile first. Your designs should be easy to use on any device or desktop
- Simple, modern, clean design and graphics.
- GE branding needs to be on every page
- Focus: Continue to design the application in a way that would make it easy to understand if you weren’t familiar with the policy or concepts of Data Classification.
- Mobile screens should be 320px width, desktop screens should be 1024px width

Key Users:
Novice:
- We will have “Novice” users who will expect instruction and possibly a wizard/walkthrough type experience. What type of UX elements will help this type of user?

Expert: 
- We will have “Expert” users who just need to quickly get in and search and find the information they are looking for. How do you streamline the interface for the Expert user?

Design Updates
- Download and review all of the attachments! 

Required Screens
ALL PAGES need the following unless stated otherwise below
See DataClassification-ScreenRelationship.pdf
- GE Branding on every page (see branding download)
- Help button: top right of every page (except Home) - User will click this button and it will bring up an overlay showing the key features of the page and show what each icon/button does on the particular page
- Bottom Navigation Bar: (Not on Home) - This is a fixed position bar that will have the following buttons - My Tags, Home, Back
-- My Tags: Right side of the bottom bar (not on Home) - This will prompt the user to name their tag right away
-- Home: Middle of the bottom bar (not on Home) - This will navigate the user back to the home screen
-- Back: Left side of the bottom bar (not on Home) - this will take the user back to the previous screen they were on.

01: Homepage 
- Search button: Top right of home page only
- Navigation/Menu: An icon/text/button to open a menu where 12+ links/buttons will be displayed - this button will be present on all sections/pages
- Icons: Classify, Handling, Resources, and My Tags - These four items will be the main calls to action on the homepage and where most users will interact and begin the process
- Push / Pull icon/links/buttons: Think of this like a cloud sync feature. Push when online, pull for offline mode. These will be secondary calls to action on the homepage.
- Help button: Not needed on this page
- Bottom Navigation Bar: Not needed on this page

02: Search
- Design how the search would work and perform
- User should be able to type in a word and as the word is found in different sections, should show meaningfully all the search results.
- How would the view look like? Would it be split by sections? Would we show the first 5 hits?

03: Navigation/Menu
- Links/buttons needed:
--- Home
--- Classify
--- Handling
--- My Tags
--- Resources
--- Sync Data (This element should have a notification icon when not synced with servers for a certain period of time)
--- Feedback
--- FAQ
--- Search
--- Tutorial
- (See example in provided designs - 08-2_Menu.png)

04: Classify - Important user flow - please capture this for the checkpoint.
See DataClassification-ScreenRelationship.pdf
-  This section is dedicated to helping the user determine the classification level of their document. (see attachments)
- Design problem: We are looking for a solution which captures the workflow and information of the decision tree shown in the document DataClassification-SelectionForApp.pptx as a usable and simple to understand mobile and desktop screen experience.
- See DataClassification-SelectionForApp.pptx for the logic behind the design and how the different classifications are decided upon by the user.
- The examples given (02-Desktop-classification-06-opening.png,  and the Labeling, Handling and Determining_Public and Determining_Confidential submission PNG files) are here to provide a starting point for the designs 
- This means it can use the same UI elements as the examples, but you are encouraging to figure out the best design solution for this problem, even if that means using a different approach from the examples.
- The decision tree in the PPT file shows that it is not a linear path of “Public > Internal > Confidential . Restricted”, but a branched relationship making the options between (blue box) “Public/Internal” and “Confidential/Restricted”, then the final answers “Public or Internal” (green box) or “Confidential or Restricted” (red box)
-- Restricted = Red
-- Confidential = Orange
-- Internal = Yellow
-- Public = Green 
- Need a way to navigate quickly to the 01 Home page or the 05 Handling page (next step in process)
- Need a way for the user to navigate to a more detailed definition of the classification chosen - This will take them to a section in the Resources section.
- The goal is that the user should leave this page knowing the classification level of their data/document.
- Plan for both Novice and Expert Users

05: Handling
- Handling: Dedicated to addressing labeling, storage, transmission, destruction and retention of data/documents
- For this page we want to leverage the idea shown in 05- 1_Determining_Public.png to have users select the classification level.
- If the user is coming from 04 Classify, use color from previously chosen classification type on this page as a reminder as to what level I’ve chosen
- If the user comes to this screen from 01 Home or 03 Menu, they will have a simplified version of the Classification UI elements from 04: Classify defaulting at “Public” as described in 04 Classify
- Since the classification is defaulted to "Public", the user should have a way to edit this information which would take them back a step to the 04: Classify page
- See DataClassification-SelectionForApp.pptx for content for this page
- Focus mainly on MS Office files and PDFs as file types

06: Resources
See DataClassification-ScreenRelationship.pdf
- This page is the hub for resources such as guidelines, training, other links, etc.
- User needs to be able to access Policies/Guidelines, Training, Other Links, FAQs
- User should be able to customize or add/subtract what they see on this page

07: My Tags
See DataClassification-ScreenRelationship.pdf
- Good example of “My Tags” is 10-1_My Tags.png.
- Color coded tags based on what was chosen in the “Handling” section
- Also color coding based on what classification was chosen.
- How could we show these tags (Storage, Transmission, etc)?
- User should be able to manage tags - delete (swipe left to right), drag and sort
- User should be able to edit tag names 10-3_My_Tags_Detail.png

08: Tutorial
- Present this in an overlay format as a one-time/first time user guide.
- Should be accessible from the menu if needed at a later time (can be opened for whatever page they are on).

09: Feedback
- This would be an area for a user to leave feedback for the development team or provide suggestions
- See 05-Mobile-user-feedback.jpg for an example

10: FAQ
- We want to highlight the key features of the app on this page
- Purpose and usage
- Brief description of the different sections
- Q&A section
- How would this look? Anything else that a user might need to know that you would expect to find here?
- We are including a document with sample FAQ entries to help you anticipate and design for the content

11: Sync Data
- A brief overview of last sync date and last synced info
- Show pending documents/info that need to be synced
- A button/call to action to begin sync
- A confirmation when sync is complete - update the brief overview

Supporting Documents
- DataClassification-LabelingGuidelines.pdf - guidelines on how data is labled
- DataClassification-ScreenRelationship.pdf - More info about how the screens tie together
- DataClassification-SelectionForApp.pptx - Example classification selection to use
- DataClassification-UserFlow.jpg - Site flow
- DataClassificationTalkingPoints.doc - more info on Data Classification if neede

Branding Reference
- Refer to http://www.ge.com/
- See attached provided designs for style

Target Audience
- GE employees who are creating/viewing/using documents and data

Judging Criteria
- How well did you execute and design your concept?
- Did you communicate the fundamentals of data classification well through your designs?
- Does your design help people with little experience and people with a lot of experience with data classification find the answers to their questions quickly and easily?
- Does your design appeal to employees around the world?
- Cleanliness and functionality of your graphics and design
- Ease of use - Is it easy to use on a mobile device (size of buttons/links/spacing) and navigate to other sections/screens

Submission & Source Files
Preview Image
Create your preview image as one (1) 1024 x 1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission in it.

Submission File
Please upload PNG images in a ZIP file with all requested contest requirements states above. Number your files (01, 02, 03, etc) in order. This will help when reviewing with the client.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors_ or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.