Fujitsu - Cloud Service K5 Management Console Design Challenge

Welcome to Fujitsu - Cloud Service K5 Management Console Design!

Fujitsu has public cloud platform called Cloud Service K5 (ref. http://www.fujitsu.com/uk/solutions/cloud/k5/)

This platform is same service as Amazon’s AWS, Microsoft’s Azure, Google Cloud Platform.

K5 currently has IaaS (where hardware level services are provided) and PaaS (one of which is called PF service, where application level services).

 

The goal of this challenge is  to provide new design and visualization ideas to enhance user experience for this service’s management console (application).

We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).

Round 1

Submit your initial design for a checkpoint feedback:
- Initial design.
- 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

Final design plus checkpoint feedback:
- Final design with any checkpoint feedback implemented.
- 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).

Design Requirements:

We’re looking for great UX/UI so that users can see the status of the services, drill down, and add/delete/modify each service resources clearly and quickly per user’s use cases. We’re also looking for dashboards - possibly using visually appealing graphics/charts, in order to meet this requirements.

So in short following are the key item we’re looking for in this design challenge:
- Intuitive UX/UI for users.
- Visually appealing pages with graphics and charts.

Please note that although we’re looking for “cool” new UI for this management console, we’ll be running prototype challenges afterwards. FInal submissions should be complete for the proceeding prototype challenge, and should be durable to code within html5.

Design Notes:
- This is going to be a web App.
- Desktop Size: 1280px width and height as required.
- Should be resizeable to function on a tablet (iPad, other), so please consider responsiveness while designing your solution.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.

Required Screens:
We’re thinking 3 types of screens (although it’s not limited to the following if you think there is better way to present)
Proposed Screens (Red dotted line is the scope of this challenge):


 

00 General:
- We would like to see easy navigation across the pages, (including interactions, and animations if possible). For example, user should be able to drill down into each details, and transition to each element details and/or have a way to view information for each elements.
- Note that it should be designed to handle small to large size customers (meaning users can range from few IaaS items to many of them)

01 Services Dashboard:
- This will be the top page of everyone logging into the management console
- The page should show list of services (“IaaS” and “PF (PaaS)” ), brief overview and key items of each Services such as overall announcements, status, errors/warnings, etc.. Please see attached spreadsheet - “Services Dashboard” tab for the items that should be shown in this page
- We want this page to be visually appealing using graphs and charts
- Currently we have “IaaS” and “PF (PaaS)” services, but there will be more services in future. The scope of this challenge is only for IaaS/PF, but we would like to see how new services can be easily added in future
- Need to make the page customizable based on users’ use cases.
- We’d like to have a way to switch the view of the page so that users can see other key pages within the system according to their use case (like payments, or user management. Details of these pages are not in the scope of this challenge)

02 IaaS Dashboard:
- This will be the page where user is navigated when selecting IaaS service from the top “Services Dashboard”
- The dashboard can be single page or separated into multiple pages depending on how you would design, but would like to see following;
-- A view that shows Graphs and Charts as explained below, that can drill into each IaaS elements
-- A view that shows the overall service diagram that can drill into each IaaS elements
-- Information that should be visible in the dashboard from graphics/charts, etc. are defined in attached spreadsheet - “IaaS Elements”. see column “G” for properties that should be visible.

03 IaaS Individual Detail Pages:
- This will be the pages where users drill down to individual elements from IaaS Dashboard page
- Please see  attached spreadsheet - “IaaS Elements” for the list of elements and it’s properties.
- User should be able to take actions (ex. Add, Modify, etc.) each of the items to put into IaaS service. See the spreadsheet’s column “F” for the properties that needs to be included in add/modify inputs.

04 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles:Reference 1,  Reference 2
Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)
Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.

Graphs and Charts Ideas and it’s use cases for IaaS dashboard
Following are some graph/chart idea that we’ll be looking to see in dashboards. Each graphs and charts should be clickable to drill down or transition to each items’ details pages.
- Ability to see individual resources (like servers, storages) per AZ (Availability Zone) or Regions
-- Graphs to show number of IaaS resources per AZ or Regions
-- Graphs to show total size of Block Storages per AZ or Regions
- Ability to see the usage over time
-- Graph to show CPU/Memory/Disk usage per servers
- Show Top10 ranking charts
-- For servers that has switched status multiple times (switching between ACTIVE  and DOWN) for the last 3 months
-- For servers that had longest down time for last 3 months
- Total disk size per servers and its usage %
- Some graphic view to show servers and its residing AZ from the virtual network

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

Branding : Application Header
Please have this image as the header of each page.

Branding : Corporate Color and Fonts
Following is their corporate color. It is expected that you follow this color for Red and Gray portion of the design:
Red:
- 255R 0G 0B Primary Color
- 163R 11G 26B
- 134R 23G 24B
- 104R 26G 20B
- 72R 25G 10B

Gray:
- 238R 238G 238B
- 218R 217G 214B
- 198R 198G 192B
- 177R 177G 172B
- 157R 156G 149B
- 135R 134G 126B Neutral Gray
- 112R 111G 103B
- 87R 86G 79B
- 60R 60G 53B
Fonts: (this is standard font used as a branding, it is okay to choose other fonts for the design)
- Segoe UI
- Font Size 14px.

Reference:
- Existing guides can be found here: http://www.fujitsu.com/uk/solutions/cloud/k5/guides/

Target audience:
- Fujitsu customers.

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.

Stock Artwork:
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN

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.