Challenge Summary
Welcome to Living Progress - Mentor ME - Mentee Storyboard Challenge
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 to the recently completed Living Progress - Mentor ME Wireframe Challenge and this time we need you to design how Living Progress - Mentor ME application look and feel by following provided wireframe layout and specification below. This challenge focus on designing the Mentee screen flow, there will be another challenge to build another Mentor screen flow.
1). Log In
2). Welcome Page
3). Terms and Conditions
4). Create Profile
5). Dashboard
6). Activities
7). Goals
8). Tasks
- 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). Log In (Tablet and Mobile Size)
2). Welcome Page (Tablet and Mobile Size)
3). Terms and Conditions
4). Create Profile
5). Dashboard (Tablet and Mobile Size)
6). Activities
7). Goals
8). Tasks
9). Meetings
10). Mentor Match:
11). Mentor Profile
12). Mentorship Program Page (Tablet and Mobile Size)
13). Forum
14). Messages/Inbox
- 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
- Design Guidelines as Reference: Mood Board
- Color Theme: Open to any designer suggestion
- Fonts: Open to any designer suggestion
- Required Screen Sizes:
-- Tablet Portrait Retina (1536px x 2048px)
-- Mobile Retina Retina (750px x 1334px) - only for some screens, check each round deliverables!
Submission Requirements
For this challenge you need build Living Progress - Mentor ME storyboard screens for these following features and roles based on our completed wireframe solution (wireframe.zip)
1). Log In
- Application title should be Mentor ME
- Suggest simple logo design
- User have options to login as Mentee or Mentor
- Log in w/ username & password
- Log in with social credentials
- Suggest how error validation look
- Important: A user needs to register first from the home page, where they can created a LOG IN to return to the App, not the way the wireframe is showing where you need to log in and then register. Please clear this flow on your design solution.
2). Welcome Page
- Onboarding instructions and overview of the Mentor ME App
- Suggest design ideas how you transform flowchart on Welcome page to be more easy to read
- Get Started button take user to Terms and Conditions page
3). Terms and Conditions
- Fill dummy text for the textarea of Terms and Conditions
- User must checked on the checkboxes before can proceed/click Continue button
- User need able put signature
4). Create Profile
- Allow user to view and update simple profile page adding relevant information about skills
- There’s progress step on top of page, create active and inactive state
- User can either walk thru manually creating their profile or import profile from Facebook, Google + or Linkedin
- Fields need filled are:
- First Name (Mandatory)
- Last Name (Mandatory)
- Birth Date (Mandatory)
- Family Income (Optional)
- Year in School (Mandatory)
- School or Institution Name (Mandatory)
- Phone Number (Optional)
- Email Address (Optional)
- Skype Username (Optional)
- Whatsapp Username (Optional)
- School: (Mandatory)
- Picture (Optional)
- Occupational Interest (Mandatory) -- What will this list look like?
- At least one contact mechanism should be mandatory.
- Create clear design for selected/unselected state style
- Select/ Create Goals - Allow user to select skills or personal goals to develop with mentor's guidance
- Think about clear way to add new goal
- Done button take user to Dashboard
5). Dashboard:
- How overall Dashboard page should created?
- How sidebar works?
- There are buttons that placed on top right of header bar
- Search input placed on header
- User thumbnail and profile placed on top of main navigation
- Displays recent activity, goals, tasks, meetings, possible mentor matches, mentorship programs, upcoming tasks, and upcoming meetings for the mentors
- Activities section, need display thumbnail, and activities title
- Mentors section will display the Mentors list, user need able to search and find match
- Goals section, need show up progress bar
- “+” button allow user to add more goal
- Tasks list contains some tasks with colored list. Think about how you design completed, in progress and late tasks?
- Calendar displayed on the bottom
- Create design how event show up on calendar
6). Activities
- This screen will displayed all activities of Mentee
- There’s hours information placed on the bottom right
7). Goals
- Mentee see their all Goals
- Design clear way to display all information and buttons
- Need able to add new goals. How the form look?
8). Tasks
- This screen will contains all Mentee tasks
- User can sort By Program and By Priority
- There are input to do quick add for task
- What other function user can do on this screen?
9). Meetings
- Meetings screen will be displaying full Calendar page
- Current date selected by default
- There’s edit button to let user change the Meeting information
- Display Meeting title and Agenda list
10). Mentor Match:
- From the dashboard the mentee is able to view possible mentor candidates and view the match criteria that aligns them with their mentor
- From a list of possible mentors, a mentee is able to view a mentor detail or mentor profile
- Submit a request to become a mentee from the mentor detail page
11). Mentor Profile
- This is how Mentor Profile look
- User can see detail information of Mentor, skype and message buttons, also including His/Her Mentees
- There are list of Mentor strength
- And comments from Mentees
12). 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 Mentor
- Allow user to create goals and agreements as well as track progress on goals/ tasks
- Allow users to schedule meetings with mentors
- 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 mentors
- Allow user to send summary or make comments of mentorship program
- Allow for messaging between the mentor and mentee
- Show mentorship program timeline for an overview of the engagement
- Upon Program completion, the Mentee fills out a survey about the mentorship program
- Allow user to rate the mentorship program and use of tool
- Allow user to answer questionnaire about mentor's performance
- Skype/Messages between the Mentor/ Mentee
- Submit button will display overall content for each Mentorship Program
13). Forum
- Allow user to post messages (mentee and Mentor) to have an internal community to share comments and thoughts regarding different topics (i.e. Yahoo Q&A)
- Create sample screen how forum look
14). Messages/Inbox
- A page that contains all of the communications for a user w/in the APP
Target User
- Mentee
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 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 to the recently completed Living Progress - Mentor ME Wireframe Challenge and this time we need you to design how Living Progress - Mentor ME application look and feel by following provided wireframe layout and specification below. This challenge focus on designing the Mentee screen flow, there will be another challenge to build another Mentor screen flow.
Round 1
Initial Living Progress - Mentor ME - Mentee for these following screens on Tablet Size1). Log In
2). Welcome Page
3). Terms and Conditions
4). Create Profile
5). Dashboard
6). Activities
7). Goals
8). Tasks
- 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 - Mentee Design combined with Checkpoint Feedback for these following screens:1). Log In (Tablet and Mobile Size)
2). Welcome Page (Tablet and Mobile Size)
3). Terms and Conditions
4). Create Profile
5). Dashboard (Tablet and Mobile Size)
6). Activities
7). Goals
8). Tasks
9). Meetings
10). Mentor Match:
11). Mentor Profile
12). Mentorship Program Page (Tablet and Mobile Size)
13). Forum
14). Messages/Inbox
- 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
- Design Guidelines as Reference: Mood Board
- Color Theme: Open to any designer suggestion
- Fonts: Open to any designer suggestion
- Required Screen Sizes:
-- Tablet Portrait Retina (1536px x 2048px)
-- Mobile Retina Retina (750px x 1334px) - only for some screens, check each round deliverables!
Submission Requirements
For this challenge you need build Living Progress - Mentor ME storyboard screens for these following features and roles based on our completed wireframe solution (wireframe.zip)
1). Log In
- Application title should be Mentor ME
- Suggest simple logo design
- User have options to login as Mentee or Mentor
- Log in w/ username & password
- Log in with social credentials
- Suggest how error validation look
- Important: A user needs to register first from the home page, where they can created a LOG IN to return to the App, not the way the wireframe is showing where you need to log in and then register. Please clear this flow on your design solution.
2). Welcome Page
- Onboarding instructions and overview of the Mentor ME App
- Suggest design ideas how you transform flowchart on Welcome page to be more easy to read
- Get Started button take user to Terms and Conditions page
3). Terms and Conditions
- Fill dummy text for the textarea of Terms and Conditions
- User must checked on the checkboxes before can proceed/click Continue button
- User need able put signature
4). Create Profile
- Allow user to view and update simple profile page adding relevant information about skills
- There’s progress step on top of page, create active and inactive state
- User can either walk thru manually creating their profile or import profile from Facebook, Google + or Linkedin
- Fields need filled are:
- First Name (Mandatory)
- Last Name (Mandatory)
- Birth Date (Mandatory)
- Family Income (Optional)
- Year in School (Mandatory)
- School or Institution Name (Mandatory)
- Phone Number (Optional)
- Email Address (Optional)
- Skype Username (Optional)
- Whatsapp Username (Optional)
- School: (Mandatory)
- Picture (Optional)
- Occupational Interest (Mandatory) -- What will this list look like?
- At least one contact mechanism should be mandatory.
- Create clear design for selected/unselected state style
- Select/ Create Goals - Allow user to select skills or personal goals to develop with mentor's guidance
- Think about clear way to add new goal
- Done button take user to Dashboard
5). Dashboard:
- How overall Dashboard page should created?
- How sidebar works?
- There are buttons that placed on top right of header bar
- Search input placed on header
- User thumbnail and profile placed on top of main navigation
- Displays recent activity, goals, tasks, meetings, possible mentor matches, mentorship programs, upcoming tasks, and upcoming meetings for the mentors
- Activities section, need display thumbnail, and activities title
- Mentors section will display the Mentors list, user need able to search and find match
- Goals section, need show up progress bar
- “+” button allow user to add more goal
- Tasks list contains some tasks with colored list. Think about how you design completed, in progress and late tasks?
- Calendar displayed on the bottom
- Create design how event show up on calendar
6). Activities
- This screen will displayed all activities of Mentee
- There’s hours information placed on the bottom right
7). Goals
- Mentee see their all Goals
- Design clear way to display all information and buttons
- Need able to add new goals. How the form look?
8). Tasks
- This screen will contains all Mentee tasks
- User can sort By Program and By Priority
- There are input to do quick add for task
- What other function user can do on this screen?
9). Meetings
- Meetings screen will be displaying full Calendar page
- Current date selected by default
- There’s edit button to let user change the Meeting information
- Display Meeting title and Agenda list
10). Mentor Match:
- From the dashboard the mentee is able to view possible mentor candidates and view the match criteria that aligns them with their mentor
- From a list of possible mentors, a mentee is able to view a mentor detail or mentor profile
- Submit a request to become a mentee from the mentor detail page
11). Mentor Profile
- This is how Mentor Profile look
- User can see detail information of Mentor, skype and message buttons, also including His/Her Mentees
- There are list of Mentor strength
- And comments from Mentees
12). 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 Mentor
- Allow user to create goals and agreements as well as track progress on goals/ tasks
- Allow users to schedule meetings with mentors
- 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 mentors
- Allow user to send summary or make comments of mentorship program
- Allow for messaging between the mentor and mentee
- Show mentorship program timeline for an overview of the engagement
- Upon Program completion, the Mentee fills out a survey about the mentorship program
- Allow user to rate the mentorship program and use of tool
- Allow user to answer questionnaire about mentor's performance
- Skype/Messages between the Mentor/ Mentee
- Submit button will display overall content for each Mentorship Program
13). Forum
- Allow user to post messages (mentee and Mentor) to have an internal community to share comments and thoughts regarding different topics (i.e. Yahoo Q&A)
- Create sample screen how forum look
14). Messages/Inbox
- A page that contains all of the communications for a user w/in the APP
Target User
- Mentee
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.