Multi Functional Virtual Network (MFVN) UI Design Concepts Challenge

Welcome to Multi Functional Virtual Network (MFVN) UI Design Concepts Challenge. For this challenge, we are looking for your help in coming up with initial design concepts for an app that allows organizations in all market sectors (e.g. Defense, Logistics, First Responders, Finance, Health) to rapidly and securely share data with global stakeholders and business partners.

We had provided design direction document to help you get started and we are looking for you to provide design concepts and click-paths based on the provided requirements. This is the first step in planning our user experience!

In this challenge, we are looking for DESIGN CONCEPTS on how this Application could work. What should the user see and experience when using the application?

Round 1

Submit your initial designs for Checkpoint Feedback

0. Login
1. Home / Landing Page
2. Admin Dashboard
3. User Dashboard
4. Networks List Page (Grid)
5. Networks List Page (List)
6. Network Detail Page

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

0. Login
1. Home / Landing Page
2. Admin Dashboard
3. User Dashboard
4. Networks List Page (Grid)
5. Networks List Page (List)
6. Network Detail Page
7. Network Detail Settings Page
8. Document Details

Optional Screens:
9. User Profile 
10. Organization Profile
11. File Shared Network Flow

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

The Multi Functional Virtual Network (MFVN) allows organizations in all market sectors (e.g. Defense, Logistics, First Responders, Finance, Health) to rapidly and security share data with global stakeholders and business partners. This solution enables clients to establish on-demand, secure virtual networks to facilitate collaboration, coordination, and knowledge sharing with global partners and customers. We are looking for a modern, clean, striking design for our UI. Think futuristic and next generation of UI design. Good examples of this include UI examples from films such as Minority Report, Ironman, and Oblivion.

This MFVN APP will provide the following capabilities:
• Common Operating Picture to enable virtual network owners to manage access, security and network capabilities
• Drag and drop and wizard based interface to on-board partners
• Built-in collaboration for data and knowledge sharing
• Wizard and automated Metadata tagging
• Cyber security management that includes continuous monitoring
• Adaptable Identity and Access Management (IdAM) architecture to support password, common access card, or biometrics security based on client requirements 
• Big Data analytics and reporting

User Scenarios:
We are looking to handle couple of scenarios in this challenge:

1) Administrator User Scenario:
Dave is an administrator for Organization X. He is notified that Organization X is now a collaboration partner with Organizations A, B and C. Dave has to share files with these organizations based on the Networks he is involved with. He opens up the MFVN App on his computer and identifies he is in Organization X on the Login Page and enters his Username and Password, his personalized dashboard loads up with the available Network <libraries> he can upload data/files/geo-data/etc...

He selects Network<library 1> sharing settings and shares it with Organizations A and B since they were on-boarded to support this effort. Dave also goes into Network<library 2> settings and shares it with Organizations A and C. Once he goes back to his dashboard, these new connections are represented.

***Dave can also access Organization X user access settings and add users to Network<library 1> as an additional support staff.***

2) User Scenario:
Kimberly is a member of Organization X and was assigned to Network<library 1>. She logs into the MFVN App from her computer and indicates she’s from Organization X and enters her Username and Password, Kimberly is brought to the dashboard where she sees all the Network Libraries she has access too. She clicks on the Edit function for the document and is able to make changes to it. After closing it out, she views a few other documents she has access to and closes the App.

Design Considerations:
- Looking for modern, futuristic, intuitive user interface
- Focus on the design for a great user experience
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path, so we can see how the interactions fit together in the application
- We had allowed Stock Photos for this challenge, feel free to use images related to this site!

Branding Guidelines, Design Direction and Inspirations:
- We had provided a design direction document to help you get started, please DO NOT COPY
- Follow the branding guidelines from the given design direction document…
- You are free to come up with your own logo’s or use one available in the given design direction document.
- We had provided some inspirational images to get you inspired, please make sure you are NOT COPYING them..
- Additional inspirational futuristic look & feel UI examples that might be worth looking at: Inspiration 1, Inspiration 2, Inspiration 3, Inspiration 4!

Design Size:
Desktop: 1024px width and height as required

Required Pages:
We need below pages to be designed..

0. Login:
- When logging in, a user needs to  enter/identify the organization they belong to and then enter username and password
- We also need to provide options to register as an organization or as an individual..
- Users/Admin will also have an option to insert their smartcards and enter a PIN associated with it to login into the Application.

1. Home / Landing Page:
- This is the landing page/ welcome page for MFVN.
- The primary functionality for this page will be for a user to Log In to their application and the secondary role for this page is a welcome and promotional landing page for the MFVN Application.
- It should give users an overview of the features of the APP as well as content to familiarize the user with “how to” use the application.
- Testimonials, demos, and other informational content will live on this page.

