BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$50‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "360DIAL - Menu Navigation Component Design Challenge". In this challenge, we are looking for your help to redesign and create the best UI/UX for our 360 Dial Menu navigation that able to support two-level depth of submenu navigation, responsive in all required devices, and easy to customize so we can re-use it on other applications. 
  
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial design for a Checkpoint Feedback
  • As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt. 
  • Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
  • As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
  • Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

BACKGROUND OVERVIEW
  • We are in need to redesign our 360 Dial Navigation menu
  • We already have a design for this, but resizing is not responsive enough at this time
  • We want it better integrated into Angular for UI component, what is available today is rough

CHALLENGE GOAL
  • Create a new UI/UX for our 360 Dial Navigation that able to cover two sub-level depth navigation, responsive in all required devices, and easy to customize

DESIGN CONSIDERATION
  • Elegant design enabling the features to be able to extend or implemented
  • Rich and Appealing Design that able to show clear interaction and information to the user
  • Simplicity for the user to navigate from main to all child and grandchild sub-menus
  • This 360 DIAL navigation will be developed using Angular 6 and above
  • Must be extremely user-friendly and intuitive, the user should never ask "what do I do next?"
  • Best Practice for Responsive Web
  • Easy to understand

CHALLENGE FORUM
360DIAL MENU NAVIGATION FEATURE REQUIREMENTS
  • Please see our existing 360Dial menu navigation from this image link
  • We need to create a new elegant UI/UX for the 360 DIAL menu navigation. We are very much like the layout positioning and hierarchy but intrigue on how we can improve this kind of navigation to the next level. If you have a better idea to arrange this kind of navigation, feel free to propose it to us!
  • This menu will be used by various applications like banking, etc
  • Provide new design for the default state (shown in figure 1) and the main menu (shown in figure 2)
  • In terms of menus navigation, let’s provide it in the center of the screen for now (fixed positioning) so we can show all the expanded menus (main menus and two-level depth of sub-level navigation)
  • Needs to provide design for sub-level navigation, at least it needs to support two sub-level navigation:
    • main menu 
      • secondary sub-menu (child menu) 
        • tertiary sub-menu (grandchild menu)
  • Ability/Options to customize the navigation design item elements such as number of menu items, colors, icons, and font (provide some design variation where it shows different colors, font, style, etc to the menu navigation)
  • Needs to be responsive for web, tablet, and mobile (design can be adjustable to ensure it fits with the device's screen)
  • Please use the following sample for the menu items (main menu, secondary sub-menu, and tertiary sub menu)
  • Needs to provide some interaction screen that shows visual appeal and smooth transition of dialing in and out, there are 3 state needs to cover:
    • when main menu and sub-menu are expanded
    • when main menu and sub-menu are collapses
    • when navigation item is clicked
  • Please use the following content for the Menu items:
    • Profile
    • Events
      • Risk
        • Risk 1
        • Risk 2
      • Life-Cycle
      • Approval
    • News
      • Internal
      • External
      • Social Network
    • Credits
    • Exposure

IMPORTANT:
  • Keep things consistent. This means all graphics styles should work together.
  • All of the graphics should have a similar feel and general aesthetic appearance
 
MARVEL PROTOTYPE
  • We need you to upload your screens to Marvel App
  • Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot) 
  • You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
 
BRANDING GUIDELINES
  • Open to Designers (Font, Colors, Style)

DOCUMENTATION
  • 360DIAL.jpg (existing design, use it as a reference only, show us your best idea for this!)

TARGET DEVICE
  • Responsive Web, including:
    • Web/Desktop: 1366px width with Height adjusted accordingly
    • Mobile: 750px width with Height adjusted accordingly
    • Tablet: 1536px width with Height adjusted accordingly 

TARGET AUDIENCES
  • Internal User

JUDGING CRITERIA
  • Your submission will be judged on the following criteria:
    • Overall idea and execution of concepts
    • How well does your design align with the objectives of the challenge
    • Execution and thoughtfulness put into solving the problem
    • Marvel clickable interactions!
    • The overall design and user experience
    • Cleanliness of screen design and user flow
    • Ease of use
 
SUBMISSION AND 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 image files based on Challenge submission requirements stated above
  • MarvelApp link for review and to provide feedback
 
Source Files
  • All source files of all graphics created in either Adobe XD, Photoshop, or Sketch and saved as an editable layer
 
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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • Sketch
  • XD

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30100114