Challenge Summary
Welcome to GE Foundation - Brilliant Career Labs Web Application Design Challenge!
The goal for this challenge is to create the look and feel for the major areas of the app, detailing how you see the user using that path to find out more about a career. This app will be an interactive experience (Digital) to gain soft skills (aka GE Essential Skills) as well as career explorations for digital industrial jobs of the future.
Recently we created wireframes to define the overall framework for the GE Foundation application and you will be provided with the wireframes we built.
Note: Please do not submit a colored version of wireframes as they are just meant to guide you, outline necessary screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your own design style / ideas / solutions during this design challenge.
00 Navigation and Overall Structure
01 Login and Registration
02 Landing Page and Welcome
03 Assessment Module Landing
04 Assessment Module Detail
05 Essential Skills Module Landing
06 Career Exploration Landing
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
00 Navigation and Overall Structure
01 Login and Registration
02 Landing Page and Welcome
03 Assessment Module Landing
04 Assessment Module Detail
05 Essential Skills Module Landing
06 Essential Skills Module Details
07 Career Exploration Landing
08 Career Exploration Details
09 Profile.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Background Information:
As GE relocates their Headquarters to Boston, there is an opportunity for the GE Foundation to partner with the Boston Public Schools (BPS) high school system through its Developing Skills™ Initiative. Developing Skills™ in Boston will empower all Boston Public School high school students to become globally productive citizens by providing access to learning experiences necessary for the workforce of tomorrow.
The GE Foundation will launch the GE Brilliant Career Labs in both physical and virtual form, with the goal of reaching every Boston Public High School student to clearly link the education skills of today with the careers of tomorrow. The GE Brilliant Career Labs will be the first-of-its-kind interactive experience to prepare students for the innovative industrial jobs of the future. The physical and virtual labs will be high-tech places for youth to discover, invent, design, develop and create. The student learning experiences will also be driven by the changing global economy and the needs for a skilled workforce. In essence – we will link a local school district to the global community. The GE Brilliant Career Labs will be high-tech innovation centers dedicated to increasing the students’ STEM awareness about expertise needed in the next generation of the workforce globally. The Labs will be focused on empowering youth through exploration and creativity, while having them see and imagine what’s coming in the future. The Labs are designed for students to explore various career path ways and understand the skills needed for jobs in STEM fields.
This application will incorporate publicly available information with learning modules to teach soft skills and methods needed to stand out from the rest in today’s workforce.
Screen Sizes:
- Desktop Resolution: Design for 1280px width and height as required.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
Branding Guidelines:
- Branding Guidelines (GE Branding.zip).
- Client Logo (GE_foundation_lockup_PMS7455.eps.zip).
- Wireframes (wireframe.zip).
Design Goals:
- The design should follow GE branding guidelines.
- We are looking for the best UI/UX we can achieve.
Required Functionality:
00 Navigation and Overall Structure:
- Come with a navigation that allows users to access different pages of the site
- Please take a look at the “Application Flow” and come up with thoughts on what pages need to laid out.
01 Login and Registration:
- Please refer to login.html
- Allow the user to register with the site (Required details to be captured: Name, Email (username), Password, confirm password, School, and Grade).
- If the student has already registered then provide the ability to login into the application.
- Please show error validation as well.
02 Landing Page and Welcome:
- Please refer to landing_page.html
- Main landing page after a user logs in to the site.
- Welcome message and introduction.
- Overall flow of the sections/ site, outline or overview of the 3 main areas, etc.
- We will also show Badges and Activity Feed widgets.
- This application will have three main areas: Career Interest Assessment, Essential Skills, and Career Exploration.
A. Assessment Module
The Assessment Module is used for career explorations and to assess a student’s career interests. The Assessment Module will utilize a simple questionnaire from the Department of Labor’s O*Net to determine interests of students BEFORE beginning the Essential Skills and/ or Career Exploration Modules. Think of this module as the first pieces of information from a student to assess the best options and guidance for them.
Aim is to make the assessment look as “game-like” as possible to keep the students engaged.
Examples of the type of questions and how users are ranking and assessed can be found at: https://www.onetcenter.org/IP.html
03 Assessment Module Landing:
- Please refer to 01_assesment.html
- Initial landing page for the assessment module.
- Ability to start their assessment questionnaire/ test.
- Progress of their assessment test if they’ve already started, but haven’t completed
- Once assessment test is complete, next steps and information for moving the user to the Essential Skills Module.
04 Assessment Module Detail:
- Please refer to 01-1_assesmen_details.html
- Assessment test flow and overall UX.
- Detailed progress on a test they’ve already started, but haven’t completed.
- Overall score/ results from test.
- Next steps after completing test to move the user to the Essential Skills and/ or Career Exploration modules; you need to answer the questions to get to this view in wireframe.
B. Essential Skills Module:
The Essential Skills Module provides the user with modules in soft skills pertinent to managing yourself in the workplace. The students will receive various points for each activity as described in the attached Essential Skills curriculum. Some questions will give points only for correct answers, others will give points for completion.
The GE Foundation Workplace Skills Program is intended for high school and college-age students. The purpose of the program to provide participants with a comprehensive introduction to the “soft skills,” or what we believe are the critical essential skills, needed to help them make a successful transition from their schooling to the modern day workplace. This program is about expanding your emotional intelligence, learning how to develop positive relationships, and connecting with people so you can become a person everyone wants to work with. This program will help participants acquire and polish their soft skills.
In addition to the assessment module, here are ten modules in the program:
Module 1: Understanding Self
Module 2: Understanding Others
Module 3: Presenting Yourself
Module 4: Navigating the Workplace
Module 5: Teamwork
Module 6: Critical Thinking
Module 7: Interpersonal Communication
Module 8: Having Difficult Conversations
Module 9: Developing Wellbeing in the Workplace
Module 10: Learning to Value Diversity
05 Essential Skills Module Landing:
- Please refer to 02_essentials_skills.html
- This page will act as a dashboard, it shows the list of essential skills modules in the program and what each of the modules assess?
- If the user has already begun working on the modules, then we need to show the progress of each module (overall percentage completed?)
- How will the user know about the remaining modules in the program?
- We will also show Activity Feed, Leaderboard and Popular resources widgets.
06 Essential Skills Module Details:
- Please refer to 02-1_module_1.html
- Details in each of essential skills modules vary. In this challenge, we are just looking for you to lay a framework of how these modules can be presented to the user… we will be adding more details to it in a subsequent design challenge.
- Each module is broken-down into a number of activities and, based on the number of activities completed, the progress is shown.
- Each module will use a “virtual instructor” to show a description of what the module is all about and what will they learn as a part of that module needs to be highlighted. Please be as creative and interactive as possible when designing this instructor “Mr. X”
- Please make this section as video game-like as possible to keep the student engaged and the activities fun
In this challenge, we would like you to design the “Module 1: Understanding Self”:
- Show module title and description of what they will learn as a part of that module.
- Show the list of activities within this module and overall progress for this module (show status that an activity is pending, or completed)
- In module 1, there are 5 activities:
Words that describe me
A portrait of yourself
Setting priorities about values
Basic human needs
Responding to change
C. Career Exploration Module:
The Career Exploration Module contains information to filter a user from a main page, down to careers that best fit their interests and goals. The overall goal is to allow a user to find the information they need quickly, but also provide some guidance if they need a little direction.
07 Career Exploration Landing:
- Please refer to 03_career_exploration.html
- This will act as the landing page that allows the user to get started.
- There are three ways students can explore careers:
Show assessment test results and relevant careers
Highlight industry streams (Science, Technology, Engineering and Mathematics) and allow the user to select one of them to see the list of careers.
Advanced Search (search by salary, education level, skill, etc)
- You can grab the list of careers from the below reference website.
Reference:
- O*Net Resource Center provides data that can be searched using their API to provide career data to users. We are to use this information in this Assessment and Career Exploration Modules. The api documentation is provided here: https://services.onetcenter.org/
Example tools that use data from above services are: https://www.onetcenter.org/tools.html, http://www.mynextmove.org/explore/ip, etc..
08 Career Exploration Details:
- Please refer to 03-1_career_exploration_details.html
- User can:
-- Save Career.
-- Watch a short video overview about this career.
-- Marker to indicate if this is a STEM job (utilize STEM education filter in O*Net data)
-- What is this job? (please refer to 03-2_what_is_this_job):
---- Here we will have introduction about this job.
---- Essential Functions & Responsibilities. (utilize O*Net data)
---- Electrical Engineering Technologists Career Pathway (utilize Ohio data where available)
---- A chart showing examples of courses with secondary and postsecondary courses.
-- What Skills Do I Need For This Job? (please refer to 03-3_what_do_i_need_for_this_job).
---- Education. (utilize O*Net data and Ohio coursework data where available)
---- Knowledge. (utilize O*Net data)
---- Skills. (utilize O*Net data)
---- Abilities. (utilize O*Net data)
---- Gain Relevant Skills Now: Embed relevant Khan Academy interactive courses and video
-- What is the Job Outlook? (please refer to 03-4_job_outlook):
---- Salary (utilize Glassdoor data)
---- Job Demand (utilize O*Net data)
---- Check out my state. (utilize Glassdoor/Ohio data)
---- Local salary info. (utilize Glassdoor data)
---- Salaries by company. (utilize Glassdoor data)
-- How Do I Get This Job? (ability to search by city/zip code for local data) (please refer to 03-5_how_do_i_get_this_job):
---- Companies that hire [job] (utilize Glassdoor data)
---- [Job] interview Questions.(utilize Glassdoor data)
---- [Job] Opportunities (utilize Glassdoor data)
- We will also have Similar Jobs widget.
- The ability to email this career to a friend or share it on social media platforms.
09 Profile:
- Please refer to my_profile.html
- Here we show:
-- My Account Information.
-- Saved Careers from Career Explorations
-- Badges widget.
-- Friends who play this widget.
-- Leaderboard widget.
-- Status widget.
-- My progress widget.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Aim to make as game-like as possible
Target Audience:
- The target age group is high school age students (14 to 18 years of age) looking to enter college for their desired career.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should possible to build as mobile web application.
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.
The goal for this challenge is to create the look and feel for the major areas of the app, detailing how you see the user using that path to find out more about a career. This app will be an interactive experience (Digital) to gain soft skills (aka GE Essential Skills) as well as career explorations for digital industrial jobs of the future.
Recently we created wireframes to define the overall framework for the GE Foundation application and you will be provided with the wireframes we built.
Note: Please do not submit a colored version of wireframes as they are just meant to guide you, outline necessary screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your own design style / ideas / solutions during this design challenge.
Round 1
Submit your design for a Checkpoint feedback:00 Navigation and Overall Structure
01 Login and Registration
02 Landing Page and Welcome
03 Assessment Module Landing
04 Assessment Module Detail
05 Essential Skills Module Landing
06 Career Exploration Landing
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final Design plus any Checkpoint feedback:00 Navigation and Overall Structure
01 Login and Registration
02 Landing Page and Welcome
03 Assessment Module Landing
04 Assessment Module Detail
05 Essential Skills Module Landing
06 Essential Skills Module Details
07 Career Exploration Landing
08 Career Exploration Details
09 Profile.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Background Information:
As GE relocates their Headquarters to Boston, there is an opportunity for the GE Foundation to partner with the Boston Public Schools (BPS) high school system through its Developing Skills™ Initiative. Developing Skills™ in Boston will empower all Boston Public School high school students to become globally productive citizens by providing access to learning experiences necessary for the workforce of tomorrow.
The GE Foundation will launch the GE Brilliant Career Labs in both physical and virtual form, with the goal of reaching every Boston Public High School student to clearly link the education skills of today with the careers of tomorrow. The GE Brilliant Career Labs will be the first-of-its-kind interactive experience to prepare students for the innovative industrial jobs of the future. The physical and virtual labs will be high-tech places for youth to discover, invent, design, develop and create. The student learning experiences will also be driven by the changing global economy and the needs for a skilled workforce. In essence – we will link a local school district to the global community. The GE Brilliant Career Labs will be high-tech innovation centers dedicated to increasing the students’ STEM awareness about expertise needed in the next generation of the workforce globally. The Labs will be focused on empowering youth through exploration and creativity, while having them see and imagine what’s coming in the future. The Labs are designed for students to explore various career path ways and understand the skills needed for jobs in STEM fields.
This application will incorporate publicly available information with learning modules to teach soft skills and methods needed to stand out from the rest in today’s workforce.
Screen Sizes:
- Desktop Resolution: Design for 1280px width and height as required.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
Branding Guidelines:
- Branding Guidelines (GE Branding.zip).
- Client Logo (GE_foundation_lockup_PMS7455.eps.zip).
- Wireframes (wireframe.zip).
Design Goals:
- The design should follow GE branding guidelines.
- We are looking for the best UI/UX we can achieve.
Required Functionality:
00 Navigation and Overall Structure:
- Come with a navigation that allows users to access different pages of the site
- Please take a look at the “Application Flow” and come up with thoughts on what pages need to laid out.
01 Login and Registration:
- Please refer to login.html
- Allow the user to register with the site (Required details to be captured: Name, Email (username), Password, confirm password, School, and Grade).
- If the student has already registered then provide the ability to login into the application.
- Please show error validation as well.
02 Landing Page and Welcome:
- Please refer to landing_page.html
- Main landing page after a user logs in to the site.
- Welcome message and introduction.
- Overall flow of the sections/ site, outline or overview of the 3 main areas, etc.
- We will also show Badges and Activity Feed widgets.
- This application will have three main areas: Career Interest Assessment, Essential Skills, and Career Exploration.
A. Assessment Module
The Assessment Module is used for career explorations and to assess a student’s career interests. The Assessment Module will utilize a simple questionnaire from the Department of Labor’s O*Net to determine interests of students BEFORE beginning the Essential Skills and/ or Career Exploration Modules. Think of this module as the first pieces of information from a student to assess the best options and guidance for them.
Aim is to make the assessment look as “game-like” as possible to keep the students engaged.
Examples of the type of questions and how users are ranking and assessed can be found at: https://www.onetcenter.org/IP.html
03 Assessment Module Landing:
- Please refer to 01_assesment.html
- Initial landing page for the assessment module.
- Ability to start their assessment questionnaire/ test.
- Progress of their assessment test if they’ve already started, but haven’t completed
- Once assessment test is complete, next steps and information for moving the user to the Essential Skills Module.
04 Assessment Module Detail:
- Please refer to 01-1_assesmen_details.html
- Assessment test flow and overall UX.
- Detailed progress on a test they’ve already started, but haven’t completed.
- Overall score/ results from test.
- Next steps after completing test to move the user to the Essential Skills and/ or Career Exploration modules; you need to answer the questions to get to this view in wireframe.
B. Essential Skills Module:
The Essential Skills Module provides the user with modules in soft skills pertinent to managing yourself in the workplace. The students will receive various points for each activity as described in the attached Essential Skills curriculum. Some questions will give points only for correct answers, others will give points for completion.
The GE Foundation Workplace Skills Program is intended for high school and college-age students. The purpose of the program to provide participants with a comprehensive introduction to the “soft skills,” or what we believe are the critical essential skills, needed to help them make a successful transition from their schooling to the modern day workplace. This program is about expanding your emotional intelligence, learning how to develop positive relationships, and connecting with people so you can become a person everyone wants to work with. This program will help participants acquire and polish their soft skills.
In addition to the assessment module, here are ten modules in the program:
Module 1: Understanding Self
Module 2: Understanding Others
Module 3: Presenting Yourself
Module 4: Navigating the Workplace
Module 5: Teamwork
Module 6: Critical Thinking
Module 7: Interpersonal Communication
Module 8: Having Difficult Conversations
Module 9: Developing Wellbeing in the Workplace
Module 10: Learning to Value Diversity
05 Essential Skills Module Landing:
- Please refer to 02_essentials_skills.html
- This page will act as a dashboard, it shows the list of essential skills modules in the program and what each of the modules assess?
- If the user has already begun working on the modules, then we need to show the progress of each module (overall percentage completed?)
- How will the user know about the remaining modules in the program?
- We will also show Activity Feed, Leaderboard and Popular resources widgets.
06 Essential Skills Module Details:
- Please refer to 02-1_module_1.html
- Details in each of essential skills modules vary. In this challenge, we are just looking for you to lay a framework of how these modules can be presented to the user… we will be adding more details to it in a subsequent design challenge.
- Each module is broken-down into a number of activities and, based on the number of activities completed, the progress is shown.
- Each module will use a “virtual instructor” to show a description of what the module is all about and what will they learn as a part of that module needs to be highlighted. Please be as creative and interactive as possible when designing this instructor “Mr. X”
- Please make this section as video game-like as possible to keep the student engaged and the activities fun
In this challenge, we would like you to design the “Module 1: Understanding Self”:
- Show module title and description of what they will learn as a part of that module.
- Show the list of activities within this module and overall progress for this module (show status that an activity is pending, or completed)
- In module 1, there are 5 activities:
Words that describe me
A portrait of yourself
Setting priorities about values
Basic human needs
Responding to change
C. Career Exploration Module:
The Career Exploration Module contains information to filter a user from a main page, down to careers that best fit their interests and goals. The overall goal is to allow a user to find the information they need quickly, but also provide some guidance if they need a little direction.
07 Career Exploration Landing:
- Please refer to 03_career_exploration.html
- This will act as the landing page that allows the user to get started.
- There are three ways students can explore careers:
Show assessment test results and relevant careers
Highlight industry streams (Science, Technology, Engineering and Mathematics) and allow the user to select one of them to see the list of careers.
Advanced Search (search by salary, education level, skill, etc)
- You can grab the list of careers from the below reference website.
Reference:
- O*Net Resource Center provides data that can be searched using their API to provide career data to users. We are to use this information in this Assessment and Career Exploration Modules. The api documentation is provided here: https://services.onetcenter.org/
Example tools that use data from above services are: https://www.onetcenter.org/tools.html, http://www.mynextmove.org/explore/ip, etc..
08 Career Exploration Details:
- Please refer to 03-1_career_exploration_details.html
- User can:
-- Save Career.
-- Watch a short video overview about this career.
-- Marker to indicate if this is a STEM job (utilize STEM education filter in O*Net data)
-- What is this job? (please refer to 03-2_what_is_this_job):
---- Here we will have introduction about this job.
---- Essential Functions & Responsibilities. (utilize O*Net data)
---- Electrical Engineering Technologists Career Pathway (utilize Ohio data where available)
---- A chart showing examples of courses with secondary and postsecondary courses.
-- What Skills Do I Need For This Job? (please refer to 03-3_what_do_i_need_for_this_job).
---- Education. (utilize O*Net data and Ohio coursework data where available)
---- Knowledge. (utilize O*Net data)
---- Skills. (utilize O*Net data)
---- Abilities. (utilize O*Net data)
---- Gain Relevant Skills Now: Embed relevant Khan Academy interactive courses and video
-- What is the Job Outlook? (please refer to 03-4_job_outlook):
---- Salary (utilize Glassdoor data)
---- Job Demand (utilize O*Net data)
---- Check out my state. (utilize Glassdoor/Ohio data)
---- Local salary info. (utilize Glassdoor data)
---- Salaries by company. (utilize Glassdoor data)
-- How Do I Get This Job? (ability to search by city/zip code for local data) (please refer to 03-5_how_do_i_get_this_job):
---- Companies that hire [job] (utilize Glassdoor data)
---- [Job] interview Questions.(utilize Glassdoor data)
---- [Job] Opportunities (utilize Glassdoor data)
- We will also have Similar Jobs widget.
- The ability to email this career to a friend or share it on social media platforms.
09 Profile:
- Please refer to my_profile.html
- Here we show:
-- My Account Information.
-- Saved Careers from Career Explorations
-- Badges widget.
-- Friends who play this widget.
-- Leaderboard widget.
-- Status widget.
-- My progress widget.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Aim to make as game-like as possible
Target Audience:
- The target age group is high school age students (14 to 18 years of age) looking to enter college for their desired career.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should possible to build as mobile web application.
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.
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.