Challenge Summary
Welcome to EMP Panels Storyboards Design Contest. You are required to design the look and feel of a business web application, dashboard style. We are providing visual guidelines for you to design seven (7) unique pages and a few tweaks to complete others. Best of lucks!
Round 1
For your R1 deliverables please submit the following screens:
1) Project Dashboard
2) Project Management View
3) Project Dialogs (edit view only)
4) Current Environment Dashboard
Round 2
Final design will contain all the requested screens plus any updates from client feedback.
1) Project Dashboard
2) Project Management View
3) Project Dialogs
4) Current Environment Dashboard (Arrays View)
5) Event Windows Dashboard
6) Event Windows Management
7) Event Dialogs
The primary goal of this contest is to design the look and feel of a web application which has very defined guidelines and the look is dashboard oriented, for business purposes. We are trying to provide a simple interface to a complicated tool. Our users need to be gently pushed to particular flows through the application so they don’t get overwhelmed by the total number of choices available to them.
EMP is a migration planning application that's used to streamline the planning process for data migrations onto storage arrays. It's currently implemented as a stand-alone single user desktop installed Windows application, but is in the process of being ported a web application. The goal of this project is to replace the existing EMP UI with a web UI. So, for this contest, you will be designing the first phase of the Web UI transition.
Branding and Guidelines
- EMPWireframes.zip contains the application mockups for you to work with as layout reference.
- FunctionalSpecifications.pdf is a compliment to the wireframes. It describes very detailed functionality about each page, with extra information tables (you won’t probably use) about every field in the forms gand UI. Ignore “Import Assets View Functional Specification” and “Symmetrix SYMAPI Import Form” sections.
- ECUEv3.pdf contains strict guidelines you need to follow through in order to provide the business corporate identity, such as colors, graphics, tabs, icons, navigation, alerts, UI elements, and so on. See Inspiration.jpg for INSPIRATION ONLY, not copying anything, it has samples of an application designed under certain ECUE graphic standards.
- Icons.zip is a compliment to the PDF guidelines. You need to use these graphics for creating the UI, as much as you can to follow the guidelines. In case you need to design something new that is not in this set please follow the same style.
- Use a logo placeholder for the application.
- Screen resolution width should work fine at 1000 pixels. Since this is a dashboard style UI it should adjust to any possible width, larger or lower than 1000 pixels; but the minimum amount to be supported is 1000 pixels. Read more at “Screen Resolution” in FunctionalSpecifications.pdf.
- Use web-safe fonts for the pages content. Declare your fonts according to the Studio font’s policies.
- Show all the hover states for all the UI elements you create (buttons, hyperlinks, dropdowns, etc).
Storyboard Requirements
1) Project Dashboard
- Implement 1_1_mockup_Project Dashboard from wireframes.
- Task bar on the right should be collapsible/expandable.
- Notice this should be enclosed (as all the application) in the global application frame (0_mockup_Main Application Frame).
2) Project Management View
- Implement 2_mockup_Projects Manage View from wireframes.
3) Project Dialogs
- Implement New and Edit dialog windows views; 3_1_mockup_New Project Detail View and 3_2_mockup_Edit Project Detail View from wireframes.
4) Current Environment Dashboard
- Implement 4_mockup_Current Environment Dashboard from wireframes.
- Task bar on the right should be collapsible/expandable.
5) Event Windows Dashboard
- Implement 5_1_mockup_Event Window Dashboard from wireframes.
- Task bar on the right should be collapsible/expandable.
6) Event Windows Management
- Implement 6_mockup_Event Windows Manage View from wireframes.
7) Event Dialogs
- Implement New and Edit dialog windows views; 7_1_mockup_New Event Window Detail View and 7_2_mockup_Edit Event Window Detail View from wireframes.
Target Audience
Our users are highly specialized technical users responsible for configuring EMC products and planning migrations.
Judging Criteria
- Consistency with the provided guidelines reference.
- Quality.
- User Exeperience.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.