Challenge Overview
Project Overview
Welcome to "EMC - Skills Refinement Portal UI Prototype Challenge". The goal of this challenge is to create a responsive HTML5 Prototype application based on provided storyboards and clickable wireframes for Skills Refinement Portal. The prototype must follow our standards and our guidelines. Please see more details below.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure out all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application is using Bootstrap (http://getbootstrap.com/) for the responsive framework.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview
The purpose of this application is to give our employees the ability to identify and move into a future career path within the company. It also gives management insight into what areas of the company need the most growth and who are the best employees that fit into those positions in the company.
The main task of this competition is to develop a responsive HTML5 prototype based on the provided storyboard designs and clickable wireframe. Your prototype must work properly in all the required browsers.
Page Requirements
General Requirements
- Focus on overall Bootstrap/great code structure.
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- This new Portal will be a responsive HTML5 application - it will need to be scalable for different devices (mobile devices, tablets, and desktops), but for now, focus only on Desktop version.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Provide hover condition for all buttons and links.
01. Landing Page
- Screen References "02 landing.png"
- This screen will become default page when user open the apps.
- This page will show summary information related to the portal activity and user activity in this page
- This page will use parallax approach and the information flow will be split into several sections:
---- Overview (carousel section needs to works and show different slides -- Intro and Welcome/ Purpose of the Portal, Slides that highlight the key strategic areas 1. Big Data, 2. Cloud, and 3. Trust w/ CTA's of "EXPLORE" for each)
---- How it Works (showing the flow of the apps from left (profile review) to the right (Monitor status))
---- Strategic Focus Area
---- Workgroups
---- Skills and Offerings (Make sure all selectbox there have same content like wireframes)
02. Dashboard Page
- Screen References "02_01 dashboard.png"
- This page will show summary information about user activity in the apps
- Show all roles that being applied by the user and it's status.
- Each application will have 3 states, "waiting for approval", "rejected", and "approved"
- Each application list got accordion features that can opened (check rejected roles)
- Each application list will have it's own information about the application status progress
- New Message should works, create modal window to send a message to a person responsible for the roles application (check wf).
- Right sidebar will have 3 different contents, your profile box, my saved roles and roles suggestion provided by the apps
03. Profile Page
- Screen References "01 profile.png", "01_01 profile.png", "01_02 profile.png", "01_03 profile.png", "01_04 profile.png", "01_05 profile.png"
- User will be able to see their public profile along with any skills, achievements, and other related works information belong to them.
- User will be able to update their profile and put new skills or other information in their profile page. Make sure to provide these interactions (add, edit, delete new items)
- Accordions features needs to be works and by default, not section opened.
- Clicking "Edit" link in each accordion list will give user ability to edit the content inside it.
- Special for Education Details, when user click "Edit" button, it should trigger red popup window (01_02 profile.png) because the content only editable from other apps.
- For other "Edit" links, follow "01_03 profile.png" and "01_04 profile.png" to simulate the edit functionality.
- Clicking "View" all will bring user to "01_05 profile.png"
- User will be able to see details of each information in modal window (click any list in the skills to get specific info about the skill details)
04. Explore Page
- Screen references "03 explore.png", "03_01 explore.png", "03_02 explore.png", "03_03 explore.png", "03_04 explore.png".
- User will be able to navigate to this page from dashboard or from main navigation
- This screen should listing all position roles in the company so user can explore the position whether it's open or close
- This page will be used to help current employee identify what new career paths or areas are available to them and which ones would be best suited for them based on the skills and experience
- So, in this screen, we're gonna need some interactions where user can choose one or multiple roles/job position and compares them in order to find the best roles for user careers path.
- Follow interactions from storyboard for find and select roles.
05. Explore Comparison Page
- Screen references "04 explore_comparison.png"
- Once user finish select all roles that they interested to check from explore page, they can click "Compare Roles" button to see the comparison between each roles selected by the user with current user roles in the company.
- Provide details of the job description, responsibility, and education requirements related to the roles/job.
- All skills requirements needed for each selected role(s) will be compare with user’s skills
- When the user’s rating for a skill is equal to or greater than the rating of the selected role skills, the selected role skill will be marked in green and use check mark icon.
- When the user’s rating for a skill is less than the rating of the selected role skills, the selected role skill will be marked in with a yellow triangle icon.
- When the user does not have a skill that is required of the selected roles, the unmatched skill will be marked in red and use 'x' icon.
- There should be some links that guide/redirect the user to update their profile data if the position not matched with their skills.
- User can save their roles comparison or email the comparison result to their email or print the comparison result.
06. Apply Page
- Screen references "05 apply.png", "05_01 apply.png"
- Provide some links to FAQs or a small FAQ section in the Right Column with a link to view the full FAQ section/ page.
- The user can get to this page from the Dashboard, Explore, or a Role Comparison pages by selecting the Apply button.
- The storyboard Applies for the Business Analyst role.
- Once landed in this page, we need user to be able find an Instructions/Overview section at the top explaining the process that will occur if user Applies
- This page will show the job details information along with skills requires and user current skills.
- User needs to be able to attach their resume and provide some justification text about why they fit for this role.
- This screen carries forward the skills comparison of the user’s profile with that of the selected role. User can only apply to one role at a time since they may put in different justification text or modify their resume to meet the needs of the selected role.
- Needs to have some error confirmation if user not filled in the required form
- Once user click submit, there should be some notification so user know the application has successfully submitted and currently waiting for any response from higher authority.
07. Message Page
- Screen References "06 message.png", "06_01 message.png", "06_02 message.png"
- Look at adding some kind of Folder management feature, similar to how an email reader/ app or Gmail works.
- Needs some features to create new email and reply email from Inbox, etc.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- Bootstrap responsive framework (http://getbootstrap.com/)
- You are allowed to use JQuery for this contest.
Browsers Requirements:
- Latest FF, Safari and Chrome Browsers.
- IE9++
Documentation Provided:
- Storyboard Screens and PSD files.
- Clickable wireframe (https://projects.invisionapp.com/boards/3XAB0HJ6AEBW/, zip files can be downloaded from this page).
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.