Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the Topcoder "Learning Series - Design Login and Dashboard Screens for Mobile" challenge. In this challenge, we want you to perform design practice by watching a video tutorial that we provided and re-create the login and dashboard screens for mobile devices using Adobe XD or Sketch as the design tools (select one of these tools). We also want you to get familiar with our challenge process by register to the challenge, ask questions in the forum, requesting a marvel app project, and submitting in the challenge. Our Design Copilot will help you through the process in the challenge forum, so don't hesitate to ask anything there!

This challenge open for all members, either new members that just joined the Topcoder community or existing members that want to try the design track and improve their design skill.

We have 5 $25 cash prizes to award to the first time submitters in the design track, who complete the video tutorial and pass the screening phase. If there are more than 5 members who meet the above criteria, the submissions with the best quality and innovation will be chosen.

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!
PROJECT DESCRIPTION
  • The "Learning Series" is a brand new Topcoder program that has a goal to help members to be successful in Topcoder Design track by learning about UI/UX design via videos or article tutorials created by our top best designer members

CHALLENGE GOALS
  • Learn about UI/UX Design Process
  • Able to use Design Tools 
  • Familiar with Topcoder Challenge Process

DESIGN CONSIDERATION
  • Design Consistency with the learning resource (videos or Articles)
  • Best Practice for Mobile Screen

CHALLENGE FORUM
LEARNING REQUIREMENTS

1) Choose Design Tools
2) Watch the Video
  • Once you have decided which tools you want to learn, the next step is to watch the videos:
  • Please note the content inside each video actually the same, the differences only on the design tools that we used in the videos (one using XD, the other using Sketch)
  • Each video has the same steps for the UI/UX process, which are:
    • Sketching Rough Concept/Ideas
    • Explore Design References
    • Define Color Themes
    • Apply Simple Layout
    • Manage the Layer Organizations
    • Arrange the Visual Hierarchy
    • Apply Aesthetics 

3) Re-Create Mobile Screens
  • After watching the video, we want you to open the design tool and try to re-create the Login and Dashboard Screens
  • Follow the step by step provided in the video carefully from the beginning, and build your first login and dashboard mobile screens

4) Register to the Challenge
  • Once you are done with the design, please register to the challenge and send your design attempt to us so we can review and provide feedback to you
  • Make sure to register within the registration phase. This challenge has 2 weeks' registration and submission phase (Start on "8 April 2020 10 PM EST" and ends on "22 April 2020 10 PM EST").
  • You can see the deadline from this challenge page, there is a link called 'Show Deadlines' at the above of this page, click that link and see the 'Registration' deadline time there, it's very important to make sure yourself registered before that date and time arrived. 

5) Ask Questions in Forum
  • If you're having any problem understanding the video tutorial or got any questions about this learning series challenge, make sure to address your questions in the challenge forum.
  • Once you are successfully registered to the challenge, you will be able to see a link called 'Challenge Forum' at the top area of the page, click that link and you will be redirected to the challenge forum, ask any questions there, don't hesitate at all!

6) Request the Marvel App Project
  • In all UI Design challenge related at Topcoder, you will need to request a Marvel Project/Prototype to the Design Copilot
  • In the Marvel Project/Prototype, you will need to upload your JPG/PNG screen design to Marvel so the client can review and provide feedback to your design online
  • There are various ways of requesting Marvel project, but the most common way to do this will be by asking it in the challenge forum thread that already being prepared by the Design Copilot

7) Submit Your Design to Challenge Page
  • This is the most important/crucial moment when participating in a Topcoder challenge
  • You will need to submit all complete design deliverables to the challenge before the challenge deadline come
  • Prepare zip files contains 3 items in it:
    • Declaration.txt file 
    • Submission folder
    • Source folder  
  • More information about how to submit in a challenge can be found from this LINK
  • Failure to submit before challenge deadline come will make your design cannot be accepted/acknowledged and cannot be sent to the client for review

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 in the forum 
  • You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link and share it with your notes/comment this link while you upload)
 
BRANDING GUIDELINES
  • Follow the Videos Tutorial

TARGET DEVICES
  • iPhone 6/7/8: 750px x 1334px (Height can be adjusted)

TARGET AUDIENCE
  • Topcoder Members

JUDGING CRITERIA
  • Your submission will be judged on the following criteria:
    • Complete Design Submission Deliverables (Submission Folder, Source Files Folder, Declaration Files)
    • The Overall design and user experience
    • How well your design attempt to create login and dashboard screen
 
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 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.

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

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

  • Sketch
  • Adobe XD

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30121979