Challenge Summary
This challenge is part of the HPE Living Progress Challenge Blitz Series. Competitors who win challenges in this series will compete in a leaderboard and earn points towards additional cash prizes.
This is a follow-up challenge, this time we need you to continue create some screens by following completed storyboard style, wireframe layout and specification below. In the end of this challenge, your submissions need appear as single set of storyboard design.
This challenge focus on designing the Mentor screen flow, basically you need re-use existing storyboard design from previous challenge, and create some new screens based on wireframe.
1). Create Profile
2). Mentee Match
3). Mentee Profile
4). Mentorship Program Page
5). Professional Consultant
6). My Own Program
- Show how a user would create a “new” program
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
- Please submit more screens to get more feedback!
1). Create Profile
2). Mentee Match
3). Mentee Profile
4). Mentorship Program Page
5). Professional Consultant
6). My Own Program
7). My Own Program Detail
8). My Own Program - Create Goals
9). My Own Program - Documents
10). My Own Program - Lessons Learned
11). Institution Profile
12). User Profile
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
- It will be great if you can submit another Mobile screen sizes to make our developer easy to implement proper mobile layout
Design Problem
Mentor ME is a responsive mobile app with the objective at assisting underachieving high school students – particularly those at risk of becoming school dropouts. Mentor ME enables, empowers and inspires new talent by building networking relationships from a list of mentors that assist you sharing ideas, guidance, learning and connecting with other leaders.
The propose of Mentor ME is be more effective, efficiency at mentorship programs and to increase the coverage of current programs where younger adults can have access to volunteer mentors to get guidance and motivation to graduate.
The core of Mentor ME is the match between the Mentee interests and opportunities to Mentor Skill, this will be available by Hewlett Packard Enterprise products like Idol engine or Vertica ondemand, but this is optional. We are open to use the technology that better fit the needs and that have scalability option. The web app has the features easy to use as LinkedIn, Google map, Skype apis and Analytical modules for dashboards and sharing to stakeholders (Education institutions, government) trend of the community needs.
For this challenge we will be exploring the initial user experience flows for the Mentor ME App that connects industry experts (mentors) to youngsters students (mentees). Today many students don’t have the opportunity to have a mentor to teach and help them to prepare their carrier path. This application will help give students that opportunity.
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- Wireframe is just initial layout, for this storyboard challenge, please suggest any best practice design features
- You must follow/re-use completed storyboard from Mentee flow. In the end of this challenge, Mentor and Mentee flow must appear as one set of storyboard.
- Completed Storyboard Download link: https://drive.google.com/folderview?id=0B31nrwic_6z0VHRDWDF2eUk1WTQ&usp=sharing
- Pay attention to Mentor flow based on wireframe and storyboard, there are some screen that not exists on Mentee flow.
- Design Guidelines as Reference: Mood Board
- Color Theme: Stick with provided storyboard
- Fonts: Open to any designer suggestion
- Required Screen Sizes (Read Requirements on Challenge Rounds!)
-- Tablet Portrait Retina (1536px x 2048px)
-- Mobile Retina Retina (750px x 1334px)
Submission Requirements
For this challenge you need build Living Progress - Mentor ME storyboard screens for the following features and roles based on our completed wireframe solution (wireframe.zip).
1). Create Profile
In order to create a mentor/mentee profile, a menu should be added to the sign up page to select the type of user. To be a Mentor we need a qualification filter page with 3 questions:
1) Age: If < 18 then cannot create an individual mentor profile
2) Linkedin profile available?:
If not = cannot create an individual mentor profile and must create a linkedin profile first
3) Professional /Entrepreneurial Experience ? if not cannot create an individual mentor profile
4) Professional Consultant user
if yes = this mentor will be flagged as professional consultant ( with the expert skills called out)
5) Institutional user ?
if yes can create institutional mentor profile
2). Mentee Match:
- Mentor can select based on map/geography
- Mentor can select from selected Career and University name
- User can slide the Economic slider
- Then on the next step there will be Matching Survey list
- From a list of possible mentees, a mentor is able to view a mentee detail or mentee profile. Mentor is able to filter the search results list w/ criteria
- For Mentor flow, we need add these following criteria as inputs to the match making.
1) Geography
2) Language
3) Interests
4) Skills
5) Institutional affiliation (this will require a field to enter a code for institutional mentorship programs)
3). Mentee Profile
- This is how Mentee Profile look
- User can see detail information of Mentee, skype and message buttons, also including His/Her Mentor
- There are list of Mentee strength
- And comments from Mentees
4). Mentorship Program Page:
- After a mentee has been selected into a mentorship program the mentor/ mentee relationship will be managed in a mentorship program page
- On top of screen allow user to see another Mentee
- Allow user to create goals and agreements as well as track progress on goals/ tasks
- Allow users to schedule meetings with mentees
- Allow user to view and update Mentorship program posted to the system
- Allow user to view and update progress of Mentorship
- Allow user to view Roles & Responsibilities record on the tool
- Allow users make Skype calls with mentees
- Allow user to send summary or make comments about the mentee
- Allow for messaging between the mentor and mentee
- Show mentorship program timeline for an overview of the engagement
- Upon Program completion, the Mentor fills out a survey about the mentorship program
- Allow user to rate the mentorship program and use of tool. Evaluate the different skills of your Mentee - This should be an evaluation form or notes on a mentee profile
- Allow user to answer questionnaire about mentee's performance
- Allow Mentors to call in registered professional consultant (Psychologist, Physicians, Attorneys, etc) to support specific needs of the mentees.
- Mentor need the capability to submit their own program thru the app
- We need the capability to attach content to each session, like PDF files, word documents, excel files, links to web pages that will help mentor and mentee to develop a special skills or better understand a topic.
5). Professional Consultant
- Create active state for this menu
- This Professional Consultant will be list of selection
- Mentor can checked on/off the available options
- Think about how layout for this page should created.
- We also need screen to adding a new professional consultant to your network and how you would add a professional consultant to a mentor program.
6). My Own Program
- Create active state for this menu
- My Own Program divided by Ongoing and Closed status
- Match column like wireframe
- Last column is for Process, create consistent way to transform current and total time in weeks
- Click each row should load the Detail page
- Additional task, we need create 1 screen for a mentor and 1 screen for an institutional user.
7). My Own Program Detail
- Create Detail page look for My Own program
- On Detail page, there are main action buttons on top for Create Goal, Documents and Lesson Learned
- Then please put consistent timeline and overall progress, refer to provided storyboard
- Re-use Your Tasks from existing storyboard
- We need to have an option to create my own program as individual mentor or institutional mentor.
- Institutional mentors should be able to send invites to potential mentors and mentees via email link to create a profile using the Mentor ME application. Institutions can create credential requirements to allow access to mentors in the institutional programs
- Only Mentors can create programs, it is the responsibility to add the mentee once the matching has been done.
8). My Own Program - Create Goals
- Match form field like wireframe
- Project Summary placed on top for Subject and Content
- Under Timeline and Overall Progress should be each week contains Weekly Goal and Checklist
- How Checklist look for Goal
9). My Own Program - Documents
- User can see their upload documents in pdf, xls, doc or any other type
- Also create separate section for useful links
- Put clear way to display Add Document button
10). My Own Program - Lessons Learned
- For this section, there’s text input and text area for Subject and Content fields
- Also put History Lessons Learned in the bottom
11). Institution Profile
- This is how Institution Profile look
- Logo and Quick description placed on top
- There are basic info and member tabs
- Put map location & Program Managers for Basic Info Tab
- For Members tab, search field placed on top
- Then there’s Mentors and Mentees button
- List each member quick info.
- Each row need take user to related page
12). User Profile
- User thumbnail and quick information placed on top
- There are basic info, occupational interest and introduce video tabs
- Basic info will be list of User Profile
- Occupational Interest, user can select
Target User
- Mentor
Judging Criteria
- How well you create design for Living Progress - Mentor ME application
- Follow best practice of Responsive Design Patterns.
- Cleanliness of your graphics and design.
- User Experience
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.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
This is a follow-up challenge, this time we need you to continue create some screens by following completed storyboard style, wireframe layout and specification below. In the end of this challenge, your submissions need appear as single set of storyboard design.
This challenge focus on designing the Mentor screen flow, basically you need re-use existing storyboard design from previous challenge, and create some new screens based on wireframe.
Round 1
Initial Living Progress - Mentor ME - Mentor for these following screens on required sizes below on Tablet Size:1). Create Profile
2). Mentee Match
3). Mentee Profile
4). Mentorship Program Page
5). Professional Consultant
6). My Own Program
- Show how a user would create a “new” program
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
- Please submit more screens to get more feedback!
Round 2
Final Living Progress - Mentor ME - Mentor Design combined with Checkpoint Feedback for these following screens on Tablet and Mobile Size:1). Create Profile
2). Mentee Match
3). Mentee Profile
4). Mentorship Program Page
5). Professional Consultant
6). My Own Program
7). My Own Program Detail
8). My Own Program - Create Goals
9). My Own Program - Documents
10). My Own Program - Lessons Learned
11). Institution Profile
12). User Profile
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
- It will be great if you can submit another Mobile screen sizes to make our developer easy to implement proper mobile layout
Design Problem
Mentor ME is a responsive mobile app with the objective at assisting underachieving high school students – particularly those at risk of becoming school dropouts. Mentor ME enables, empowers and inspires new talent by building networking relationships from a list of mentors that assist you sharing ideas, guidance, learning and connecting with other leaders.
The propose of Mentor ME is be more effective, efficiency at mentorship programs and to increase the coverage of current programs where younger adults can have access to volunteer mentors to get guidance and motivation to graduate.
The core of Mentor ME is the match between the Mentee interests and opportunities to Mentor Skill, this will be available by Hewlett Packard Enterprise products like Idol engine or Vertica ondemand, but this is optional. We are open to use the technology that better fit the needs and that have scalability option. The web app has the features easy to use as LinkedIn, Google map, Skype apis and Analytical modules for dashboards and sharing to stakeholders (Education institutions, government) trend of the community needs.
For this challenge we will be exploring the initial user experience flows for the Mentor ME App that connects industry experts (mentors) to youngsters students (mentees). Today many students don’t have the opportunity to have a mentor to teach and help them to prepare their carrier path. This application will help give students that opportunity.
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- Wireframe is just initial layout, for this storyboard challenge, please suggest any best practice design features
- You must follow/re-use completed storyboard from Mentee flow. In the end of this challenge, Mentor and Mentee flow must appear as one set of storyboard.
- Completed Storyboard Download link: https://drive.google.com/folderview?id=0B31nrwic_6z0VHRDWDF2eUk1WTQ&usp=sharing
- Pay attention to Mentor flow based on wireframe and storyboard, there are some screen that not exists on Mentee flow.
- Design Guidelines as Reference: Mood Board
- Color Theme: Stick with provided storyboard
- Fonts: Open to any designer suggestion
- Required Screen Sizes (Read Requirements on Challenge Rounds!)
-- Tablet Portrait Retina (1536px x 2048px)
-- Mobile Retina Retina (750px x 1334px)
Submission Requirements
For this challenge you need build Living Progress - Mentor ME storyboard screens for the following features and roles based on our completed wireframe solution (wireframe.zip).
1). Create Profile
In order to create a mentor/mentee profile, a menu should be added to the sign up page to select the type of user. To be a Mentor we need a qualification filter page with 3 questions:
1) Age: If < 18 then cannot create an individual mentor profile
2) Linkedin profile available?:
If not = cannot create an individual mentor profile and must create a linkedin profile first
3) Professional /Entrepreneurial Experience ? if not cannot create an individual mentor profile
4) Professional Consultant user
if yes = this mentor will be flagged as professional consultant ( with the expert skills called out)
5) Institutional user ?
if yes can create institutional mentor profile
2). Mentee Match:
- Mentor can select based on map/geography
- Mentor can select from selected Career and University name
- User can slide the Economic slider
- Then on the next step there will be Matching Survey list
- From a list of possible mentees, a mentor is able to view a mentee detail or mentee profile. Mentor is able to filter the search results list w/ criteria
- For Mentor flow, we need add these following criteria as inputs to the match making.
1) Geography
2) Language
3) Interests
4) Skills
5) Institutional affiliation (this will require a field to enter a code for institutional mentorship programs)
3). Mentee Profile
- This is how Mentee Profile look
- User can see detail information of Mentee, skype and message buttons, also including His/Her Mentor
- There are list of Mentee strength
- And comments from Mentees
4). Mentorship Program Page:
- After a mentee has been selected into a mentorship program the mentor/ mentee relationship will be managed in a mentorship program page
- On top of screen allow user to see another Mentee
- Allow user to create goals and agreements as well as track progress on goals/ tasks
- Allow users to schedule meetings with mentees
- Allow user to view and update Mentorship program posted to the system
- Allow user to view and update progress of Mentorship
- Allow user to view Roles & Responsibilities record on the tool
- Allow users make Skype calls with mentees
- Allow user to send summary or make comments about the mentee
- Allow for messaging between the mentor and mentee
- Show mentorship program timeline for an overview of the engagement
- Upon Program completion, the Mentor fills out a survey about the mentorship program
- Allow user to rate the mentorship program and use of tool. Evaluate the different skills of your Mentee - This should be an evaluation form or notes on a mentee profile
- Allow user to answer questionnaire about mentee's performance
- Allow Mentors to call in registered professional consultant (Psychologist, Physicians, Attorneys, etc) to support specific needs of the mentees.
- Mentor need the capability to submit their own program thru the app
- We need the capability to attach content to each session, like PDF files, word documents, excel files, links to web pages that will help mentor and mentee to develop a special skills or better understand a topic.
5). Professional Consultant
- Create active state for this menu
- This Professional Consultant will be list of selection
- Mentor can checked on/off the available options
- Think about how layout for this page should created.
- We also need screen to adding a new professional consultant to your network and how you would add a professional consultant to a mentor program.
6). My Own Program
- Create active state for this menu
- My Own Program divided by Ongoing and Closed status
- Match column like wireframe
- Last column is for Process, create consistent way to transform current and total time in weeks
- Click each row should load the Detail page
- Additional task, we need create 1 screen for a mentor and 1 screen for an institutional user.
7). My Own Program Detail
- Create Detail page look for My Own program
- On Detail page, there are main action buttons on top for Create Goal, Documents and Lesson Learned
- Then please put consistent timeline and overall progress, refer to provided storyboard
- Re-use Your Tasks from existing storyboard
- We need to have an option to create my own program as individual mentor or institutional mentor.
- Institutional mentors should be able to send invites to potential mentors and mentees via email link to create a profile using the Mentor ME application. Institutions can create credential requirements to allow access to mentors in the institutional programs
- Only Mentors can create programs, it is the responsibility to add the mentee once the matching has been done.
8). My Own Program - Create Goals
- Match form field like wireframe
- Project Summary placed on top for Subject and Content
- Under Timeline and Overall Progress should be each week contains Weekly Goal and Checklist
- How Checklist look for Goal
9). My Own Program - Documents
- User can see their upload documents in pdf, xls, doc or any other type
- Also create separate section for useful links
- Put clear way to display Add Document button
10). My Own Program - Lessons Learned
- For this section, there’s text input and text area for Subject and Content fields
- Also put History Lessons Learned in the bottom
11). Institution Profile
- This is how Institution Profile look
- Logo and Quick description placed on top
- There are basic info and member tabs
- Put map location & Program Managers for Basic Info Tab
- For Members tab, search field placed on top
- Then there’s Mentors and Mentees button
- List each member quick info.
- Each row need take user to related page
12). User Profile
- User thumbnail and quick information placed on top
- There are basic info, occupational interest and introduce video tabs
- Basic info will be list of User Profile
- Occupational Interest, user can select
Target User
- Mentor
Judging Criteria
- How well you create design for Living Progress - Mentor ME application
- Follow best practice of Responsive Design Patterns.
- Cleanliness of your graphics and design.
- User Experience
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.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
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.