Challenge Overview
Welcome to Living Progress - Build - Mentor ME Page Refinement UI Prototype Challenge
The main task of this challenge is to update existing UI Prototype of the Living Progress - Mentor ME based on the provided Storyboard design and specification below
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
https://drive.google.com/drive/folders/0B31nrwic_6z0NXVub1dNWS1Fdzg?usp=sharing
Storyboard.zip - Mobile Storyboard Screen
Ionic-proto.zip - Ionic Prototype as Base Updates
Important!
- Suggest best practice Responsive Web Design Breakpoints for Mobile layout
- Base of existing prototype created using ionic framework.
- Use existing SCSS for CSS Pre-Processor when you create new stylesheet
- You MUST make sure all graphic look sharp on Retina and Standard Size.
- DO NOT override existing libraries, If you want to create custom styling from existing library, create separate files
- DO NOT change indentation of current code structure, we need easily track your updated codes
- DO NOT break existing functions after your updates. Do multiple check your solution for every pages!
- DO NOT change existing images, you just need work on how fluid mobile layout should look
- FOLLOW existing HTML/JS/CSS code formatting.
- Create separated scss for mobile view media query
- Put clear documentation if you update existing HTML/JS/CSS codes and let us know the reasons.
- Make sure your updated prototype remain look good and working on Tablet and mobile screens
- Compare existing prototype and related storyboard screen and read instruction on each page like explained below.
- Important: On some provided screen are just meant to guide you to show the existing flow and no need to update the prototype. Pay attention to every screens information
- Check provided storyboard for Tablet and Mobile version
- You need make sure All Pages inside prototype look good and have great functionality
- Lets discuss via challenge forum if you need clarification on some things.
Login Credentials
- There are 2 flows you can access for this prototype:
Mentor Flow:
Username: mentor
Password: 123
Mentee Flow:
Username: mentee
Password: 123
A). Mentee Flow Updates
0). Skype and Message Icons
- We need apply href link for all Skype and Message buttons on the application
- For Skype button, follow from this link: http://stackoverflow.com/questions/11598925/is-there-an-href-attribute-for-skype-like-mailto-or-tel
- For Message button, follow from this link: http://stackoverflow.com/questions/8510720/sms-text-from-hyperlink-on-phone-browser/8510812#8510812
1). Login updates
- Remove OR line
- Remove all social icons
- Make sure form box height reduced after removal for tablet and iphone layout
2). Register Screen
TABLET VERSION
Screenshot: 01-00_A-Mentee-Register-page selections.jpg
- Click Register button from landing page, and go to Register modal window. No update to this selection screen.
- Click Next button need load the new modal window
- This is new screen we need display this modal window after user click NEXT button on Register modal window (Screenshot: 01-00_B-Mentee-Register-page-01-default.jpg)
- Match field like storyboard look
- Re-use existing form field and function (Screenshot: 01-00_C-Mentee-Register-page-02-typing-email.jpg)
- Validation styling with checkmark on the right side (Screenshot: 01-00_D-Mentee-page-03-typing-pass.jpg & Screenshot: 01-00_E-Mentee-Register-page-04-typing-institution.jpg)
- No need display OR line and Connect Using Facebook button
- Register button take user to Terms and Condition screen flow (Screenshot: 02-00_A-Mentee-termscond-01-terms.png)
- For this screen update Signature to Email Address (Screenshot: 02-00_B-Mentee-termscond-02-waiver.jpg)
MOBILE VERSION
Screenshot: 01-00_A-Mentee-Register-selected-role.jpg
- No update for Selection screen (Screenshot: 01-00_B-Mentee-Register-page-01-default.jpg)
- Register modal window need to be fluid for mobile
- Form flow for mobile (Screenshot: 01-00_C-Mentee-Register-page-02-typing-email.jpg, Screenshot: 01-00_D-Mentee-page-03-typing-pass.jpg, Screenshot: 01-00_E-Mentee-Register-page-04-typing-institution.jpg, Screenshot: 02-00_A-Mentee-termscond-01-terms.png)
- Make user updated Email address look good for mobile screen (Screenshot: 02-00_B-Mentee-termscond-02-waiver.jpg)
3). Create Profile
TABLET VERSION
- Continue button take user to Create Profile flow (Screenshot: 02-00_C-Register-step01.jpg)
- Step 1, remove the “or load from social network”
- Remove all social buttons
- Add new field below Skype Username for “Facebook URL”
- On Step 2 Choose Your Interest, update the screen with new look (Screenshot: 02-00_D-Register-professional interest.jpg)
- There are tabs on top for Professional Interest and Personal Interest
- User need make selection for both Professional Interest and Personal Interest before can proceed to the next screen
- There are 3 selection placed on top
- User only able to select 3 options from all radio buttons
- Match options like storyboard look
- This is Personal Interest tab look (Screenshot: 02-00_E-Register-personal interest.jpg)
- Next button remain works to display Step 3 Define Goals
MOBILE VERSION
- Create Profile look for mobile screen (Screenshot: 02-00_C-Register-step01.jpg)
- For Step 2 - Choose Your Interest, below the tab, text need placed below the number (Screenshot: 02-00_D-Register-professional interest.jpg)
- All options need use 2 columns format
- Page look for Personal Interest (Screenshot: 02-00_E-Register-personal interest.jpg)
4). Dashboard
TABLET VERSION
Screenshot: 04_A-Mentee-Dashboard.jpg
- For Mentee, remove “+” button under Your Tasks
- Expand Your Tasks to use full-width
MOBILE VERSION
Screenshot: 04_A-Mentee-Dashboard.jpg
- Remove “+” button under Your Tasks
- Make sure Meeting & Programs removed from all screen
5). Goals
TABLET VERSION
Screenshot: 04_B-Mentee-Goals-02-Goal-expand.jpg
- This is update Goals screen
- Add Program Name and Mentor name on the 1st column
- When click each Goals need show the detail information
- User thumbnail, title and social icon buttons placed on the right side
- Remove average performance, rating and expertise
- Need display full-width of Your Tasks
MOBILE VERSION
Screenshot: 04_B-Mentee-Goals.jpg
- Updated Goal title need display on separated lines
- Click each Goal need expand the content (Screenshot: 04_C-Mentee-Goals-02-Goal-expand-details mentor.jpg)
- No need modal window, display expanded below each Goal
- Tasks place on the bottom of user information (Screenshot: 04_D-Mentee-Goals-details task.jpg)
6). Tasks
TABLET VERSION
Screenshot: 04_C-Mentee-Tasks-01-Default.jpg
- Remove “+” button from Mentee flow
- There’s Program name below the Goal Title
- Match date information on the right side of each task
- Click each task need expand more information for User Assignment, Due Date and Estimated Date
(Screenshot: 04_D-Mentee-Tasks-expand details.jpg)
MOBILE VERSION
Screenshot: 04_E-Mentee-Tasks-01-Default.jpg
- Make sure tasks and date displayed in single line
- When expand the tasks need load more information like on Tablet (Screenshot: 04_F-Mentee-Tasks-expand details.jpg)
- Due Date and Estimated Time displayed as separate lines
7). Programs
TABLET VERSION
- This is updated Programs screen
- There are 2 tabs for Programs and My Programs
Programs Tab
Screenshot: 05_A-Mentee-Mentorship-program-Program-list.jpg
- Match layout and content like storyboard look
- On header, there’s Suggested Mentorship Program and progress bar on the right side
- Click each card need take user to Program Details below
My Programs Tab
Screenshot: 05_B-Mentee-My Own Program.jpg
- For this tab, you need display another sub-tabs for Ongoing and Closed
- Match layout and content like storyboard look
- Make sure the tabs working. Re-use existing content.
- Each card content 1 program name
- Click each card need take user to My Program Details below
MOBILE VERSION
Programs Tab
Screenshot: 05_A-Mentee-Mentorship-program-Program-list.jpg
- Display card as separated lines for mobile
My Programs Tab
Screenshot: 05_B-Mentee-My Own Program.jpg
- Display card as separated lines for mobile
8). Program Details
TABLET VERSION
My Programs Details
Screenshot: 04_E-Mentee-Mentorship-program-Tabs-Summary.jpg
- Remove Add Goal button for Mentee flow
- Add new tabs for Goals and Tasks
Programs Detail
04_F-Mentee-Institution Programs screen.jpg
- Remove Add Goal button for Mentee flow
- Add new tabs for Goals and Tasks
MOBILE VERSION
My Programs Detail
Screenshot: 04_G-Mentee-Mentorship-program-Tabs-Summary.jpg
- Add new options for Goals and Tasks on the dropdown
- Updated options look (Screenshot: 04_H-Mentee-Mentorship-program-C00-Tabs-selection.jpg)
Program Details
Screenshot: 04_I-Mentee-Institution Programs screen.jpg
- Add new options for Goals and Tasks on the dropdown
9). Documents Tab
TABLET VERSION
Screenshot: 06_A-Mentee-add new files and links.jpg
- Update title for every sections
- There are Add Files and Add links on the right side of title
- Click Add files need able to show the modal window on the bottom screen.
- Re-use existing function like on prototype (Screenshot: 06_B-Mentee-add new files.jpg)
- Click Add links need able to show the modal window on the bottom screen. Screenshot: 06_C-Mentee-add new links.jpg
MOBILE VERSION
Screenshot: 06_A-Mentee-add new files and links.jpg
- Just need display + button on the right side without the text
- Add new files modal window look (Screenshot: 06_B-Mentee-add files.jpg)
- Add new links modal window look (Screenshot: 06_C-Mentee-add link.jpg)
10). Goals Tab
TABLET VERSION
Screenshot: 06_D-Mentee-goals.jpg
- Re-use updated Goals layout
- Need able to click each Goal
MOBILE VERSION
Screenshot: 06_D-Mentee-program-tab-goals.jpg
- Title need displayed on separated line
- Progress bar, date and time need displayed in separated line
11). Tasks Tab
TABLET VERSION
Screenshot: 06_E-Mentee-tasks.jpg
- Re-use updated Tasks layout
- Need able to click each Task to expand the information
MOBILE VERSION
Screenshot: 06_E-Mentee-program-tab-tasks.jpg
- Task title and date need displayed in single line
- Need able to click each Task to expand the information
12). Performance Evaluation Tab
TABLET VERSION
Screenshot: 07_A-Mentee-performance evaluation.jpg
- Display some questions for Questionnaire
- Overall comments placed on the bottom
- Match content like storyboard look
MOBILE VERSION
Screenshot: 07-Mentee-Performance Evaluation.jpg
- All radio buttons need displayed in separated lines
B). Mentor Flow Updates
0). Skype and Message Icons
- We need apply href link for all Skype and Message buttons on the application
- For Skype button, follow from this link: http://stackoverflow.com/questions/11598925/is-there-an-href-attribute-for-skype-like-mailto-or-tel
- For Message button, follow from this link: http://stackoverflow.com/questions/8510720/sms-text-from-hyperlink-on-phone-browser/8510812#8510812
1). Login updates
- Remove OR line
- Remove all social icons
- Make sure form box height reduced after removal for tablet and iphone layout
2). Register Screen
TABLET VERSION
Screenshot: 01-00_A-Mentor-Register-page selections.jpg
- Click Register button from landing page, and go to Register modal window. No update to this selection screen.
- Click Next button need load the new modal window
- This is new screen we need display this modal window after user click NEXT button on Register modal window (Screenshot: 01-00_B-Mentor-Register-page default.jpg)
- Notice there’s new field for Institution Dropdown
- Re-use existing form field and function (Screenshot: 01-00_C-Mentor-Register-page typing-email address.jpg)
- Validation styling with checkmark on the right side (Screenshot: 01-00_D-Mentor-Register-page typing-pass.jpg)
- Institution Dropdown option (Screenshot: 01-00_E-Mentor-Register-page typing-done.jpg & Screenshot: 01-00_F-Mentor-Register-page-select institution.jpg)
- Remove OR line and Connect using Linked In
- Register button take user to Terms and Condition screen flow
- Update Signature to Email Address for Terms and Condition
MOBILE VERSION
- No update for Selection screen (Screenshot: 01-00_A-Mentee-Register-selected-role.jpg)
- Register modal window need to be fluid for mobile (Screenshot: 01-00_B-Mentor-Register-page-01-default.jpg)
- Form flow for mobile (Screenshot: 01-00_C-Mentor-Register-page-02-typing-email.jpg
Screenshot: 01-00_D-Mentor-page-03-typing-pass.jpg
Screenshot: 01-00_E-Mentor-Register-page-04-select-institution.jpg)
- Institution Dropdown need to be fluid as browser width (Screenshot: 01-00_F-Mentor-Register-page-05-institution.jpg)
- Make user updated Email address look good for mobile screen
3). Create Profile
TABLET VERSION
Screenshot: 02-00_D-Register-professional interest.jpg
- Under Basic Information tab, Add new field below Skype Username for “LinkedIn URL”
- For Interest tab update the Choose Your Interest to be display text selection
- On Step 2 Choose Your Interest, update the screen with new look
- There are tabs on top for Professional Interest and Personal Interest
- User need make selection for both Professional Interest and Personal Interest before can proceed to the next screen
- There are 3 selection placed on top
- User only able to select 3 options from all radio buttons (Screenshot: 02-00_B-Mentor-Register-Interests02.jpg)
- Match options like storyboard look
- This is Personal Interest tab look (Screenshot: 02-00_C-Mentor-Register- Interests03.jpg)
- Selected radio need captured on top (Screenshot: 02-00_D-Mentor-Register- Interests04.jpg)
- Keep existing flow for tablet (Screenshot: 02-00_E-Mentor-Register-introvideo.jpg)
- After click Done button need take to new Program Selection explained below
MOBILE VERSION
- Create Profile look for mobile screen (Screenshot: 02-00_A-Mentor-Register-Interests01.jpg)
- For Step 2 - Choose Your Interest, below the tab, text need placed below the number
- By default you need show up the empty selection on top (Screenshot: 02-00_B-Mentor-Register-Interests02.jpg)
- All options need use 2 columns format
- Click Next button need re-use existing flow (Screenshot: 02-00_C-Mentor-Register-introvideo.jpg)
- After click Done button need take to new Program Selection explained below
4). Program Selection
TABLET VERSION
Screenshot: 03-01_Program selection.jpg
Screenshot: 03-02_Program selection-add goal.jpg
Screenshot: 03-04_Program selection-document.jpg
- This is new screen for Mentor flow
- On top there’s user information, re-use existing layout
- Mentorship Programs displayed as sliding like existing function
Create New Program Step
- Create New Program, match all fields like storyboard look
- Selected Mentee can be dropdown for now.
- Progress Dots placed on the bottom
- User need able to checked on/off the table
- Follow radio button styling on Mobile storyboard for checked off styling
- Click Next button take user to next screen to Add the Goal step
Add New Goal/Tasks Step
- Match fields like storyboard look
- Goals Categories and Selected Mentee can using dropdown for now
- Tasks area placed on the bottom
- Need make the Tasks functionality to add New Tasks working (Screenshot: 03-03_Program selection-add new task.jpg)
- Match fields like storyboard look
- Re-use existing function when Add new task
Document Step
- This is When user add Document and Links
- Click Add Links/Add Files need load modal window in the bottom like existing function
MOBILE VERSION
Screenshot: 03-01_Program selection.jpg
- Program Selection title area need displayed as separate lines for mobile
Create New Program Step
- Create New Program, match all fields like storyboard look
- Hide date column for mobile
- Progress Dots placed on the bottom
- User need able to checked on/off the table
- Follow radio button styling on Mobile storyboard for checked off styling
- Click Next button take user to next screen to Add the Goal step
Add New Goal/Tasks Step
Screenshot: 03-02_Program selection-add goal.jpg
- Match fields like storyboard look
- Goals Categories and Selected Mentee can using dropdown for now
- Tasks area placed on the bottom
- Need make the Tasks functionality to add New Tasks working (Screenshot: 03-03_Program selection-add new task.jpg)
- For mobile all fields need displayed on separate lines
- Re-use existing function when Add new task
Document Step
Screenshot: 03-04_Program selection-document.jpg
- Use fluid layout for Goals and Useful links
5). Dashboard
TABLET VERSION
Screenshot: 04_A-Mentor-Dashboard.jpg
- For Mentor, display “+” button under Your Tasks
- Expand Your Tasks to use full-width
MOBILE VERSION
Screenshot: 04_A-Mentor-Dashboard.jpg
- Display “+” button under Your Tasks
- Make sure Meeting & Programs removed from all screen
6). Goals
TABLET VERSION
Screenshot: 04_B-Mentor-Goals-Goal-expand.jpg
- This is update Goals screen
- Add Program Name and Mentor name on the 1st column
- When click each Goals need show the detail information
- User thumbnail, title and social icon buttons placed on the right side
- There’s “+” button for Mentor flow
- Remove average performance, rating and expertise
- Need display full-width of Your Tasks
MOBILE VERSION
Screenshot: 04_B-Mentor-Goals.jpg
- Updated Goal title need display on separated lines
- Click each Goal need expand the content (Screenshot: 04_C-Mentor-Goals-Goal-expand.jpg)
- No need display as modal window, keep existing function
- Tasks place on the bottom of user information
7). Programs
- Access Programs from sidebar menu (Screenshot: 05_A-Mentor-Navigation.jpg)
TABLET VERSION
- This is updated Programs screen
- There are 2 tabs for Programs and My Programs
Programs Tab
05_B-Mentor-Mentorship-program-Programs.jpg
- Match layout and content like storyboard look
- On header, there’s Suggested Mentorship Program and progress bar on the right side
- You can re-use card layout on existing prototype
- Click each card need take user to Program Details below
My Programs Tab
Screenshot: 05_C-Mentor-My Programs.jpg
- For this tab, you need display another sub-tabs for Ongoing and Closed
- Make sure the tabs working. Re-use existing content
- Each card content 1 program name
- Click each card need take user to My Program Details below
MOBILE VERSION
Programs Tab
Screenshot: 05_B-Mentor-Mentorship-programs.jpg
- Display card as separated lines for mobile
My Programs Tab
Screenshot: 05_C-Mentor-My Programs.jpg
- Display card as separated lines for mobile
8). Program Details
TABLET VERSION
My Programs Details
Screenshot: 05_D-Mentor-My Own Program detail.jpg
- Remove Add Goal button for Mentor flow
- Add new tabs for Goals and Tasks
- Displayed Roles & Responsibility in page like Mentee flow. Ignore storyboard look
Programs Detail
Screenshot: 04_C-Mentor-Program Detail.jpg
- Remove Add Goal button for Mentor flow
- Add new tabs for Goals and Tasks
MOBILE VERSION
My Programs Detail
Screenshot: 05_D-Mentor-My Own Program detail.jpg
- Add new options for Goals and Tasks on the dropdown
- Updated options look (Screenshot: 04_H-Mentee-Mentorship-program-C00-Tabs-selection.jpg)
Program Details
- No storyboard provided, re-use from Mentor flow
- Add new options for Goals and Tasks on the dropdown
9). Documents Tab
TABLET VERSION
Screenshot: 06_A-Mentor-add file and links.jpg
- Update title for every sections
- There are Add Files and Add links on the right side of title
- Click Add files need able to show the modal window on the bottom screen.
- Re-use existing function like on prototype (Screenshot: 06_B-Mentor-add new file.jpg)
- Click Add links need able to show the modal window on the bottom screen (Screenshot: 06_C-Mentor-add links.jpg)
MOBILE VERSION
Screenshot: 06_A-Mentor-add file and links.jpg
- Just need display + button on the right side without the text
- Add new files modal window look (Screenshot: 06_B-Mentor-add files.jpg)
- Add new links modal window look (Screenshot: 06_C-Mentor-add links.jpg)
10). Performance Evaluation Tab
TABLET VERSION
Screenshot: 07_A-Mentor-performance evaluation.jpg
- Display some questions for Questionnaire
- Overall comments placed on the bottom
- Match content like storyboard look
MOBILE VERSION
Screenshot: 07-Mentor-Performance Evaluation.jpg
- All radio buttons need displayed in separated lines
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS
- Use SCSS as CSS Pre-Processor.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
Images
- Images should be properly compressed while still having good visual quality.
- Icons need created as SVG format
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Android Browser on Mobile
- Safari Browser on Mobile
- Android Browser on Tablet
- Safari Browser on Tablet
The main task of this challenge is to update existing UI Prototype of the Living Progress - Mentor ME based on the provided Storyboard design and specification below
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files:https://drive.google.com/drive/folders/0B31nrwic_6z0NXVub1dNWS1Fdzg?usp=sharing
Storyboard.zip - Mobile Storyboard Screen
Ionic-proto.zip - Ionic Prototype as Base Updates
Important!
- Suggest best practice Responsive Web Design Breakpoints for Mobile layout
- Base of existing prototype created using ionic framework.
- Use existing SCSS for CSS Pre-Processor when you create new stylesheet
- You MUST make sure all graphic look sharp on Retina and Standard Size.
- DO NOT override existing libraries, If you want to create custom styling from existing library, create separate files
- DO NOT change indentation of current code structure, we need easily track your updated codes
- DO NOT break existing functions after your updates. Do multiple check your solution for every pages!
- DO NOT change existing images, you just need work on how fluid mobile layout should look
- FOLLOW existing HTML/JS/CSS code formatting.
- Create separated scss for mobile view media query
- Put clear documentation if you update existing HTML/JS/CSS codes and let us know the reasons.
- Make sure your updated prototype remain look good and working on Tablet and mobile screens
- Compare existing prototype and related storyboard screen and read instruction on each page like explained below.
- Important: On some provided screen are just meant to guide you to show the existing flow and no need to update the prototype. Pay attention to every screens information
- Check provided storyboard for Tablet and Mobile version
- You need make sure All Pages inside prototype look good and have great functionality
- Lets discuss via challenge forum if you need clarification on some things.
Login Credentials
- There are 2 flows you can access for this prototype:
Mentor Flow:
Username: mentor
Password: 123
Mentee Flow:
Username: mentee
Password: 123
A). Mentee Flow Updates
0). Skype and Message Icons
- We need apply href link for all Skype and Message buttons on the application
- For Skype button, follow from this link: http://stackoverflow.com/questions/11598925/is-there-an-href-attribute-for-skype-like-mailto-or-tel
- For Message button, follow from this link: http://stackoverflow.com/questions/8510720/sms-text-from-hyperlink-on-phone-browser/8510812#8510812
1). Login updates
- Remove OR line
- Remove all social icons
- Make sure form box height reduced after removal for tablet and iphone layout
2). Register Screen
TABLET VERSION
Screenshot: 01-00_A-Mentee-Register-page selections.jpg
- Click Register button from landing page, and go to Register modal window. No update to this selection screen.
- Click Next button need load the new modal window
- This is new screen we need display this modal window after user click NEXT button on Register modal window (Screenshot: 01-00_B-Mentee-Register-page-01-default.jpg)
- Match field like storyboard look
- Re-use existing form field and function (Screenshot: 01-00_C-Mentee-Register-page-02-typing-email.jpg)
- Validation styling with checkmark on the right side (Screenshot: 01-00_D-Mentee-page-03-typing-pass.jpg & Screenshot: 01-00_E-Mentee-Register-page-04-typing-institution.jpg)
- No need display OR line and Connect Using Facebook button
- Register button take user to Terms and Condition screen flow (Screenshot: 02-00_A-Mentee-termscond-01-terms.png)
- For this screen update Signature to Email Address (Screenshot: 02-00_B-Mentee-termscond-02-waiver.jpg)
MOBILE VERSION
Screenshot: 01-00_A-Mentee-Register-selected-role.jpg
- No update for Selection screen (Screenshot: 01-00_B-Mentee-Register-page-01-default.jpg)
- Register modal window need to be fluid for mobile
- Form flow for mobile (Screenshot: 01-00_C-Mentee-Register-page-02-typing-email.jpg, Screenshot: 01-00_D-Mentee-page-03-typing-pass.jpg, Screenshot: 01-00_E-Mentee-Register-page-04-typing-institution.jpg, Screenshot: 02-00_A-Mentee-termscond-01-terms.png)
- Make user updated Email address look good for mobile screen (Screenshot: 02-00_B-Mentee-termscond-02-waiver.jpg)
3). Create Profile
TABLET VERSION
- Continue button take user to Create Profile flow (Screenshot: 02-00_C-Register-step01.jpg)
- Step 1, remove the “or load from social network”
- Remove all social buttons
- Add new field below Skype Username for “Facebook URL”
- On Step 2 Choose Your Interest, update the screen with new look (Screenshot: 02-00_D-Register-professional interest.jpg)
- There are tabs on top for Professional Interest and Personal Interest
- User need make selection for both Professional Interest and Personal Interest before can proceed to the next screen
- There are 3 selection placed on top
- User only able to select 3 options from all radio buttons
- Match options like storyboard look
- This is Personal Interest tab look (Screenshot: 02-00_E-Register-personal interest.jpg)
- Next button remain works to display Step 3 Define Goals
MOBILE VERSION
- Create Profile look for mobile screen (Screenshot: 02-00_C-Register-step01.jpg)
- For Step 2 - Choose Your Interest, below the tab, text need placed below the number (Screenshot: 02-00_D-Register-professional interest.jpg)
- All options need use 2 columns format
- Page look for Personal Interest (Screenshot: 02-00_E-Register-personal interest.jpg)
4). Dashboard
TABLET VERSION
Screenshot: 04_A-Mentee-Dashboard.jpg
- For Mentee, remove “+” button under Your Tasks
- Expand Your Tasks to use full-width
MOBILE VERSION
Screenshot: 04_A-Mentee-Dashboard.jpg
- Remove “+” button under Your Tasks
- Make sure Meeting & Programs removed from all screen
5). Goals
TABLET VERSION
Screenshot: 04_B-Mentee-Goals-02-Goal-expand.jpg
- This is update Goals screen
- Add Program Name and Mentor name on the 1st column
- When click each Goals need show the detail information
- User thumbnail, title and social icon buttons placed on the right side
- Remove average performance, rating and expertise
- Need display full-width of Your Tasks
MOBILE VERSION
Screenshot: 04_B-Mentee-Goals.jpg
- Updated Goal title need display on separated lines
- Click each Goal need expand the content (Screenshot: 04_C-Mentee-Goals-02-Goal-expand-details mentor.jpg)
- No need modal window, display expanded below each Goal
- Tasks place on the bottom of user information (Screenshot: 04_D-Mentee-Goals-details task.jpg)
6). Tasks
TABLET VERSION
Screenshot: 04_C-Mentee-Tasks-01-Default.jpg
- Remove “+” button from Mentee flow
- There’s Program name below the Goal Title
- Match date information on the right side of each task
- Click each task need expand more information for User Assignment, Due Date and Estimated Date
(Screenshot: 04_D-Mentee-Tasks-expand details.jpg)
MOBILE VERSION
Screenshot: 04_E-Mentee-Tasks-01-Default.jpg
- Make sure tasks and date displayed in single line
- When expand the tasks need load more information like on Tablet (Screenshot: 04_F-Mentee-Tasks-expand details.jpg)
- Due Date and Estimated Time displayed as separate lines
7). Programs
TABLET VERSION
- This is updated Programs screen
- There are 2 tabs for Programs and My Programs
Programs Tab
Screenshot: 05_A-Mentee-Mentorship-program-Program-list.jpg
- Match layout and content like storyboard look
- On header, there’s Suggested Mentorship Program and progress bar on the right side
- Click each card need take user to Program Details below
My Programs Tab
Screenshot: 05_B-Mentee-My Own Program.jpg
- For this tab, you need display another sub-tabs for Ongoing and Closed
- Match layout and content like storyboard look
- Make sure the tabs working. Re-use existing content.
- Each card content 1 program name
- Click each card need take user to My Program Details below
MOBILE VERSION
Programs Tab
Screenshot: 05_A-Mentee-Mentorship-program-Program-list.jpg
- Display card as separated lines for mobile
My Programs Tab
Screenshot: 05_B-Mentee-My Own Program.jpg
- Display card as separated lines for mobile
8). Program Details
TABLET VERSION
My Programs Details
Screenshot: 04_E-Mentee-Mentorship-program-Tabs-Summary.jpg
- Remove Add Goal button for Mentee flow
- Add new tabs for Goals and Tasks
Programs Detail
04_F-Mentee-Institution Programs screen.jpg
- Remove Add Goal button for Mentee flow
- Add new tabs for Goals and Tasks
MOBILE VERSION
My Programs Detail
Screenshot: 04_G-Mentee-Mentorship-program-Tabs-Summary.jpg
- Add new options for Goals and Tasks on the dropdown
- Updated options look (Screenshot: 04_H-Mentee-Mentorship-program-C00-Tabs-selection.jpg)
Program Details
Screenshot: 04_I-Mentee-Institution Programs screen.jpg
- Add new options for Goals and Tasks on the dropdown
9). Documents Tab
TABLET VERSION
Screenshot: 06_A-Mentee-add new files and links.jpg
- Update title for every sections
- There are Add Files and Add links on the right side of title
- Click Add files need able to show the modal window on the bottom screen.
- Re-use existing function like on prototype (Screenshot: 06_B-Mentee-add new files.jpg)
- Click Add links need able to show the modal window on the bottom screen. Screenshot: 06_C-Mentee-add new links.jpg
MOBILE VERSION
Screenshot: 06_A-Mentee-add new files and links.jpg
- Just need display + button on the right side without the text
- Add new files modal window look (Screenshot: 06_B-Mentee-add files.jpg)
- Add new links modal window look (Screenshot: 06_C-Mentee-add link.jpg)
10). Goals Tab
TABLET VERSION
Screenshot: 06_D-Mentee-goals.jpg
- Re-use updated Goals layout
- Need able to click each Goal
MOBILE VERSION
Screenshot: 06_D-Mentee-program-tab-goals.jpg
- Title need displayed on separated line
- Progress bar, date and time need displayed in separated line
11). Tasks Tab
TABLET VERSION
Screenshot: 06_E-Mentee-tasks.jpg
- Re-use updated Tasks layout
- Need able to click each Task to expand the information
MOBILE VERSION
Screenshot: 06_E-Mentee-program-tab-tasks.jpg
- Task title and date need displayed in single line
- Need able to click each Task to expand the information
12). Performance Evaluation Tab
TABLET VERSION
Screenshot: 07_A-Mentee-performance evaluation.jpg
- Display some questions for Questionnaire
- Overall comments placed on the bottom
- Match content like storyboard look
MOBILE VERSION
Screenshot: 07-Mentee-Performance Evaluation.jpg
- All radio buttons need displayed in separated lines
B). Mentor Flow Updates
0). Skype and Message Icons
- We need apply href link for all Skype and Message buttons on the application
- For Skype button, follow from this link: http://stackoverflow.com/questions/11598925/is-there-an-href-attribute-for-skype-like-mailto-or-tel
- For Message button, follow from this link: http://stackoverflow.com/questions/8510720/sms-text-from-hyperlink-on-phone-browser/8510812#8510812
1). Login updates
- Remove OR line
- Remove all social icons
- Make sure form box height reduced after removal for tablet and iphone layout
2). Register Screen
TABLET VERSION
Screenshot: 01-00_A-Mentor-Register-page selections.jpg
- Click Register button from landing page, and go to Register modal window. No update to this selection screen.
- Click Next button need load the new modal window
- This is new screen we need display this modal window after user click NEXT button on Register modal window (Screenshot: 01-00_B-Mentor-Register-page default.jpg)
- Notice there’s new field for Institution Dropdown
- Re-use existing form field and function (Screenshot: 01-00_C-Mentor-Register-page typing-email address.jpg)
- Validation styling with checkmark on the right side (Screenshot: 01-00_D-Mentor-Register-page typing-pass.jpg)
- Institution Dropdown option (Screenshot: 01-00_E-Mentor-Register-page typing-done.jpg & Screenshot: 01-00_F-Mentor-Register-page-select institution.jpg)
- Remove OR line and Connect using Linked In
- Register button take user to Terms and Condition screen flow
- Update Signature to Email Address for Terms and Condition
MOBILE VERSION
- No update for Selection screen (Screenshot: 01-00_A-Mentee-Register-selected-role.jpg)
- Register modal window need to be fluid for mobile (Screenshot: 01-00_B-Mentor-Register-page-01-default.jpg)
- Form flow for mobile (Screenshot: 01-00_C-Mentor-Register-page-02-typing-email.jpg
Screenshot: 01-00_D-Mentor-page-03-typing-pass.jpg
Screenshot: 01-00_E-Mentor-Register-page-04-select-institution.jpg)
- Institution Dropdown need to be fluid as browser width (Screenshot: 01-00_F-Mentor-Register-page-05-institution.jpg)
- Make user updated Email address look good for mobile screen
3). Create Profile
TABLET VERSION
Screenshot: 02-00_D-Register-professional interest.jpg
- Under Basic Information tab, Add new field below Skype Username for “LinkedIn URL”
- For Interest tab update the Choose Your Interest to be display text selection
- On Step 2 Choose Your Interest, update the screen with new look
- There are tabs on top for Professional Interest and Personal Interest
- User need make selection for both Professional Interest and Personal Interest before can proceed to the next screen
- There are 3 selection placed on top
- User only able to select 3 options from all radio buttons (Screenshot: 02-00_B-Mentor-Register-Interests02.jpg)
- Match options like storyboard look
- This is Personal Interest tab look (Screenshot: 02-00_C-Mentor-Register- Interests03.jpg)
- Selected radio need captured on top (Screenshot: 02-00_D-Mentor-Register- Interests04.jpg)
- Keep existing flow for tablet (Screenshot: 02-00_E-Mentor-Register-introvideo.jpg)
- After click Done button need take to new Program Selection explained below
MOBILE VERSION
- Create Profile look for mobile screen (Screenshot: 02-00_A-Mentor-Register-Interests01.jpg)
- For Step 2 - Choose Your Interest, below the tab, text need placed below the number
- By default you need show up the empty selection on top (Screenshot: 02-00_B-Mentor-Register-Interests02.jpg)
- All options need use 2 columns format
- Click Next button need re-use existing flow (Screenshot: 02-00_C-Mentor-Register-introvideo.jpg)
- After click Done button need take to new Program Selection explained below
4). Program Selection
TABLET VERSION
Screenshot: 03-01_Program selection.jpg
Screenshot: 03-02_Program selection-add goal.jpg
Screenshot: 03-04_Program selection-document.jpg
- This is new screen for Mentor flow
- On top there’s user information, re-use existing layout
- Mentorship Programs displayed as sliding like existing function
Create New Program Step
- Create New Program, match all fields like storyboard look
- Selected Mentee can be dropdown for now.
- Progress Dots placed on the bottom
- User need able to checked on/off the table
- Follow radio button styling on Mobile storyboard for checked off styling
- Click Next button take user to next screen to Add the Goal step
Add New Goal/Tasks Step
- Match fields like storyboard look
- Goals Categories and Selected Mentee can using dropdown for now
- Tasks area placed on the bottom
- Need make the Tasks functionality to add New Tasks working (Screenshot: 03-03_Program selection-add new task.jpg)
- Match fields like storyboard look
- Re-use existing function when Add new task
Document Step
- This is When user add Document and Links
- Click Add Links/Add Files need load modal window in the bottom like existing function
MOBILE VERSION
Screenshot: 03-01_Program selection.jpg
- Program Selection title area need displayed as separate lines for mobile
Create New Program Step
- Create New Program, match all fields like storyboard look
- Hide date column for mobile
- Progress Dots placed on the bottom
- User need able to checked on/off the table
- Follow radio button styling on Mobile storyboard for checked off styling
- Click Next button take user to next screen to Add the Goal step
Add New Goal/Tasks Step
Screenshot: 03-02_Program selection-add goal.jpg
- Match fields like storyboard look
- Goals Categories and Selected Mentee can using dropdown for now
- Tasks area placed on the bottom
- Need make the Tasks functionality to add New Tasks working (Screenshot: 03-03_Program selection-add new task.jpg)
- For mobile all fields need displayed on separate lines
- Re-use existing function when Add new task
Document Step
Screenshot: 03-04_Program selection-document.jpg
- Use fluid layout for Goals and Useful links
5). Dashboard
TABLET VERSION
Screenshot: 04_A-Mentor-Dashboard.jpg
- For Mentor, display “+” button under Your Tasks
- Expand Your Tasks to use full-width
MOBILE VERSION
Screenshot: 04_A-Mentor-Dashboard.jpg
- Display “+” button under Your Tasks
- Make sure Meeting & Programs removed from all screen
6). Goals
TABLET VERSION
Screenshot: 04_B-Mentor-Goals-Goal-expand.jpg
- This is update Goals screen
- Add Program Name and Mentor name on the 1st column
- When click each Goals need show the detail information
- User thumbnail, title and social icon buttons placed on the right side
- There’s “+” button for Mentor flow
- Remove average performance, rating and expertise
- Need display full-width of Your Tasks
MOBILE VERSION
Screenshot: 04_B-Mentor-Goals.jpg
- Updated Goal title need display on separated lines
- Click each Goal need expand the content (Screenshot: 04_C-Mentor-Goals-Goal-expand.jpg)
- No need display as modal window, keep existing function
- Tasks place on the bottom of user information
7). Programs
- Access Programs from sidebar menu (Screenshot: 05_A-Mentor-Navigation.jpg)
TABLET VERSION
- This is updated Programs screen
- There are 2 tabs for Programs and My Programs
Programs Tab
05_B-Mentor-Mentorship-program-Programs.jpg
- Match layout and content like storyboard look
- On header, there’s Suggested Mentorship Program and progress bar on the right side
- You can re-use card layout on existing prototype
- Click each card need take user to Program Details below
My Programs Tab
Screenshot: 05_C-Mentor-My Programs.jpg
- For this tab, you need display another sub-tabs for Ongoing and Closed
- Make sure the tabs working. Re-use existing content
- Each card content 1 program name
- Click each card need take user to My Program Details below
MOBILE VERSION
Programs Tab
Screenshot: 05_B-Mentor-Mentorship-programs.jpg
- Display card as separated lines for mobile
My Programs Tab
Screenshot: 05_C-Mentor-My Programs.jpg
- Display card as separated lines for mobile
8). Program Details
TABLET VERSION
My Programs Details
Screenshot: 05_D-Mentor-My Own Program detail.jpg
- Remove Add Goal button for Mentor flow
- Add new tabs for Goals and Tasks
- Displayed Roles & Responsibility in page like Mentee flow. Ignore storyboard look
Programs Detail
Screenshot: 04_C-Mentor-Program Detail.jpg
- Remove Add Goal button for Mentor flow
- Add new tabs for Goals and Tasks
MOBILE VERSION
My Programs Detail
Screenshot: 05_D-Mentor-My Own Program detail.jpg
- Add new options for Goals and Tasks on the dropdown
- Updated options look (Screenshot: 04_H-Mentee-Mentorship-program-C00-Tabs-selection.jpg)
Program Details
- No storyboard provided, re-use from Mentor flow
- Add new options for Goals and Tasks on the dropdown
9). Documents Tab
TABLET VERSION
Screenshot: 06_A-Mentor-add file and links.jpg
- Update title for every sections
- There are Add Files and Add links on the right side of title
- Click Add files need able to show the modal window on the bottom screen.
- Re-use existing function like on prototype (Screenshot: 06_B-Mentor-add new file.jpg)
- Click Add links need able to show the modal window on the bottom screen (Screenshot: 06_C-Mentor-add links.jpg)
MOBILE VERSION
Screenshot: 06_A-Mentor-add file and links.jpg
- Just need display + button on the right side without the text
- Add new files modal window look (Screenshot: 06_B-Mentor-add files.jpg)
- Add new links modal window look (Screenshot: 06_C-Mentor-add links.jpg)
10). Performance Evaluation Tab
TABLET VERSION
Screenshot: 07_A-Mentor-performance evaluation.jpg
- Display some questions for Questionnaire
- Overall comments placed on the bottom
- Match content like storyboard look
MOBILE VERSION
Screenshot: 07-Mentor-Performance Evaluation.jpg
- All radio buttons need displayed in separated lines
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS
- Use SCSS as CSS Pre-Processor.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
Images
- Images should be properly compressed while still having good visual quality.
- Icons need created as SVG format
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Android Browser on Mobile
- Safari Browser on Mobile
- Android Browser on Tablet
- Safari Browser on Tablet