Challenge Summary
Welcome to “Mnemosyne – Array Layout Design Challenge”. This challenge purpose is to create storyboard layout for our client web application that will be use to display and manage information from disks in a storage array.
In this challenge, we need your creative ideas to create the UI/UX design for our array layout, this array layout will display storage information and the application user will be able to select and drag and drop parts of the layout to perform specific configuration tasks.
At the end of this challenge, we’re looking for an easy to use UI/UX storyboard layout that able to accommodates our requirements and can be use as an input for the next development. Join us now!
Round 1
Array and LUNs Screen Requirements for client review.
Round 2
All Requirements as stated in challenge details with client feedback applied.
The goal of this challenge to to design UI/UX Array Layout, which displays information about the disks in a storage array. It will be used in a web application that allows users to plan and configure a new array. The Array Layout will display information about the storage array's model, enclosures, slots, disks, and storage pools. Users will be able to select and drag and drop parts of the layout to perform specific configuration tasks.
It will appear in the main content section of the browser window, sometimes the full section, sometimes in a split view with the Array Layout in the top portion and a table with related data in the bottom half. It may also appear by itself in a print-friendly view. Please read more details below for our screen requirements.
Branding Guidelines
1. General Application guidelines is documented in ECUEv3.zip.
2. As your design base, please use "06-Current-Environment-Dashboard.png" attached in ECUE_SampleApp.zip (source file is "2-Current Environment Dashboard.psd")
Screen Requirements
General Design Requirements :
- Follow ECUE_SampleApp storyboard as base for your design (06-Current-Environment-Dashboard.png), The real application should fit on 1366x768px screens so that the status bar at the bottom is always visible. It can use horizontal and vertical scrolling within the tab as needed.
- Replace the tab content into the following values : “System, Hardware, Storage, Host Access, and Replication”.
- Create your design under “Storage” tab.
- Inside Storage Tab, Create sub tab contains the following values : “Array layout, Disk Group, Storage Pools, LUNs, LUN Groups, File System, Shares, VM Datastores, FAST Cache”.
- When the entire Array Layout can not be shown in the available space, both vertical and horizontal scroll-bars will be used. When in the split view, the Array Layout top portion should take up 60% of visible area by default, but it should have a user moveable divider to adjust that split.
- Create screens for Array Layout, Storage Pools and LUNs like mentioned below :
Array Layout Page
- This page will use the whole main content area for showing the information.
- Provide us a base design how the arrays layout will looks like by default (concept design can be found in page 6 and 7 in VNXE-ArrayLayoutDesignandPrototype-190214-2101-86.pdf, please use it as references only, do not copy the layout, show us your creativity!!)
- Show us a design interaction on how the enclosure can be re-ordered. The interaction design required in the screen is drag and drop features, for more details, refer to page 4 from VNXE-ArrayLayoutDesignandPrototype-190214-2101-86.pdf.
- Pay attention to the enclosure arrangement. Each array has one or more enclosures. There is no maximum number of enclosures, but in practice the number of enclosures is limited by the maximum number of supported disks. The enclosures currently supported or expected may have 12, 15, 25, 60, or 120 slots that each hold one disk. Enclosures with up to 25 slots are currently represented as a single row. Enclosures with 60 or 120 disks are represented with rows or "banks" of 12 drives each. A 60 disk enclosure will have 5 banks; a 120 disk enclosure will have 10 banks. For reference, each bank is assigned a letter, starting with "A."
- In sidebar, add the following button : add enclosure, delete enclosure.
- Show us a design interaction on how the drives/slots can be swap/move. More interaction details can be found in page 4 from VNXE-ArrayLayoutDesignandPrototype-190214-2101-86.pdf.
- Show us a design interaction to warn the user when the drag and drop features cannot be done because some limitation, for example, There will be rules to be included around what drive types & sizes are allowed in what slots based on form factor of enclosure and drives, 2.5" drives only fit in 2.5" enclosures.
- The array layout itself is also often shown to customers and included in reports for a less technical audience, so please create additional screen on how the array layout will looks like for print friendly view.
Storage Pools Page
- This page will use split view (60% for top array layout and 40% for the bottom table layout)
- If a Storage Pool is selected :
- moving it to unconfigured disks (disks that aren't assigned to a pool) swaps the pool with the unused disks (note that if pool is 5 consecutive drives, pool must be moved to 5 consecutive disks)
- moving it to disks that are already assigned to a storage pool would only be allowed if the pool was the same layout, and swaps the pool locations.
- Check the screenshot on how the interaction design should be create in page 5 from VNXE-ArrayLayoutDesignandPrototype-190214-2101-86.pdf.
- Show us a design interaction to warn the user when the drag and drop features cannot be done because some limitation, for example, There will be rules to be included around what drive types & sizes are allowed in what slots based on form factor of enclosure and drives, 2.5" drives only fit in 2.5" enclosures.
- In sidebar, create buttons Add storage tools, Edit storage tools, delete storage tools.
- In bottom sidebar, create us help section contains the following content "drag & drop functions, Moving Storage Pools, Moving Disks within Storage Pools".
LUNs Page
- This page will use split view (60% for top array layout and 40% for the bottom table layout).
- Users can highlight one or more LUNs from the bottom split panel drop them onto a storage pool.
- Dropping them onto a pool assigns them to that pool.
- Check the screenshot on how the interaction design should be create in page 5 from VNXE-ArrayLayoutDesignandPrototype-190214-2101-86.pdf.
- In sidebar, create buttons Add LUN, Edit LUN, Delete LUN.
- In bottom sidebar, create us help section contains the following content "drag & drop functions, Moving LUNs, Select LUNs to Move".
IMPORTANT : Please read VNXE-ArrayLayoutDesignandPrototype-190214-2101-86.pdf for getting better knowledge on what kind of interaction design and data should be provided in your design.
Supporting Documents
- ECUE_SampleApp.zip
- ECUEv3.zip
- VNXE-ArrayLayoutDesignandPrototype-190214-2101-86.pdf
Target Audience
- The target audience for the application are technical internal users who are doing the array planning.
Judging Criteria
- Consistency to follow our branding guidelines.
- Quality of your design.
- 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 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.
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 other winning placements.
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.