Challenge Summary
Welcome to the “Cloud Storage Security Visualization Application Design Challenge”. We have an exciting new application design challenge for a large cloud storage company! In this challenge, we are looking for you to visualize to our customers how a cloud storage company takes measures across its organization to achieve the highest level of data security for it's customers.
Right now for many "users of the cloud" the security and operations of cloud technologies are "intangible and abstract". That is why we are looking to visualize this information - to help tell the story of how we implement security across our different services, data centers and countries for our customers around the world.
This application will be highly visual… the user needs to be able to explore and quickly understand cloud and security concepts.
Let us know if you have any questions!
1) Graphic 1: Data Locality/Data Residency
2) Graphic 2: Physical and Environmental Security of our Data Centers (Priority!)
3) Graphic 3: Systems Development Life Cycle (SDLC) of our services
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
1) Graphic 1: Data Locality/Data Residency
2) Graphic 2: Physical and Environmental Security of our Data Centers
3) Graphic 3: Systems Development Life Cycle (SDLC) of our services
4) Graphic 4: Configuration Management
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The purpose of this desktop application is to help customers quickly understand cloud technologies and what goes into keeping customer's data secure.
This application will be used by potential cloud customers who want to learn more about cloud storage services and of course security! Think if you were to buy cloud storage services… you would want to understand what this cloud technology is and why you should trust us to keep your most critical data safe and secure.
The 4 security domains we want to educate our customer on (aligned with the graphic #'s below):
1. Data Locality/Data Residency
2. Physical and Environmental Security of our Data Centers
3. Systems Development Life Cycle (SDLC) of our services
4. Configuration Management
Through this application design, we want our users to experience a virtual tour of these security domains and activities. We are looking for your great visuals to tell our story about data centers, security, and services!
Important: As we have a tight deadline, an extension will not be possible on this challenge. The Checkpoint deadline is next Monday, February 6, please use the time wisely and ask in the Forums any questions you might have. Adroc and Chekspir will be managing the challenge and helping with the design feedback...
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily click and zoom over the different levels to understand how Cloud Server Security works.
- Research and learn about cloud services, servers and cloud computing:
- - Research Link 1
- - Research Link 2
- - Research Link 3
- - Research Link 4
- Great and unique high-end graphics, 3D stylization and icons
Required Screens
1) Graphic 1: Data Locality/Data Residency
User Experience: World Map with Zoom Levels
When the user first opens the application we want them to be able to explore and understand that we have data centers all over the world (see example). We want the user to think, "wow, this company has a global presence to help me operate in every country of the world." And then also think "okay I need to learn more about exactly what they are doing and how they are operating in all of these countries." Once the user clicks to zoom in to read more about a specific country’s data centers. We want them to feel like they are entering into a new stratosphere to go on an adventure to see everything that goes on inside of the cloud, from big picture to super detailed and specific operation center. Kind of like entering into the north pole, to see how Santa’s Headquarters operate.
Details
- This will be the first screen that users will see when launching this application.
- For this screen, are looking for a “World Map” view, representing the locations of several data centers in many different countries over the whole world. So add a couple of data centers like 2 or 3 per Continent.
- This need to be really cool and well executed, not just a simple vector map with pins. Customers need to feel this like they are going into an “Adventure to the unknown”.
- Think of: 3D views, cool iterations, transitions, etc.
- We recommend Mapbox or other open source mapping technologies to get you started. (Document your map sources)
2) Graphic 2: Physical and Environmental Security of our Data Centers
User Experience: Data Center & Security Controls
Once the user zooms in to learn about a selected area and decide they want to "enter" it, they are taken to have a bird's eye view of the outside and inside of a data center, with a graphic that looks very similar to this example. At this point, the user can begin to explore the exterior and interior of the Data Center. As part of this exploration, they should be able to see security controls and click to see call-out details as needed.
Details
- After clicking a “Data Center Location” (from the map view), users will be taken to a Detail View of the “Data Center”. Please refer to this sample (Use it as reference only, DO NOT Copy this - we need you to create new graphics)
- The first interactive graphic of a 3D data center is exactly the concept we are looking for across the site.
- Unlike the graphic from the example, we are looking to capture the interior and exterior of the data center.
- Interior view would be similar information from the sample graphic
- Exterior view might include things like security guard, authentication to enter the building, fuel tanks outside, etc.
- Security controls that we will need to represent on the Data Center:
- - Physical Access to the Data Center.
- - Video surveillance and intrusion detection systems.
- - All entrances to data center.
- - Automatic Fire Detection.
- - Generators to provide backup power for the entire facility in case of electricity failure.
- - Onsite fuel tanks for extra support in case of long term failures.
- We would like to see is an icon where users can download a PDF or Resume with all the information of the data center. So please include one on your design.
3) Graphic 3: Systems Development Life Cycle (SDLC) of our services
User Experience:
After the user explores the Data Center they decide to go even deeper into the cloud to see how our services (that process customer data on the servers in the data center) are designed and operate.
Details:
Cloud storage company maintains a systematic approach to planning and developing new services for our customers, to ensure the quality and security requirements are met with each release. Our strategy for the design and development of services is to clearly define services in terms of customer use cases, service performance, production and testing, and legal and regulatory requirements to ensure appropriate security controls are incorporated into the application design.
This graphic represents the steps/cycle from the very beginning of developing a new service to when it is considered ready and secure enough to run and process data. We want customers to learn what we do to make sure that our services are designed and developed in a secure manner and undergo rigorous review prior to processing their data.
Service reviews are completed as part of the development process. Prior to services launch, each of the following steps must be completed:
1. Security Risk Assessment
2. Threat modeling
3. Security design reviews
4. Secure code reviews
5. Security testing
6. Vulnerability scanning
7. Penetration testing
- The user could potentially click on Data Servers to see these Services (software helping to run and process the data)
- We want to represent the steps/cycle of the service reviews
- This could be similar to an infographic that visually captures or checks off each of these steps.
4) Graphic 4: Configuration Management
User Experience:
Now the user gets to go even deeper into the operations of the cloud to see how once a service is launched, what the process is every time before a production change is made:
Details:
Change management is the process of reviewing, planning, coordinating, executing, and monitoring changes that affect the IT service delivery environment. Following thorough and consistent change management procedures is necessary to avoid not only critically impacting our internal systems and services, but more importantly, the environment and data of our customers. The process that takes place before a change is migrated to the production environment can be categorized into five key areas: writing the code, review, test, approval, and deployment. Service teams use a tool to facilitate each step in the process, from check-in to production, to achieve secure change management:
1. Code Management
- To request a code review, receive feedback, and collaborate prior to finalizing a code that is ready to ship.
2. Change Management Tool:
- As part of the change management process, a detailed description of the change should be created, submitted, reviewed, and approved.
3. Continuous Deployment Tool:
Continuous deployment is a methodology where every change is automatically built, tested, and pushed to production, with the goal of eliminating as many manual steps as possible. Continuous deployment seeks to eliminate the manual nature of this process and automate each step, allowing service teams to standardize the process and increase the efficiency with which they deploy code. In continuous deployment, an entire release process is a "pipeline" containing "stages”.
- This graphic is showing when a change is made, particularly what the steps are in the process before the change is actually made to ensure it is a safe change that doesn't have a malicious impact on customer data.
- If a user clicks on any “Services cycles” can learn more about the process, when a change is made and also learn about the different management and deployment tools.
~
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
- Focus on the user experience! Focus on the navigation experience. Keeping consistent visual elements - from graph 1 to graph 4 across all zoom levels.
Screen Sizes:
- Design for a web application
- Specific screen sizes: 1280px x 1024px or 2560px x 2048px if you work on a retina display.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Branding/Colors
- We have created an Invision Board with the color palette, fonts and inspiration images:
- https://projects.invisionapp.com/boards/7H34TB96UXTWA/
(Let us know if you are having issues to access this board).
- For logo use a placeholder for now.
Target Audience:
- Potential customers, legal and compliance teams, and business decision makers.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a 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.
Right now for many "users of the cloud" the security and operations of cloud technologies are "intangible and abstract". That is why we are looking to visualize this information - to help tell the story of how we implement security across our different services, data centers and countries for our customers around the world.
This application will be highly visual… the user needs to be able to explore and quickly understand cloud and security concepts.
Let us know if you have any questions!
Round 1
Submit your initial designs for a checkpoint feedback:1) Graphic 1: Data Locality/Data Residency
2) Graphic 2: Physical and Environmental Security of our Data Centers (Priority!)
3) Graphic 3: Systems Development Life Cycle (SDLC) of our services
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your Final designs:1) Graphic 1: Data Locality/Data Residency
2) Graphic 2: Physical and Environmental Security of our Data Centers
3) Graphic 3: Systems Development Life Cycle (SDLC) of our services
4) Graphic 4: Configuration Management
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The purpose of this desktop application is to help customers quickly understand cloud technologies and what goes into keeping customer's data secure.
This application will be used by potential cloud customers who want to learn more about cloud storage services and of course security! Think if you were to buy cloud storage services… you would want to understand what this cloud technology is and why you should trust us to keep your most critical data safe and secure.
The 4 security domains we want to educate our customer on (aligned with the graphic #'s below):
1. Data Locality/Data Residency
2. Physical and Environmental Security of our Data Centers
3. Systems Development Life Cycle (SDLC) of our services
4. Configuration Management
Through this application design, we want our users to experience a virtual tour of these security domains and activities. We are looking for your great visuals to tell our story about data centers, security, and services!
Important: As we have a tight deadline, an extension will not be possible on this challenge. The Checkpoint deadline is next Monday, February 6, please use the time wisely and ask in the Forums any questions you might have. Adroc and Chekspir will be managing the challenge and helping with the design feedback...
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily click and zoom over the different levels to understand how Cloud Server Security works.
- Research and learn about cloud services, servers and cloud computing:
- - Research Link 1
- - Research Link 2
- - Research Link 3
- - Research Link 4
- Great and unique high-end graphics, 3D stylization and icons
Required Screens
1) Graphic 1: Data Locality/Data Residency
User Experience: World Map with Zoom Levels
When the user first opens the application we want them to be able to explore and understand that we have data centers all over the world (see example). We want the user to think, "wow, this company has a global presence to help me operate in every country of the world." And then also think "okay I need to learn more about exactly what they are doing and how they are operating in all of these countries." Once the user clicks to zoom in to read more about a specific country’s data centers. We want them to feel like they are entering into a new stratosphere to go on an adventure to see everything that goes on inside of the cloud, from big picture to super detailed and specific operation center. Kind of like entering into the north pole, to see how Santa’s Headquarters operate.
Details
- This will be the first screen that users will see when launching this application.
- For this screen, are looking for a “World Map” view, representing the locations of several data centers in many different countries over the whole world. So add a couple of data centers like 2 or 3 per Continent.
- This need to be really cool and well executed, not just a simple vector map with pins. Customers need to feel this like they are going into an “Adventure to the unknown”.
- Think of: 3D views, cool iterations, transitions, etc.
- We recommend Mapbox or other open source mapping technologies to get you started. (Document your map sources)
2) Graphic 2: Physical and Environmental Security of our Data Centers
User Experience: Data Center & Security Controls
Once the user zooms in to learn about a selected area and decide they want to "enter" it, they are taken to have a bird's eye view of the outside and inside of a data center, with a graphic that looks very similar to this example. At this point, the user can begin to explore the exterior and interior of the Data Center. As part of this exploration, they should be able to see security controls and click to see call-out details as needed.
Details
- After clicking a “Data Center Location” (from the map view), users will be taken to a Detail View of the “Data Center”. Please refer to this sample (Use it as reference only, DO NOT Copy this - we need you to create new graphics)
- The first interactive graphic of a 3D data center is exactly the concept we are looking for across the site.
- Unlike the graphic from the example, we are looking to capture the interior and exterior of the data center.
- Interior view would be similar information from the sample graphic
- Exterior view might include things like security guard, authentication to enter the building, fuel tanks outside, etc.
- Security controls that we will need to represent on the Data Center:
- - Physical Access to the Data Center.
- - Video surveillance and intrusion detection systems.
- - All entrances to data center.
- - Automatic Fire Detection.
- - Generators to provide backup power for the entire facility in case of electricity failure.
- - Onsite fuel tanks for extra support in case of long term failures.
- We would like to see is an icon where users can download a PDF or Resume with all the information of the data center. So please include one on your design.
3) Graphic 3: Systems Development Life Cycle (SDLC) of our services
User Experience:
After the user explores the Data Center they decide to go even deeper into the cloud to see how our services (that process customer data on the servers in the data center) are designed and operate.
Details:
Cloud storage company maintains a systematic approach to planning and developing new services for our customers, to ensure the quality and security requirements are met with each release. Our strategy for the design and development of services is to clearly define services in terms of customer use cases, service performance, production and testing, and legal and regulatory requirements to ensure appropriate security controls are incorporated into the application design.
This graphic represents the steps/cycle from the very beginning of developing a new service to when it is considered ready and secure enough to run and process data. We want customers to learn what we do to make sure that our services are designed and developed in a secure manner and undergo rigorous review prior to processing their data.
Service reviews are completed as part of the development process. Prior to services launch, each of the following steps must be completed:
1. Security Risk Assessment
2. Threat modeling
3. Security design reviews
4. Secure code reviews
5. Security testing
6. Vulnerability scanning
7. Penetration testing
- The user could potentially click on Data Servers to see these Services (software helping to run and process the data)
- We want to represent the steps/cycle of the service reviews
- This could be similar to an infographic that visually captures or checks off each of these steps.
4) Graphic 4: Configuration Management
User Experience:
Now the user gets to go even deeper into the operations of the cloud to see how once a service is launched, what the process is every time before a production change is made:
Details:
Change management is the process of reviewing, planning, coordinating, executing, and monitoring changes that affect the IT service delivery environment. Following thorough and consistent change management procedures is necessary to avoid not only critically impacting our internal systems and services, but more importantly, the environment and data of our customers. The process that takes place before a change is migrated to the production environment can be categorized into five key areas: writing the code, review, test, approval, and deployment. Service teams use a tool to facilitate each step in the process, from check-in to production, to achieve secure change management:
1. Code Management
- To request a code review, receive feedback, and collaborate prior to finalizing a code that is ready to ship.
2. Change Management Tool:
- As part of the change management process, a detailed description of the change should be created, submitted, reviewed, and approved.
3. Continuous Deployment Tool:
Continuous deployment is a methodology where every change is automatically built, tested, and pushed to production, with the goal of eliminating as many manual steps as possible. Continuous deployment seeks to eliminate the manual nature of this process and automate each step, allowing service teams to standardize the process and increase the efficiency with which they deploy code. In continuous deployment, an entire release process is a "pipeline" containing "stages”.
- This graphic is showing when a change is made, particularly what the steps are in the process before the change is actually made to ensure it is a safe change that doesn't have a malicious impact on customer data.
- If a user clicks on any “Services cycles” can learn more about the process, when a change is made and also learn about the different management and deployment tools.
~
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
- Focus on the user experience! Focus on the navigation experience. Keeping consistent visual elements - from graph 1 to graph 4 across all zoom levels.
Screen Sizes:
- Design for a web application
- Specific screen sizes: 1280px x 1024px or 2560px x 2048px if you work on a retina display.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Branding/Colors
- We have created an Invision Board with the color palette, fonts and inspiration images:
- https://projects.invisionapp.com/boards/7H34TB96UXTWA/
(Let us know if you are having issues to access this board).
- For logo use a placeholder for now.
Target Audience:
- Potential customers, legal and compliance teams, and business decision makers.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a 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.