Challenge Summary
Welcome to "HPE - GMARS Topology Dashboard Design Concepts Challenge". In this challenge we are looking for the community to provide us with some design concepts to explore some initial look and feel for our GMARS app. We'll be exploring navigational concepts, content organization and data visualization for this challenge.
In this challenge you are provided with an opportunity to show IT Executive just how good your user interface and user experience (UI/UX) design skills are. This will be a fun challenge with high prizes! We want to be WOWED!
Round 1
01. Login Screen
02. Service Management Dashboard Screen
03. Service Operation Landing Screen
04. Incident Management Screen
05. Incident Management Interative Graph Displays
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
01. Login Screen
02. Service Management Dashboard Screen
03. Service Operation Landing Screen
04. Incident Management Screen
05. Incident Management Interative Graph Displays
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal for this challenge is UX / UI design exploration, and concepts around general look-and-feel direction. The GMARS app will serve as a tool with near-real time view of all systems in user organizations and an understanding of the status of these systems and the impact of any issues if systems are down. We’re looking for a broad range of creative ideas to move forward with and refine in future design challenges. Show us your best UI design and User Experience ideas!
We have provided you with a set of wireframes to get you started. This includes the type of content that should be included on the screens and the relative user flow. However, we are looking for your help in defining what is the best overall UI and UX. DO NOT just simply color in the wireframes. Reinterpret their designs and layouts to make a more engaging, streamlined and visually appealing UI/UX.
We want to see new ideas and ways to think and interact with the content. Your design should remain HIGHLY functional and user friendly.
Description of Assignment
We are looking for your most innovative and interactive UI designs. We want you to think outside the box and create something that is visually stunning yet professional and engaging. We are looking for your UI designs and concepts for this monitoring and configurable dashboard tool.
Use Case Scenario
- Blake is an IT executive at a financial services corporation.
- He needs to have a near-real time view of all systems in his organizations and an understanding of the status of these systems in evaluating any impact to his business user.
- This GMARS application will assist Blake and his team to use past data in improving IT service for their business user.
- Broadly, all screens can be summarized into three use cases :
--- Gather IT Service Data and provision functionalities to Analyze and Track it
--- Collect Application Data / Server Data and enable IT team to view those data using interactive flow charts / drill down graphs
--- Generate Dynamic Reports for Executive For example, if a system like Service Center or a database is down, Blake needs to quickly view the latest status, downtime information and gain an understanding of the business impact.
- Blake typically logs into the GMARS system several times a day and is able to navigate quickly to the area of operations he's interested in to find information on the overall IT landscape of the financial services company environments.
- The tool provides a dashboard/drill down for executive users like Blake to gain critical insights into applications, servers and its configuration (host name, IP address, ports, databases, etc.), to see system uptime, issues, impact of issues, outages etc. to see the aging of the tickets and status of the tickets.
- The application will assist his team to troubleshoot a problem by drilling down its application data / server data using interactive graph / tree-view / latest UI charts. Bottom line, the GMARS application should allow Blake to view the data in several different ways and depicts the data list, gallery, and interactive visualization charts that give him the control view and digest the data in the best possible technique.
Screen Size Requirements
We are targeting desktop and mobile designs, with a focus on responsive design. Your designs should work across all devices.
Desktop: 1280px width
Screen Requirements
Check documents "HP-GMARS-Topology-Dashboard-Design-Direction.pdf" for the wireframes. The basic screen flow for the application is as follows. After successfull log in, a user is taken to the Service Management Dashboard. This screen will be an overview of the 5 main areas of content that a user will be able to click into to explore in more detail. Consider imagery, tiles, or other graphical devices to display these main sections and be sure to include a call to action or button that links to that section.
After selecting one of the 5 main areas from the Service Management Dashboard screen, a user is taken to the landing page for the content section that they selected. In this instance, we will be selecting the Service Operation section.
The Service Operation Landing screen will have 4 sub sections of content (Incident Management, Problem Management, Change Management, and Relase Management) Similar to the Service Management dashboard screen, show a graphical way of displaying the overview of thses sub sections. Include a call to action button for a user to explore deeper into a subs section.
After selecting Incident Management for further exploration, the user will be taken to the Incident Management screen. Here is the bulk of the interactivity for how a user interacts and digest the content and data. On this screen a user is presented with different ways of viewing the data and content. Depending on what the content or data is...the user will be able to view in a list view, gallery view, and/ or an interactive graph/ infographic display. The goal here is to build out templated assets to build the rest of the screen assets out with. We are looking for you to provide us with design styles and exploration for each of these view types as well as robust graphic style for the infographics. The key interaction that we want to see for the interactive graph/chart display is for the user to be able to select the graph/chart type that they wish to view the data in. For example (Pie chart, Bar chart, Topology Drill down, ect). Be sure to show different chart/ graph types and how they relate to your overall design concept.
Another key aspect that we want you to consider is the ability for a user to download, export, or share the data reports that they are viewing. Make sure to account for this in your design.
01. Login Screen
- WF Reference Page 2
- Simple and intuitive login page
- This should be eye catching and appealing for the user
- Provide error condition if user put wrong credential.
02. Service Management Dashboard Screen
- WF Reference Page 3
- Default page when user open the app.
- This page needs to be extremely functional with a great user experience, but also visually engaging.
- The wireframe will be your guide for the overall content, however, the layout is open for you to change.
- Make sure you are capturing the required information and functionality included in the wireframes.
- User will be able to see all systems summary information and their status from this screen.
- There are 5 areas needs to be shown for now :
--- Service Operations
--- Service Delivery
--- Service Pricing
--- Portfolio Management
--- Service Improvements
03. Service Operation Landing Screen
- WF Reference Page 4
- Click on any section in the dashboard, and the user will be taken to the landing page for that content section.
- There are 4 sub sections within Service Operations. in each system that needs to be presented in this screen with a visual and overview of the subsection :
--- Incident Management
--- Problem Management
--- Change Management
--- Release Management
04. Incident Management Screen (List and Gallery View)
- WF Reference Page 5 and 6
- For these screens we want you to explore an attractive way of displaying content/ data in 2 different views
- List View: Typical list or table display view w/ rows and columns of data
- Gallery View: Image and text display in tiles/ cards
- The main goal of this exploration is to establish graphical template views that can be used to flow in content
05. Incident Management Interative Graph Displays
- WF Reference Page 7,8, and 9
- This is an interactive view of the content/ data that the user can manipulate to view in a variety of different graphical views.
- A great example of what we are looking for can be found here. Notice how a uer can select the type of visualization that they want to view as well as the ability to interact with that visualization.
- Be sure to show several different versions of this interactive graph displays. Please show how each of the following will fit into your design concept.
1. Topology Drill down view
- Design style we like a look and feel similar to this example.
2. Graph of data over time
3. Bar Graph w/ target metric
- Be sure to show a filter bar on the for this view that allows the user to filter/ interact w/ the data by filtering by:
- Country
- Region
- Application
- Date Range
- Total by Application
- % by incident type
- % by severity
- Average time to own
- Average tiem to resolve
- Total by resolving group
Documentation:
- Design Direction Site (https://projects.invisionapp.com/boards/W4MQG2TME6KZ/): This site includes Wireframe click throughs, content docs, sample data, inspiration and suggested branding.
- Wireframes: Use flow documents (attached in design direction site) as wireframes and your guide when designing your screens. You DO NOT have to follow the wireframes exactly. If you see opportunities to improve the user experience and UI, PLEASE show us. Make sure that you understand the wireframes and user flows. If not, please ask questions in the forum.
Branding Guidelines
We've included some branding guidelines, colors and fonts, in our Design Direction Site.
Target Audience
- IT executive and Decision Markers
Judging Criteria
- How well does your design align with the objectives of the challenge
- Cleanliness of your graphics and design.
- Overall Design and User Experience
- New ideas and concepts
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload JPG/PNG images in a zip file with all requested contest requirements stated above. Number and Name your files appropriately to aid in the review process. This is very important.
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, images (sizes or colors) or modify overall colors.
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.