Challenge Summary
Welcome to the second challenge for the SISN APP. For this challenge we want you to take the existing design look and feel and explore UI concepts around a “relationship visualizer”. The relationship visualizer displays the complex connections between Networks, Organizations, Users, files, and documents. Using the provided source files we are looking for the community to help us build out additional pages and screen flows to continue the design of this application.
We have provided a design direction document as well as source PSD files to help you get started and we are looking for you to provide design concepts and click-paths based on the provided requirements. Good luck and we’re looking forward to your submissions!
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
Initial Design Concepts of the below for checkpoint review
Design Problem 1 - Network Connection View
Design Problem 2 - Organization View within a single network
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
Final Design Concepts with any checkpoint feedback implemented
Design Problem 1 - Network Connection View
Design Problem 2 - Organization View within a single network
Design Problem 3 - Documents View within a network
Design Problem 4 - Manage sharing settings
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)
About the SISN Application:
The Secure Information Sharing Network (SISN) 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 SISN 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
Sharing Visualization UI:
For this challenge, we want to see your best user interface and user experience concepts for showing a functional UI that presents the relationship between objects. The interface should quickly show relationships between files, documents, user groups, users and networks. Each point on the user interface should be click-able to allow for more detailed understanding of each item in the interface and link back to other sections of the application. Your designs should work with the provided look and feel.
Looking at the provided design assets….a vector graph chart is part of the design background. Use this as the starting point for your exploration. Think of this as a dynamic user interface that animates, shifts, and reacts to how a user is interacting with it to display the proper data and information. Use color, hierarchy, and multiple states of the UI to demonstrate your interface concept. To help you get a better understanding of what the interface needs to accomplish, reference the definitions and functions listed below.
Definitions:
- Each point should represent an Organization, File type, or user.
- Each connecting line depicts information sharing. How can you use color to depict the connection between organizations within the network?
- Each Network is a group of organizations of one color (or some other way of coding that they are part of the same network)
- The UI graphic as a whole is a representation of your organization, and all your networks and the organizations you are connected to as a result. How can you use size and scale to animate and show this complex set of relationships?
Functions Needed:
1. There should be options to isolate networks and view one network at a time
2. Each organization should have high level information that pops up about them
3. Each network should also have a high level description of why it is stood up. Think of how to label them.
4. You should be able to click on the organization point. Clicking on that point would animate connections within that organization that includes users and maybe basic profile
5. We should be able to manage sharing setting within this interface
- We should be able to delete connections and take organizations out of a network
- We should be able make connections, or "drag" organizations into a network
- We should be able to share files with individual users or organizations
- We should be able to click into file detail views from this interface
6. Within a network, there should a presentation of the documents that are shared as well. Perhaps in grid form.
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!
- We had attached design from the previous challenge, please make sure to follow the look & feel from that!
Branding Guidelines, Design Direction and Inspirations:
- We have provided a design direction document to help you get started, please use the source PSDs (existing designs) as a starting point for your design exploration
- We have 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
User Scenarios:
- Mike is an employee at ABC Organization.
- Lately he’s been working on several projects and coordinating information, documents and files with several organizations and user groups across a network set up on the SISN application.
- The SISN application makes it easy for Mike to upload, share, manage, and collaborate on files and documents with various team members within his organization as well as other team members who are part of other organizations across a network.
- Mike wants to get a better understanding of who has access and is sharing a particular document that he is working on.
- After logging in to the SISN app and clicking into a Network Detail view, Mike clicks on the “relationship visualizer” icon and is brought to an easy to use and intuitive user interface that graphically depicts the relationship between users, organizations, networks and the files that they share and collaborate on with each other.
- The user interface is a graphic representation of the connections between these documents, users, and organizations and through a rich interactive user experience, understanding and managing these relationships becomes easier for Mike to understand.
- Mike is quickly able to see top line information about each data point with helpful tool tips and hover states.
- He is able to see top line information on a document, who it’s shared with and manage the documents sharing settings...all from the relationship visualizer.
- Mike clicks on to a document he is working on...see’s who is sharing and collaborating on that document with him and quickly adds another organization and a set of users who needs access to this document.
Required Pages:
Based on the above definition and use case scenario, we had come up with list of functionalities and pages that we would like to come up with the below concepts/designs. Feel free to explore additional screens if you feel it is necessary to explain your user interface concept.
Design Problem 1 - Network Connection View:
Show a instance of the user interface that shows the overall picture. It can contain multiple networks...but the user should be the center point of this interface and all of the connections branching off from the center point
- How do we represent individual organization points? (in the current wireframe, we had shown this as a user thumbnail) - come up thoughts/ideas on how better can this be shown?
- Network will be represented as multiple organizations are grouped/connected through lines.
- These connecting lines are connected together to depict information sharing between organizations.- Each network will have a group of organizations and need to make sure connecting lines within a network should be of same color.
- Overall this graphic will be a representation of networks and organization you are connected to as a result.
Design Problem 2 - Organization View within a single network:
Show an instance of the user interface that shows how a user can select a network from design problem one and view a singular network at a time.
- In the visualization graphic, we need need a way for the user to click on a network, so they can see one network at a time
- Note: each of the network will have multiple organizations.
- Top level information on a network should include a short description or overview
- Show connections branching off of a Organization that include team members and files that are shared w/in that network
- Within this organization details, we need to show the users and their basic profiles
- Come up with thoughts on what else can be shown in this view?
Design Problem 3 - Documents View within a network:
Within a network, there should be a presentation of the documents that are shared as well. Clicking into a shared documents detail would show a representation of the documents that are shared within the network and who they are shared with.
- Within a network view, we need to show a presentation of documents that were shared within this network
- We would like to see how a grid view would work for showing these list of documents
- Show us your design ideas.
Design Problem 4 - Manage sharing settings:
We should be able to manage sharing setting within this interface
- We need the ability to delete connections and take organizations out of a network.
- We should be able make connections, or "drag" organizations into a network
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.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.