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!
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.)
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.)
Screen Requirements
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.)
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?
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
- 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).
Documentation
Please ask in forum for access to documentation
- Branding Guidelines Document
- SDK 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.
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.