Challenge Summary
Welcome to "Utopia - Cloud Service Health Portal Design Concepts Challenge". For this challenge, we need to create the look and feel for our cloud services monitoring health portal. This portal will be used by many different audiences and mainly refers to showing servers status and other elements that involve servers like projects, hosts or environments.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01) Landing Page Screen
03) Dashboard Screen
04) Server List Screen
05) Project/Host/Environment Screen
07) Server Details Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Landing Page Screen
02) Login Screen
03) Dashboard Screen
04) Server List Screen
05) Project/Host/Environment Screen
06) New Build List
07) Server Details Screen
08) Server Request Screen
09) vRealize Overview Screen
- As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
The customer of this challenge is the IT department of Multinational Company. We get different IT figures (servers list, performance, tickets) from different sources. Right now we have consolidated all the information in a single database and we want to create a frontend to visualize all that information. As our users have different roles we want to provide a top down "design" from a Dashboard / KPI view until server details.
The key features for this app include:
- Monitoring All Cloud Services Activity
- Ability to Drilled Down to specific services (server, project, host)
- Fast action to find specific data information about issue, details, etc
- Dynamic status and conditions displays
- Help Topics around the app (Excellent User Experience)
- Simplicity for doing Server Request
- Ability to track all log, progress related to user in the app
Challenge Goals
Create the best possible UI/UX for our New Cloud Service Health Portal while consistently keep the design quality to meet our brand expectation.
Design Considerations
- What should the priority features be?
- UI/UX Best Practice for the Monitoring App!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- 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 and navigation, so we can see how the interactions fit together in the application
Target Devices
- Desktop Standard Screen Size: 1366px(w) × 768px(h)
- Mobile Retina Screen Size (iPhone): 750px(w) × 1334px(h) (@2x)
Branding Guidelines
- Modern Crisp look and feel adhering to our standards.
- Follow our Branding Guidelines Document for design style, font, and colors.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=615003
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Landing Page Screen
- Provide Basic information page about what Cloud Services is and the services that we provide, while also giving a link to the Login Page
- Consider this screen as marketing agent/material for our potential customer or existing customer to offers our services.
- It needs to be attractive, clear, informative, and raise potential customer curiosity about our services.
02) Login Screen
- Standard Login page (Preferably through Active directory to authenticate) with GAD ID used to restrict views based on our managed database
- Username, Password, Forgot Password, Remember me options
- Needs error login scenario simulated in this screen
03) Dashboard Screen
- Show Summary of live Server Count, Server Down Count, Server Issues/Warnings and Newly Provisioned servers
- Search Bar to find server information?
- Notification area
- Activity log History?
- Feel free to provides Dashboard features that fit for monitoring app
04) Server List Screen
- This screen should be able to display All Server List information
- Show information that related to the user only (Limited by Access Table)
- Needs to be able to provide various information regarding server information:
- List of all Servers in the App, column content (Server Name, Environment, CPU, RAM, Project Name, LSA, Contact, View)
- List of all Active Servers in the App, column content (Server Name, Environment, CPU, RAM, Project Name, LSA, Contact, View)
- List of all Servers that currently Down, column content (Server Name, Environment, CPU, RAM, Project Name, LSA , Contact, Time Down, View)
- List of all Servers that currently have Issued (e.g. high CPU, Ram, Disk), column content - Columns (Server Name, Environment, CPU, RAM, Project Name, LSA , Contact, Issue Detail, Issue Level, View)
- Search and Filter Ability to find server information
- Needs to be able to see in various view (Card/List/etc)
- Needs great visualization to give user fast awareness about server status (for ex. red/green dot for server active/down, etc)
05) Project/Host/Environment Screen
- Host refers to the main "HOST"(s) where the virtual servers are..think of it as a server which "hosts" other servers. A host is any device that has established a connection to a network, but only hosts that accept connections from other devices (clients) qualify as servers.
- Environment refers to different software deployment environment, which has 4 phases: development, standard test, user acceptance test(UAT) and production (POD).
- Project refers to the name of a project within our database and servers associated to it. Projects can be created by clients to develop specific application/support some business area.
- User can check all information regarding their cloud features from this screen
- User can find different pieces of information from this screen:
- Project List Overview, List of Projects With Count of Servers, Servers Down, Server Issues, CPU AVG, RAM AVG, Disk Info (Total Provisioned, Disk Used, Disk Free, Disk Used, Disk % Used)
- Host List overview, List of Hosts and Environments with Count of Servers, Servers Down, Server Issues, CPU AVG, RAM AVG, Disk Info (Total Provisioned, Disk Used, Disk Free, Disk Used, Disk % Used)
- Environment List overview, List of Environments with Count of Servers, Servers Down, Server Issues, CPU AVG, RAM AVG, Disk Info (Total Provisioned, Disk Used, Disk Free, Disk Used, Disk % Used)
- Each server can host 1 or x applications.
- 1 application can be hosted in 1 or x servers.
- An environment is a set of servers for 1 application, For example: Application A can have 3 environments (development, UAT & production) and each environment can have 1 or X servers.
06) New Build List
- Display New Build Server List (Limited by Access Table)
- Search and Filter Ability
- Columns (Server Name, Environment, CPU, RAM, Project Name, LSA, Contact, build date, View)
07) Server Details Screen
- Display Server Name, Server Time Up, Count of CPUs, RAM Assigned, Overall health (good, Warning, Critical) with explanation on why, Operating System, FQDN, Server Down length
- CPU Information (Current CPU), CPU Graph 1-day history with option to change up to 30 days
- RAM Information (Current RAM), RAM Graph 1-day history with option to change up to 30 days
- Disk Information, List of Disks on machine with Total assigned, used and free
- Service Now Tickets
- Backup Status
- Disaster Recovery (DR) Status
- Request for Server
08) Server Request Screen
- List of server Requests asked for (status)
- Ability to edit, add and delete request
- Types of requests (Extra CPU, Extra Ram, Extra drive, Extra Drive Storage, Other)
- View Requests for servers and respond via email and change status (for Admin)
09) vRealize Overview Screen
- Provide overview of vRealize Infrastructure, Count of overall machines, Count of machines in different vCenters, Clusters, Hosts, how many are turned on, Overall CPU assigned count, Ram assigned to count, Disk Space Overviews, OS Overview, Config Version overviews
- Reclaims Page (Overview of machines where CPU can be reclaimed)
- Create Group (Add / Edit / Delete (Groups & Assigned Servers))
- Manage requests (Through email also)
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvel app request to fajar.mln@gmail.com
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Documentation
Please ask in forum for access to documentation
- Branding Guidelines Document (Branding Guidelines.zip)
- Sample Screen Documents, Reference for content information (sampleScreen.zip)
- Application Portfolio Dashboard.pdf & sampleApplicationList.xlsx (Shows applications list used in our cloud services - Reference Only)
Target Audience
- Non-Authorized Users (Pre Login)
- Server Owners / Application Owners
- Service Executives
- Project Managers
- Cloud Services Administration
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 image files based on challenge submission requirements stated above, along with MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback (Desktop + Mobile)01) Landing Page Screen
03) Dashboard Screen
04) Server List Screen
05) Project/Host/Environment Screen
07) Server Details Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates (Desktop + Mobile)01) Landing Page Screen
02) Login Screen
03) Dashboard Screen
04) Server List Screen
05) Project/Host/Environment Screen
06) New Build List
07) Server Details Screen
08) Server Request Screen
09) vRealize Overview Screen
- As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
The customer of this challenge is the IT department of Multinational Company. We get different IT figures (servers list, performance, tickets) from different sources. Right now we have consolidated all the information in a single database and we want to create a frontend to visualize all that information. As our users have different roles we want to provide a top down "design" from a Dashboard / KPI view until server details.
The key features for this app include:
- Monitoring All Cloud Services Activity
- Ability to Drilled Down to specific services (server, project, host)
- Fast action to find specific data information about issue, details, etc
- Dynamic status and conditions displays
- Help Topics around the app (Excellent User Experience)
- Simplicity for doing Server Request
- Ability to track all log, progress related to user in the app
Challenge Goals
Create the best possible UI/UX for our New Cloud Service Health Portal while consistently keep the design quality to meet our brand expectation.
Design Considerations
- What should the priority features be?
- UI/UX Best Practice for the Monitoring App!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- 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 and navigation, so we can see how the interactions fit together in the application
Target Devices
- Desktop Standard Screen Size: 1366px(w) × 768px(h)
- Mobile Retina Screen Size (iPhone): 750px(w) × 1334px(h) (@2x)
Branding Guidelines
- Modern Crisp look and feel adhering to our standards.
- Follow our Branding Guidelines Document for design style, font, and colors.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=615003
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Landing Page Screen
- Provide Basic information page about what Cloud Services is and the services that we provide, while also giving a link to the Login Page
- Consider this screen as marketing agent/material for our potential customer or existing customer to offers our services.
- It needs to be attractive, clear, informative, and raise potential customer curiosity about our services.
02) Login Screen
- Standard Login page (Preferably through Active directory to authenticate) with GAD ID used to restrict views based on our managed database
- Username, Password, Forgot Password, Remember me options
- Needs error login scenario simulated in this screen
03) Dashboard Screen
- Show Summary of live Server Count, Server Down Count, Server Issues/Warnings and Newly Provisioned servers
- Search Bar to find server information?
- Notification area
- Activity log History?
- Feel free to provides Dashboard features that fit for monitoring app
04) Server List Screen
- This screen should be able to display All Server List information
- Show information that related to the user only (Limited by Access Table)
- Needs to be able to provide various information regarding server information:
- List of all Servers in the App, column content (Server Name, Environment, CPU, RAM, Project Name, LSA, Contact, View)
- List of all Active Servers in the App, column content (Server Name, Environment, CPU, RAM, Project Name, LSA, Contact, View)
- List of all Servers that currently Down, column content (Server Name, Environment, CPU, RAM, Project Name, LSA , Contact, Time Down, View)
- List of all Servers that currently have Issued (e.g. high CPU, Ram, Disk), column content - Columns (Server Name, Environment, CPU, RAM, Project Name, LSA , Contact, Issue Detail, Issue Level, View)
- Search and Filter Ability to find server information
- Needs to be able to see in various view (Card/List/etc)
- Needs great visualization to give user fast awareness about server status (for ex. red/green dot for server active/down, etc)
05) Project/Host/Environment Screen
- Host refers to the main "HOST"(s) where the virtual servers are..think of it as a server which "hosts" other servers. A host is any device that has established a connection to a network, but only hosts that accept connections from other devices (clients) qualify as servers.
- Environment refers to different software deployment environment, which has 4 phases: development, standard test, user acceptance test(UAT) and production (POD).
- Project refers to the name of a project within our database and servers associated to it. Projects can be created by clients to develop specific application/support some business area.
- User can check all information regarding their cloud features from this screen
- User can find different pieces of information from this screen:
- Project List Overview, List of Projects With Count of Servers, Servers Down, Server Issues, CPU AVG, RAM AVG, Disk Info (Total Provisioned, Disk Used, Disk Free, Disk Used, Disk % Used)
- Host List overview, List of Hosts and Environments with Count of Servers, Servers Down, Server Issues, CPU AVG, RAM AVG, Disk Info (Total Provisioned, Disk Used, Disk Free, Disk Used, Disk % Used)
- Environment List overview, List of Environments with Count of Servers, Servers Down, Server Issues, CPU AVG, RAM AVG, Disk Info (Total Provisioned, Disk Used, Disk Free, Disk Used, Disk % Used)
- Each server can host 1 or x applications.
- 1 application can be hosted in 1 or x servers.
- An environment is a set of servers for 1 application, For example: Application A can have 3 environments (development, UAT & production) and each environment can have 1 or X servers.
06) New Build List
- Display New Build Server List (Limited by Access Table)
- Search and Filter Ability
- Columns (Server Name, Environment, CPU, RAM, Project Name, LSA, Contact, build date, View)
07) Server Details Screen
- Display Server Name, Server Time Up, Count of CPUs, RAM Assigned, Overall health (good, Warning, Critical) with explanation on why, Operating System, FQDN, Server Down length
- CPU Information (Current CPU), CPU Graph 1-day history with option to change up to 30 days
- RAM Information (Current RAM), RAM Graph 1-day history with option to change up to 30 days
- Disk Information, List of Disks on machine with Total assigned, used and free
- Service Now Tickets
- Backup Status
- Disaster Recovery (DR) Status
- Request for Server
08) Server Request Screen
- List of server Requests asked for (status)
- Ability to edit, add and delete request
- Types of requests (Extra CPU, Extra Ram, Extra drive, Extra Drive Storage, Other)
- View Requests for servers and respond via email and change status (for Admin)
09) vRealize Overview Screen
- Provide overview of vRealize Infrastructure, Count of overall machines, Count of machines in different vCenters, Clusters, Hosts, how many are turned on, Overall CPU assigned count, Ram assigned to count, Disk Space Overviews, OS Overview, Config Version overviews
- Reclaims Page (Overview of machines where CPU can be reclaimed)
- Create Group (Add / Edit / Delete (Groups & Assigned Servers))
- Manage requests (Through email also)
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvel app request to fajar.mln@gmail.com
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Documentation
Please ask in forum for access to documentation
- Branding Guidelines Document (Branding Guidelines.zip)
- Sample Screen Documents, Reference for content information (sampleScreen.zip)
- Application Portfolio Dashboard.pdf & sampleApplicationList.xlsx (Shows applications list used in our cloud services - Reference Only)
Target Audience
- Non-Authorized Users (Pre Login)
- Server Owners / Application Owners
- Service Executives
- Project Managers
- Cloud Services Administration
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 image files based on challenge submission requirements stated above, along with MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (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.