GUARD - Talent Learning Portal Design Concept Challenge









    The challenge is finished.
    Show Deadlinesicon-arrow-up

    Challenge Summary

    Welcome to "GUARD - Talent Learning Portal Design Concept Challenge". In this challenge, we need your help to create an innovative online learning platform that able to increase all our employee's knowledge. 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!

    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.

    Challenge Format

    This competition will be run as a two-round challenge.

    Round 1

    Submit your initial design for a Checkpoint Feedback (Desktop + Mobile)
    1) Landing Screen (Home)
    3) My Learning Dashboard Screen
    4) Profile Screen
    5) Career Explorer Screen
    6) Learning Recommendations Screen
    9) Material Learning List Screen
    - As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
    - Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

    Round 2

    Submit your Final Design plus Checkpoint Updates (Desktop + Mobile)
    1) Landing Screen (Home)
    2) Login Screen
    3) My Learning Dashboard Screen
    4) Profile Screen
    5) Career Explorer Screen
    6) Learning Recommendations Screen
    7) Notifications & News Screen
    8) Achievement Screen
    9) Material Learning List Screen
    10) Training Detail Screen
    - As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
    - Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

    Regarding the Rounds:

    • To be eligible for Round 1 prizes and design feedback, you must submit before the Checkpoint deadline.
    • A day or two after the Checkpoint deadline, the challenge holder will announce Round 1 winners and provide design feedback to those winners in the “Checkpoints” tab above.
    • You must submit to Round 1 to be eligible to compete in Round 2. If your submission fails screening for a small mistake in Round 1, you may still be eligible to submit to Round 2.
    • Every competitor with a passing Round 1 submission can submit to Round 2, even if they didn't win a Checkpoint prize.
    • Learn more here.

    Full Description & Project Guide

    Background Overview 
    We want to create an innovative online learning platform for all our internal employees. The platform needs to be innovative, intuitive, user-friendly and mobile responsive.
    This new online platform will group the learning materials via 2 ways:
    - By Area (4 Areas): Leadership Training Materials, Management Training Materials, Soft Skill Training Materials and Technical Training Materials (ie. claims, underwriting, IT, etc)
    - By Behavior of our employees:  Focus On Customers, Drive Innovation, Work Collaboratively, Support & Develop People, Provide Clear Direction, Deliver on Promises 
    The platform also needs to customize the interaction with the user based on a friendly communication approach (this should be applied to the notifications & messages the user see when using the platform)
    Challenge Goal
    Provide an innovative, intuitive, user-friendly and mobile responsive landing page & user dashboard for our online Learning
    The new portal must have these requirements:
    - Easy access to relevant learning (organization of the page by functions, intuitive search functionality etc.)
    - The possibility of assigning mandatory training.
    - Complete learning history saved on employee profile
    - Personalized recommendations (based on my profile, in people like me)
    - Improve Engagement for learning activities (apply marketing concepts to do it)
    User Flow
    1# Employees enter landing page.
    - The landing page should show interesting information for the employees. In this point, until the user does not log in the information is "agnostic" (not related to the employee)
    - Login functionality
    2# After login they will access to their private zone. The main page should be a dashboard with all the key information.
    3# They user should have access to:
    - See their learning history
    - Begin new and assigned learning
    - Get recommended learning
    - Access to career path/explorer tools
    - Access to their profile
    Design Considerations
    - Easy to understand flow from page to page, users are guided 
    - Intuitive for the user; should never be left asking "what do I do next?"
    - Simple, clean, modern. 
    - Each page is not overcrowded with information, (but it is obvious where to access more info)
    Design Usability
    - A learning portal, by its very definition, needs to make it easy to access content quickly. A great way to achieve this is to embrace the "like/dislike" feature that is popular on social media sites. 
    - All the messages, recommendations & notifications should be friendly. Remember the portal is an Advisor/Friend for the employees to improve their skills and achieve the career path they have in mind.
    - A single, delightful solution to access and track all learning. Organize content from everywhere and integrate
    - Simple; not too many steps involved in any part
    - Easy to understand the navigation from section to section 
    - Encourages your learners to be independent.
    - Enable learners to curate content that's relevant to them.
    - It provides multiple learning journeys.
    - It allows learners to communicate and connect with other learners and their teachers.
    - It allows learning to take place in all contexts across all devices.
    Target Devices
    Responsive web:
    - Desktop: 1366px width with Height adjusted accordingly
    - Mobile: 750px(w) x 1334px(h)
    Branding Guidelines
    - Ask in Forum for Access to Branding Guidelines 
    - Modern Crisp look and feel adhering to our standards. 
    - We are open to creativity here. Creativity first, SDK and branding guidelines document second! 

    Screen Requirements
    For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
    1) Landing Screen (Home)
    - Show introduction of what this platform all about
    - What benefit can the employee get from this platform
    - Marketing material to make employee that not yet become user become interested to join the platform
    - Testimony from successful learner?
    - Registration form?
    2) Login Screen
    - Ordinary login form (username, password)
    - Simple logo for the app
    - Some marketing or intro regarding sneak peek of what beyond login form
    - Error condition when the wrong credential entered
    3) My Learning Dashboard Screen
    - Dashboard needs to use the career path as a central aspect. 
    - Show list of training material that employee currently joined
    - List of potential/recommendation materials?
    - Provide personalized messages, the idea is the portal becomes an Advisor/Assistant for our employees in the learning journey (ie. providing personalized welcome messages, remainder the platform is missing the employees when he is not doing courses etc)
    - Notification? News? List of Top Learners? etc?
    4) Profile Screen
    - Employee personal info
    - List of online material that already taken
    - Badges and Achievement on the platform
    - Statistic of Learning Progress - How well user doing on the platform per material/time/etc?
    5) Career Explorer Screen (Key Important Screen!!)
    - Provide tools to help the employee to define their ideal career path: ie. "your career path to become the next CIO"
    - Provides an automatic rollout of structured learning plans for each job role 
    - Everything should be around the career path. The learning process should be aligned with the career path and employee goals: short, medium and long-term.
    - The learning should be personalized
    - Profile and the learning process should be gamified
    - Access to the content of all the finalized courses.
    - We are looking for creativity on this specific screen!!
    6) Learning Recommendations Screen
    - Training recommendation should be based on employees with similar profiles or employees that have done a similar career path.
    - Should be aligned with the career path (the idea is that the employee defines the positions he wants to achieve in the next 10 years by using an interactive, lean and simple way: now I am a developer in 10 years I want to be CIO)
    7) Notifications & News Screen
    - To allow managers and portal owners to disseminate important details, provide up to date info and keep the site current
    - Maybe it can be integrated into user dashboard? Or a specific screen? Your call!
    - Might need the admin screen to manage this features?
    8) Achievement Screen
    - Leaderboards – which provide a fun competitive environment to motivate learners
    - Badging – a system for earning and collecting awards
    9) Material Learning List Screen
    - List of all online training material available on the platform
    - Show thumbnail, summary of the material and how long to complete the course 
    10) Training Detail Screen
    - Show details content of training material 
    - List of training Videos, PDF, and other content materials
    - Feedback? Rating Content? Forum? etc?
    - 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
    - You MUST include your Marvel App URL (in your Marvel App prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
    Please ask in forum for access to documentation
    - Branding Guidelines Document 
    - SDK Document
    Target Audience
    Internal Employees
    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 the solving the problem
    - Overall design and user experience
    - Cleanliness of screen design and user flow
    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 image files based on Challenge submission requirements stated above.
    - Marvel App link for review and to provide feedback
    Source Files
    All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as 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.

    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.

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.


    2018 Topcoder(R) Open


    Screening Scorecard


    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 here.


    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 here.

    Questions? ‌Ask in the Challenge Discussion Forums.


    • Layered PSD files created in Adobe Photoshop or similar
    • AI files created in Adobe Illustrator or similar
    • Sketch

    You must include all source files with your submission.