Challenge Summary
Welcome to the Hercules Quantum X2 Storyboard Design Contest Part I REPOST.
We want improve our existing design for Hercules Quantum application, in this contest we need you get us the updated looks and functions of some pages by follow our provided requirements. The application design must be clean and professional, easy-to-use where a user can navigate and use the features easily.
This application need developed into wide range platform: desktop, tablet and mobile devices.
This is the 1st series contest of Hercules Quantum, there will be more design contest to get complete looks of Quantum X2 design. So, join now!
Round 1
Initial Design of Hercules Quantum X2 Storyboard Design Contest Part I:
1. Saved :: Navigation :: Mobile
2. Recent Page
3. Recent :: Tablet :: Asset Details & Actions
4. Recent :: Phone
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Complete Design of Hercules Quantum X2 Storyboard Design Contest Part I:
1. Saved :: Navigation :: Mobile
2. Recent Page
3. Recent :: Tablet :: Asset Details & Actions
4. Recent :: Phone
5. Recent :: Empty State
6. Recent :: Empty Row
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Design Consideration:
- This application will be developed on Desktop/Mobile and Tablet devices (HTML5).
- Make sure all elements are designed to have a fluid layout, so it will support landscape and portrait layout.
- We already created X2 theme design and functions in another section of Quantum application. We need you re-use/copy existing style/theme and functions on required pages explains below instead of created from scratch. Please check attached Quantum-X2-Theme.zip
- FYI: Navigation on X2 theme need scrolled from left to right by tap or click arrow button via keyboard. Make sure you reuse and follow existing function/design.
- Design theme need use "Flat Design Theme". Take a look this reference link.
- You need just submit "iPad" and "iPhone" format on landscape and portrait layout for submission format. Another versions will be tasks for contest winner.
- We provide X2_Saved_MobilePhase1_005.pdf as wireframe layout from client to help design our expected Quantum X2 design format.
- For filename format, you need add device name in front of filename, for example, "iPad-Portrait-recent.png", "iPhone-Retina-Landscape-recent.png", and so on.
- Format your submissions like this structures:
Desktop (1280 x 800)
- portrait
- landscape
- source
iPad (1024 x 768)
- portrait
- landscape
- source
iPhone (320 x 480)
- portrait
- landscape
- source
iPhone Retina (640 x 960)
- portrait
- landscape
- source
Design Problem:
Notes:
- Information below only introductions to guide you design the pages. Please read more details design problem on attached X2_Saved_MobilePhase1_005.pdf
- There's some metadata need captured from wireframe. Please re-use data/information from attached Quantum-X2-Current-Screenshots.zip
1. Saved :: Navigation :: Mobile
X2_Saved_MobilePhase1_005.pdf / page 7
- Those page show design structure of navigation when viewed on tablet and mobile devices.
- Remember to keep this when you design mobile and tablet view.
- You need make sure your design captured these informations: "Show current position", "Stickiness", "Passive alert about upcoming schedule conflicts" and "View controls when drilling down into a subnav item"
2. Recent Page
X2_Saved_MobilePhase1_005.pdf / page 8 and page 9
- This Recent page purpose: Help users stay on top of what they want to watch by highlighting where they left off, making them aware of new stuff, and reminding them about things that may go away.
- Check how layout for Recent page should created
- Content divided into these priority below: (How your design explains them?)
a. Just Recorded:
Recent :: Rules for Just Recorded Row
X2_Saved_MobilePhase1_005.pdf / page 10
- This page show some possibility of Just Recorderd row.
- Need indicator to show current recording progress.
- You need create separate screens show those conditions like explains on the left image.
- Make sure capture required informations in your design
b. Continue
Recent :: Rules for Continue Row
X2_Saved_MobilePhase1_005.pdf / page 11
- This page show some possibility of Continue row.
- Need indicator to show current recording progress.
- Make sure capture required informations in your design
c. Leaving Soon
Recent :: History is Off (TBD)
X2_Saved_MobilePhase1_005.pdf / page 12
- This page show some possibility of Leaving Soon row.
- If the user has turned off history in their settings, only a couple of rows are visible.
- The user should also see a message that informs them that if they turned history on, they would be able to see the other 2 sections and the value those sections bring.
- This row need show Just Saved and Ending Soon
- Capture required informations in your design
3. Recent :: Tablet :: Asset Details & Actions
X2_Saved_MobilePhase1_005.pdf / page 13
- This page explains about how tablet layout/function should designed.
- Notice the effect when selected the poster image resized more bigger. and show some information below it
- Each poster image size need in 240 x 320 px. Need to be consistent in all tablet screens
- For Metadata please re-use data/information from attached Quantum-X2-Current-Screenshots.zip
4. Recent :: Phone
X2_Saved_MobilePhase1_005.pdf / page 14
- This page explains about how iPhone layout/function should designed.
- Notice the effect when selected the poster image resized more bigger. and show some information below it
- Each poster image size need in 120 x 160 px.
- For Metadata please re-use data/information from attached Quantum-X2-Current-Screenshots.zip
5. Recent :: Empty State
X2_Saved_MobilePhase1_005.pdf / page 15
- Need design if user does not have any recently recorded programs
- Create some of the conditional information need displayed
6. Recent :: Empty Row
X2_Saved_MobilePhase1_005.pdf / page 16
- How design looks if there's some empty poster image on screen
Branding Guideline
- Design theme match with Quantum-X2-Theme.7z
Target Audience
- Hercules Existing Consumer
- Hercules Potential Consumer
Judging Criteria
- Cleanliness of page layout and all UI elements in every page.
- Boost user Experience of the application.
- Responsive Web Design solution on Desktop/Tablet/Mobile device
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 any source graphics you created in Adobe Illustrator and saved as 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.
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.