EMC - Skills Refinement Portal Storyboard Design Challenge

Welcome to the "EMC - Skills Refinement Portal Storyboard Design Challenge". 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. 

This challenge goal is to create the look and feel for the apps. Looking forward to seeing your design. Please register and join the fun!!

 

Round 1

01. User Profile Page
02. Landing Page/Dashboard
03. Explore Page
04. Explore Role Comparison Page

 

Round 2

01. User Profile Page
02. Landing Page/Dashboard
03. Explore Page
04. Explore Role Comparison Page
05. Apply Page
06. Application Initiation Page
07. Email Sample Page

Background/ Overview:
- The Skills Refinement Portal will be divided into 2 main areas, Explore and Apply. 
- "Explore" 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. 
- "Apply" will help guide them and walk them through the process to transition to that new career area. 
- The portal also allows the managers and program directors to identify what areas of the company need the most growth and which employees would be a good fit to move into those roles.

Notes:
- This application will be developed under web platform and will be create as responsive apps, please consider this when design your storyboard.
- Suggest best practice UI/UX solution that capture all required functionality as stated below.
- The more details your incorporate in your design will greatly help us to understand the application flow

Branding Guideline:
Branding is open for this challenge, but we have given you some suggestions to get you started. Branding guidelines, wireframes and inspiration can be found here: https://projects.invisionapp.com/boards/3XAB0HJ6AEBW/

Screen Sizes:
- Desktop Resolution: Width 1280px with height adjusting accordingly
- Make sure you are using vector shapes and Smart Objects where applicable to maintain sharpness in your graphics. Ultimately we will be using responsive design for this so you’ll want to use best practices for responsive design.
- Use the Wireframes as your guide for layouts. We DO NOT want you to simply color in the wireframes. Show the BEST UI and designs for this application.

Screen Requirements
These screens and the number of them is just mapping to the current experience of the site. You DO NOT need to keep this same user flow and number of screens. If you see opportunities to improve upon the flow and make the experience more user friendly please do. We are interested in seeing your ideas on the best UI and UX.

01. User Profile Page
- Wireframe reference "User Profile"
- User will using SSO to login to the apps (automatically - out of scope)
- Use Profile-v3.xlsx and the wireframes as content for this screen
- 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)
- 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)
- There will be a lot of personal data content in this page, how to manage it and structured the information in aesthetic and hierarchy ways (good UI/UX approach)?
- Some basic user data needs to be provide in this screen such as :
* Personal Biography user
* Education details
* Disciplines
* Workgroup
* Certifications
* External Training
* Skills 
* Accomplishments
* "Profile-v3.xlsx" docs also can be use as data parameter that needs to be shown in this screen
- The current wireframes provides a lot of links to help user understand all features available in this screen, how can we minimize it and yet still provide the best way to hel guide user?

02. Landing Page/Dashboard
- Wireframe reference "Landing Page"
- Dashboard of the application.
- This screen will become default page when user open the apps.
- Show summary information related to the portal activity and user activity in this page
- There should be two features that become highligt in this screen, "Explore" and "Apply"
- There should be some notification area in this screen that can notify user about latest news, email, etc.
- The top carousel is meant to have a few 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
- Explore and show us the best UI/UX for the application dashboard based on any activity in the apps.

03. Explore Page
- Wireframe reference "Explore"
- 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. 
- Some feature interactions needs to be create like "browse all roles", "history", and "recommendation roles"

Browse All roles (Dynamic Filter)    
- Layout area where user can browse and go through to all roles in the company
- Split the information for all roles to three major category : Cloud, Trust, and Big Data
- There will be more sub-category for each main category, for ex, Big Data will have sub-category such as "Transformation", "Applications", "Infrastructure", "Program Management", "GTM Support".
- And more content for each sub-category also will be available, for ex, in each BIG Data sub category there are more content in it (check wireframes)
- User can drilled down roles position content in this screen to find the all roles in the company. 
- How do we manage these roles category >> 2nd sub category >> 3rd sub category >> etc hierarchy data? Filter? tree approach? show us the best UI/UX solution.
- User can select any roles in this screen, they can select multiple/many roles that they think suitable for their future career.
- The main content area can be a list of all of the available roles with Strategic Area, Workgroups and Disciplines being your "Filters" that refine the list of roles below.
- Make sure this remain really clean and streamlined. Use tooltip icons and flyouts to add additional explanation or descriptions to areas (for example: Big Data, Cloud and Trust)
- Make sure you still have a "Compare Selected Roles" CTA, this can be more prominent and "active" once the user selects a role from the list.

History 
- Needs some way for user to go through their history session in this screen (saved roles, recently explored roles, etc) so they don't need to start from beginning when return to this apps.

Roles Recommendations
- This screen also will provide some roles recommendation that match for the user future careers (apps will compare the roles requirements with user profile). 

04. Explore Role Comparison Page
- Wireframe reference "Explore Role Comparison Compare"
- After select all roles that the user interested to explore, the apps will compares each roles with user profile to find out whether the roles match for them or not
- Needs an easy and quick way where user can select another roles to compares after finish with their current roles compare selection 
- The current wireframes only able to compare one roles with current roles position that the user owned, can we expand it so user can compares multiple roles at once?
- Provide details of the job description, responsibility, and any other information (salary, tax, etc) related to the roles/job. 
- All skills requirements needed for each roles position will be compare with user skills
- Any matched skills between the user and roles position will be marked in green or use check mark icon.
- Any unmatched skills between the user and roles position will be marked in red or 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.
- If the position matched their skills, there should be a navigation that can bring them to Apply process. 
- User can save their roles comparison or email the comparison result to their email or print the comparison result.

05. Apply Page
- Wireframe reference "Apply"
- Provide some links to FAQs or a small FAQ section in the Right Column with a link to view the full FAQ section/ page.
- This screen should listed any status of roles/job position that being applied by the user (submitted/accepted/rejected/etc)
- The apps also will provided some additional features like saved roles (from explore page) and roles recommendation for the user
- Clicking the title in each role list will trigger modal window for email reply from 

06. Application Initiation Page
- Wireframe reference "Application Initiation"
- 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 filled in their resume and provide some justification text about why they fit for this roles.
- Needs some way where user can compares the roles skills requirements with user own skills.
- 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. Email Sample Page
- Wireframe reference "Messages"
- Look at adding some kind of Folder management feature, similar to how an email reader/ app or Gmail works.
- Inbox, Outbox, Draft, Trash, etc. Maybe this functionality is placed into a left column and designed like a traditional email reader/ client.
- Make sure to provide some scre

Documentation:
- We’ve created a design direction site to get your started. Within this site are branding suggestions, downloads for the wireframes and inspiration. Hopefully you will find this useful: https://projects.invisionapp.com/boards/3XAB0HJ6AEBW/
- Wireframes: Clickable HTML that explains the current flow of the app.

Target Audience
- The target audience for this application will be internal employees and manager in our company (professional, motivated, talented people).

Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users.

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 for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.