Think of an interactive infographic that illustrates the MFVN concept. We are looking for ideas for this to be some sort of dynamic infographic...
- Some ideas include "MFVN" in the center and having clickable images of files, and data circling around it. If a user clicks on one of the images then the explanations of "Share," "Manage," and "Collaborate" will expand.
- Another idea is to have Share, Manage and Collaborate as pieces of a pie that make up this infographic. When you click on a piece, it pulls out and displays a description of what you can do with Share, Collaborate, and Manage.
- Note that, login is accessed from this page.

2. Admin Dashboard:
- The dashboard for the Admin has a customized view of all of the Networks, Work Elements, Files, Users, Organizations and Activity that a Admin User is part of on the MFVN Application.
- The dashboard gives the Admin user a snapshot overview of the files, Networks, and Work Elements that are important to the user.
- At a top level view the user can see recent activity, Networks, and other important content that allows the user to quickly access information and content right from the dashboard view.
- Other possible items to display on the dashboard would include “Recent Networks”, “Recent Documents” “Priority Items”.
- The main navigation should echo the dashboard and provide a universal navigation element that allows the user quick access to content and users of the MFVN Application.

3. User Dashboard:
- This is similar to admin dashboard but will have minimum functionalities as compared to an admin
- The dashboard for the User has a customized view of all of the Networks, Work Elements, Files, Users, Organizations and Activity that a Admin User is part of on the MFVN Application.
- The dashboard gives the Admin user a snapshot overview of the files, Networks, and Work Elements that are important to the user.
- At a top level view the user can see recent activity, Networks, and other important content that allows the user to quickly access information and content right from the dashboard view.
- Other possible items to display on the dashboard would include “Recent Networks”, “Recent Documents” “Priority Items”.
- The main navigation should echo the dashboard and provide a universal navigation element that allows the user quick access to content and users of the MFVN Application.

4. Networks List Page (Grid):
- Clicking on the main navigation or by viewing ALL Networks, the user can view a GRID view or LIST view of their Networks and Networks that are shared with them.
- The can filter, categorize, organize, share and edit Networks as they click into a Network detail.
- This view provides a user with an overview of all the Networks that they are a part of.

5. Networks List Page (List):
- Clicking on the main navigation or by viewing ALL Networks, the user can view a GRID view or LIST view of their Networks and Networks that are shared with them. 
- The can filter, categorize, organize, share and edit Networks as they click into a Network detail. 
- This view provides a user with an overview of all the Networks that they are a part of. 

6. Network Detail Page:
- Clicking on a Network Detail view will display the documents and files that are stored within the Network Library. 
- The Network can contain a file folder structure that has multiple levels of organization. 
- The Network can contain multiple folders that can contain different types of files.
- Files can include, audio, video, pictures, maps, geo data, infographics, charts, stats, PDF, Word Docs, PPT Docs, and other file types. 
- The Network detail will show this file structure and also have a overview/ description of the Network. 
- Other items on this page can contain recent Network Activity, who this Network is shared with, and the ability to add organizations and individuals to share this with via Network Settings.
- A user can edit Network details, view contents and if they are an admin for this Network, control sharing settings and upload new files to the Network folder. 
- They can also view file detail views where they can collaborate with other users.

7. Network Detail Settings Page:
- An admin of the Network can control the sharing settings for this Network. 
- The Admin can share the Network with organizations and individual users.

8. Document Details:
- A user can view a document detail and comment, collaborate with other users of this Network. 
- An admin can edit the document. 
- Users can see who this document is shared with and the recent activity that has taken place on the document.
- Also provide an option to view the document shared network flow..

Optional Screens:
Below screens are not shown in the design direction document but we would like to get your thoughts if you have time and would be a great addition in showcasing design communities expertise

9. User Profile:
- We would like you to come up with a user profile
- This will show user details, contact information and also the organization they belong to!
- Note that, admin will have option to edit a user under them and change their roles and permissions.
- Admin will have option to add a new user to the project!

10. Organization Profile:
- We would like you to come up with a user profile
- This will show contact information of the organization..
- Show Team Members under this organization..
- It will be good to display the organizational hierarchy!
- Show list of documents that has been shared and also provide an option to view the document shared network flow..

11. File Shared Network Flow:
- This view gives the user an overall idea on how the files were shared with users over a period of time..
- Please have a look at this shared wireframe: http://cup5rp.axshare.com/#p=file_tracking, if link doesn't work - please have a look at the wireframe screenshot in Network Flow (Page 11 in spec).zip
- We had provided couple of inspirational images (see in Network Flow (Page 11 in spec).zip) on how this can be visualized, this could help you get started with your thinking!
- This need to be shown as an infographic, that allows users to see who is involved within a project and when a file was shared with someone, they could see the entire flow.
- User will have the ability to view these file sharing flow by choosing a date range, search based on a user, based on a project,roles, etc...
- Feel free to expand on the concept!

Target Audience:
- Global stakeholders and business partners

Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as an application

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

Submission File
Submit JPG/PNG for your submission files.

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

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.