Challenge Overview
Welcome to Living Progress - Build - Mentor ME - Tablet to Mobile Responsive Conversion UI Prototype Challenge
The main task of this challenge is to convert completed Tablet UI Prototype of the Living Progress - Mentor ME into Responsive Mobile 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_6z0QlhOX1FzeWh6RWs?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.
- For this challenge, mostly you need make sure prototype display proper layout on Mobile screen only.
Your prototype submission need support Mobile Size requirements:
- Provided storyboard using iPhone Retina Portrait display (750px).
- Make sure your submission support Standard layout with 320px width
- Make user graphics look sharp on Retina and Standard version
- All pages need use fluid layout when transform into Landscape or Portrait view.
- You might need adjust some element placement in 320px width screen size. Let’s discus any doubt about adjustments
- We only provided some screens for mobile, we need your help to build fluid solution for every mobile pages for this challenge.
- Please do your best adjust the layout for mobile, we’ll ask more edits later on Final Fixes
Login Credentials
- There are 2 flow you can access for this prototype:
Mentor Flow:
Username: mentor
Password: 123
Mentee Flow:
Username: mentee
Password: 123
A). Existing UI Prototype Updates:
1). Page and Functionality Removal
- We need remove these elements from prototype:
- Meeting (Calendar)
- Messaging
- Forums
- Remove related Messaging button on top right across the pages
- on Dashboard page, remove meeting box. Need expand Tasks box to filled the content area
- on Sidebar menu, remove Meetings
- Also we need to make a note to remove all the meeting functionality from the application.
- Make sure Meeting not displayed on Mentee and Mentor flow
2). Edit Profile
- We can re-use existing Create Profile for Edit Profile layout
- On Profile page, add Edit button on the top right to let user navigate to Edit Profile
3). Existing Prototype Issues
- Mentor Match Checkboxes Styling missing on Firefox
- Meetings menu not set as active state on Meetings page
- Message icons need in correct placement, right now it look cut-off
- Looking forward your suggestion to fix some issues on prototype
B). Responsive Mobile UI Prototype Page Requirements:
1). Splash Screen
Screenshot: X00-A-Mentee-Splash.png
Page url: index.html/#/splash
- Background image need covered whole screen. Re-use existing images.
- Mentor ME Logo placed on top and centered
- You might need adjust the logo size?
- Text need fits within the screen
- Loading progress placed below the text. Re-use existing progress. Ignore storyboard
2). Landing Page
Screenshot: X01-A-Mentee-login-B01-First-timer.png
Screenshot: X01-A-Mentee-login-B02-First-timer.png
Page url: index.html/#/login
- Mentor ME Logo placed on top and centered
- You might need adjust the logo size?
- Text slider need user proper padding and margin
- Login and Register button placed below the slider
- Terms and Conditions text placed below the buttons for the First Time user
- These are screens for existing user, button need wrapped correctly inside the mobile sccreens
(Screenshot: X01-A-Mentee-login-A01-Existing.png & Screenshot: X01-A-Mentee-login-A02-Existing.png)
- Also, there’s no Terms condition text for this screen
3). Login
Screenshot: X01-A-Mentee-login-C01-login-default.png
Page url: index.html/#/login
- Login form loaded after user click the Login button
- Logo need adjust the size and need centered
- Form need adjust the size and need centered
- x button to close modal need placed on top right
- Login form need adapting the browser screen size
- Type on Username and Password text field need works like existing (Screenshot: X01-A-Mentee-login-C02-login-typing.png, Screenshot: X01-A-Mentee-login-C03-login-typing.png)
- Screen after user filled the data (Screenshot: X01-A-Mentee-login-C04-login-done.png)
- Re-use existing error styling, make sure fits for mobile screen size (Screenshot: X01-A-Mentee-login-C05-login-error.png)
4). Register
Screenshot: X02-A-Mentee-Register-A01-Default.png
Page url: index.html/#/login
- Login form loaded after user click the Register button
- Logo need adjust the size and need centered
- Form need adjust the size and need centered
- x button to close modal need placed on top right
- For mobile screen you need make the role selection swipeable to let user select Mentor and Mentee (Screenshot: X02-A-Mentee-Register-A02-swipe.png)
- Re-use existing images for Mentor and Mentee
- Make sure selected function still works (Screenshot: X02-A-Mentee-Register-A03-selected-role.png)
5). Terms & Condition
Screenshot: X03-A-Mentee-Register-01-Termscon.png
Page url: index.html/#/term
- User access this page from Terms & Condition link below the Login and Register buttons
- Basically page need to be fluid for mobile screen
- Match padding/margin like existing storyboard
- Blue bar need remain sticked on the bottom of screen
- After user click Agree then another “Parent/Guardian Consent ” form show up (Screenshot: X03-A-Mentee-Register-02-Termscon.png)
- For this form, background need covered whole browser screen
- x button placed on top right and use black color
- Label and input need displayed as separate lines
- Continue button need placed on the bottom and width covered browser
6). Create Profile
Step 1
Screenshot: X04-A-Mentee-A01-Step01.png
Page url: index.html/#/register
- For this page, you need build the make sure fluid layout adapted for mobile screen
- Match padding/margin form like provide storyboard
- There’s green line below the title, need consistent across all pages.
- Profile pictures and text need placed centered
- Label and text input need to be fluid
- Match padding/margin and font size for all buttons on header and bottom bar
- Match font size for label and any form element
Step 2
Screenshot: X04-A-Mentee-A01-Step02.png
- When landed on this screen, form need displayed from top
- For mobile screen you need displayed 2 circle per row
- Make sure they not overlapping
- Selected function need remain works
- Match padding/margin form like provide storyboard
- All circle options need wrapped inside the white background
Step 3
Screenshot: X04-A-Mentee-A01-Step03-1.png
- When landed on this screen, form need displayed from top
- Match padding/margin form like provide storyboard
- Make sure text wrapped inside the white background
- Graphic need placed centered of form
Add Your Goals
Screenshot: X04-A-Mentee-A01-Step03-2A.png
- Fix the header bar to follow storyboard
- 3 circles on top need placed correctly like storyboard look
- Number indicator placed on the left side of circle placeholder
- Match padding/margin form like provide storyboard
- Each row need displayed correctly for mobile
- Notice the icons become smaller on mobile
- Select circle need add to selection on top (Screenshot: X04-A-Mentee-A01-Step03-2B.png)
- Sample when select another row (Screenshot: X04-A-Mentee-A01-Step03-2C.png & Screenshot: X04-A-Mentee-A01-Step03-2D.png)
- After click Done button user take back to Add Your Goal screen with selected Goals (Screenshot: X04-A-Mentee-A01-Step03-3.png)
- Number indicator placed on the left side, image on center and x button on the right side
- Click Done button take user to Dashboard
6). Dashboard
Screenshot: X05-A-Mentee-Dashboard.png
Page url: index.html/#/dashboard
- This is dashboard screen look for mobile screen
- On the user information area, Progress, Target Date and Time left need displayed correctly inside the purple background
- Purple background area should not in fixed placement for mobile, need scrolling with the page
- All boxes need use fluid width that covered mobile screen
- Mentorship Program area for mobile not display slideshow, but as separated lines
- Match each slide height and use fluid width
- Notice Mentorship Program have left and right margin
- Your task and Schedule Meeting boxes need displayed in separated lines
7). Sidebar Menu
Screenshot: X00-A-Mentee-Navigation.png
- User see this screen after click menu button on the top left side of header bar
- For mobile screen, you can re-use existing navigation function, ignore storyboard look
- But, you need make sure logo and another navigation menu fits inside the left sidebar without overlapping each other
- Settings and Logout remain placed on the bottom
8). Activities
Screenshot: X06-A-Mentee-Activities.png
Page url: index.html/#/activity
- User landed on this screen from Activity menu
- Match padding/margin like provided storyboard
- Image need use fluid width
- Text description placed below the image
9). Goals
Screenshot: X07-A-Mentee-Goals-01-Default.png
Page url: index.html/#/goal
- User landed on this screen from Activity menu
- Match padding/margin like provided storyboard
- On purple background area, you need covert current data into a slider for mobile view
- 1st slide: Displayed Current Goals and Overdue
- 2nd slide: There’s this month completed area and progress bar (Screenshot: X07-A-Mentee-Goals-02-slide-01.png)
- 3rd slide: Upcoming Goals (Screenshot: X07-A-Mentee-Goals-02-slide-02.png)
- Re-use existing slide function
- Sort By need to be hidden for Goals
- Goal title need displayed in single line
- Progress Circle, Rate of Progress, Target Date and Time left displayed as separate rows
- Click each goals need load Goal Details (Screenshot: X07-A-Mentee-Goals-03-Details-mentor.png)
- This should not in separated page, display it as existing desktop function
- You need create tab layout for Related Mentor and Tasks
- Related Mentor will display all related information for Mentor
- Your tasks will be content for Your Tasks in fluid width (Screenshot: X07-A-Mentee-Goals-03-Details-Task.png)
- Click blue + button need display Add New Goal (Screenshot: X07-A-Mentee-Goals-04-New-goals.png)
- All rows need displayed in separate lines
- Add New Goal width need displayed as fluid width
10). Tasks
Screenshot: X08-A-Mentee-Tasks-01-Default.png
Page url: index.html/#/task
- On the purple background area, all content need wrapped correctly
- Match padding/margin like provided screenshot
- Add New tasks after user focus on Add New task input (Screenshot: X08-A-Mentee-Tasks-02-New-task.png)
- Notice normal text hidden on the right side of Task Priority
- Cancel and Add New Task button need placed on the left and right side
11). Mentor Matches
Screenshot: X10-A-Mentee-Mentor-matches-01-Criteria-selections.png
Page url: index.html/#/mentor-match
- This is Mentor Matches screen
- Find Match placed on the right side of dropdown
- Keep use existing checkboxes styling
- Each criterias need use fluid width
- “If checked” text need displayed full text like storyboard look
- Click Find Match button take user result screen (Screenshot: X10-A-Mentee-Mentor-matches-02-found-results.png)
- Purple background area need displayed as slide function
- 1st Slide: Suggested Mentors
- 2nd Slide: Categories and Main expertise (Screenshot: X10-A-Mentee-Mentor-matches-03-found-results.png)
- For this row, Mentor information placed on top
- Average Performance & Match Expertise displayed on the bottom
- Click each row need take user to Mentor Profile
12). Mentor Profile
Screenshot: X11-A-Mentee-Mentor-profile.png
Page url: index.html/#/profile
- Background image need fits inside the browser width
- Each rows need displayed as separated lines
- Refer to storyboard for detail placement
13). Mentorship Program
Screenshot: X12-A-Mentee-Mentorship-program-A01-list.png
Page url: index.html/#/mentorship-pro
- User landed on this screen from sidebar menu then Click Programs
- Purple background area need displayed as slider function
- 1st Slide: Suggested Mentorship Program
- 2nd Slide: Ongoing and Match (Screenshot: X12-A-Mentee-Mentorship-program-A02-list.png)
- For each program, Rating and Invite Professional need displayed as separate rows
- User need able to swipe each slide
- Skye and Message icons missing on Mobile view
- Click Program title take user to Mentorship Detail page
14). Mentorship Detail
Screenshot: X12-A-Mentee-Mentorship-program-B01-Summary.png
Page url: index.html/#/mentorship
- This is Detail page look, Summary content displayed by default
- Background image need covered browser screen
- Title need wrapped inside mobile screen
- tabs need converted into dropdown for mobile
- Add goal button placed on the right side
- Timeline for mobile view need displayed as vertical mode
- Re-use existing content based on existing prototype
- Roles and Responsibility need follow storyboard look
- Change Dropdown to Document take user to Documents content (Screenshot: X12-A-Mentee-Mentorship-program-B02-Documents.png)
- All content need displayed as separate rows
- Change Dropdown to Questions take user to Questions content (Screenshot: X12-A-Mentee-Mentorship-program-B03-Questions.png)
- re-use existing dropdown function for View selection
- Ignore this storyboard look (Screenshot: X12-A-Mentee-Mentorship-program-C00-Tabs-selection.png)
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
The main task of this challenge is to convert completed Tablet UI Prototype of the Living Progress - Mentor ME into Responsive Mobile 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_6z0QlhOX1FzeWh6RWs?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.
- For this challenge, mostly you need make sure prototype display proper layout on Mobile screen only.
Your prototype submission need support Mobile Size requirements:
- Provided storyboard using iPhone Retina Portrait display (750px).
- Make sure your submission support Standard layout with 320px width
- Make user graphics look sharp on Retina and Standard version
- All pages need use fluid layout when transform into Landscape or Portrait view.
- You might need adjust some element placement in 320px width screen size. Let’s discus any doubt about adjustments
- We only provided some screens for mobile, we need your help to build fluid solution for every mobile pages for this challenge.
- Please do your best adjust the layout for mobile, we’ll ask more edits later on Final Fixes
Login Credentials
- There are 2 flow you can access for this prototype:
Mentor Flow:
Username: mentor
Password: 123
Mentee Flow:
Username: mentee
Password: 123
A). Existing UI Prototype Updates:
1). Page and Functionality Removal
- We need remove these elements from prototype:
- Meeting (Calendar)
- Messaging
- Forums
- Remove related Messaging button on top right across the pages
- on Dashboard page, remove meeting box. Need expand Tasks box to filled the content area
- on Sidebar menu, remove Meetings
- Also we need to make a note to remove all the meeting functionality from the application.
- Make sure Meeting not displayed on Mentee and Mentor flow
2). Edit Profile
- We can re-use existing Create Profile for Edit Profile layout
- On Profile page, add Edit button on the top right to let user navigate to Edit Profile
3). Existing Prototype Issues
- Mentor Match Checkboxes Styling missing on Firefox
- Meetings menu not set as active state on Meetings page
- Message icons need in correct placement, right now it look cut-off
- Looking forward your suggestion to fix some issues on prototype
B). Responsive Mobile UI Prototype Page Requirements:
1). Splash Screen
Screenshot: X00-A-Mentee-Splash.png
Page url: index.html/#/splash
- Background image need covered whole screen. Re-use existing images.
- Mentor ME Logo placed on top and centered
- You might need adjust the logo size?
- Text need fits within the screen
- Loading progress placed below the text. Re-use existing progress. Ignore storyboard
2). Landing Page
Screenshot: X01-A-Mentee-login-B01-First-timer.png
Screenshot: X01-A-Mentee-login-B02-First-timer.png
Page url: index.html/#/login
- Mentor ME Logo placed on top and centered
- You might need adjust the logo size?
- Text slider need user proper padding and margin
- Login and Register button placed below the slider
- Terms and Conditions text placed below the buttons for the First Time user
- These are screens for existing user, button need wrapped correctly inside the mobile sccreens
(Screenshot: X01-A-Mentee-login-A01-Existing.png & Screenshot: X01-A-Mentee-login-A02-Existing.png)
- Also, there’s no Terms condition text for this screen
3). Login
Screenshot: X01-A-Mentee-login-C01-login-default.png
Page url: index.html/#/login
- Login form loaded after user click the Login button
- Logo need adjust the size and need centered
- Form need adjust the size and need centered
- x button to close modal need placed on top right
- Login form need adapting the browser screen size
- Type on Username and Password text field need works like existing (Screenshot: X01-A-Mentee-login-C02-login-typing.png, Screenshot: X01-A-Mentee-login-C03-login-typing.png)
- Screen after user filled the data (Screenshot: X01-A-Mentee-login-C04-login-done.png)
- Re-use existing error styling, make sure fits for mobile screen size (Screenshot: X01-A-Mentee-login-C05-login-error.png)
4). Register
Screenshot: X02-A-Mentee-Register-A01-Default.png
Page url: index.html/#/login
- Login form loaded after user click the Register button
- Logo need adjust the size and need centered
- Form need adjust the size and need centered
- x button to close modal need placed on top right
- For mobile screen you need make the role selection swipeable to let user select Mentor and Mentee (Screenshot: X02-A-Mentee-Register-A02-swipe.png)
- Re-use existing images for Mentor and Mentee
- Make sure selected function still works (Screenshot: X02-A-Mentee-Register-A03-selected-role.png)
5). Terms & Condition
Screenshot: X03-A-Mentee-Register-01-Termscon.png
Page url: index.html/#/term
- User access this page from Terms & Condition link below the Login and Register buttons
- Basically page need to be fluid for mobile screen
- Match padding/margin like existing storyboard
- Blue bar need remain sticked on the bottom of screen
- After user click Agree then another “Parent/Guardian Consent ” form show up (Screenshot: X03-A-Mentee-Register-02-Termscon.png)
- For this form, background need covered whole browser screen
- x button placed on top right and use black color
- Label and input need displayed as separate lines
- Continue button need placed on the bottom and width covered browser
6). Create Profile
Step 1
Screenshot: X04-A-Mentee-A01-Step01.png
Page url: index.html/#/register
- For this page, you need build the make sure fluid layout adapted for mobile screen
- Match padding/margin form like provide storyboard
- There’s green line below the title, need consistent across all pages.
- Profile pictures and text need placed centered
- Label and text input need to be fluid
- Match padding/margin and font size for all buttons on header and bottom bar
- Match font size for label and any form element
Step 2
Screenshot: X04-A-Mentee-A01-Step02.png
- When landed on this screen, form need displayed from top
- For mobile screen you need displayed 2 circle per row
- Make sure they not overlapping
- Selected function need remain works
- Match padding/margin form like provide storyboard
- All circle options need wrapped inside the white background
Step 3
Screenshot: X04-A-Mentee-A01-Step03-1.png
- When landed on this screen, form need displayed from top
- Match padding/margin form like provide storyboard
- Make sure text wrapped inside the white background
- Graphic need placed centered of form
Add Your Goals
Screenshot: X04-A-Mentee-A01-Step03-2A.png
- Fix the header bar to follow storyboard
- 3 circles on top need placed correctly like storyboard look
- Number indicator placed on the left side of circle placeholder
- Match padding/margin form like provide storyboard
- Each row need displayed correctly for mobile
- Notice the icons become smaller on mobile
- Select circle need add to selection on top (Screenshot: X04-A-Mentee-A01-Step03-2B.png)
- Sample when select another row (Screenshot: X04-A-Mentee-A01-Step03-2C.png & Screenshot: X04-A-Mentee-A01-Step03-2D.png)
- After click Done button user take back to Add Your Goal screen with selected Goals (Screenshot: X04-A-Mentee-A01-Step03-3.png)
- Number indicator placed on the left side, image on center and x button on the right side
- Click Done button take user to Dashboard
6). Dashboard
Screenshot: X05-A-Mentee-Dashboard.png
Page url: index.html/#/dashboard
- This is dashboard screen look for mobile screen
- On the user information area, Progress, Target Date and Time left need displayed correctly inside the purple background
- Purple background area should not in fixed placement for mobile, need scrolling with the page
- All boxes need use fluid width that covered mobile screen
- Mentorship Program area for mobile not display slideshow, but as separated lines
- Match each slide height and use fluid width
- Notice Mentorship Program have left and right margin
- Your task and Schedule Meeting boxes need displayed in separated lines
7). Sidebar Menu
Screenshot: X00-A-Mentee-Navigation.png
- User see this screen after click menu button on the top left side of header bar
- For mobile screen, you can re-use existing navigation function, ignore storyboard look
- But, you need make sure logo and another navigation menu fits inside the left sidebar without overlapping each other
- Settings and Logout remain placed on the bottom
8). Activities
Screenshot: X06-A-Mentee-Activities.png
Page url: index.html/#/activity
- User landed on this screen from Activity menu
- Match padding/margin like provided storyboard
- Image need use fluid width
- Text description placed below the image
9). Goals
Screenshot: X07-A-Mentee-Goals-01-Default.png
Page url: index.html/#/goal
- User landed on this screen from Activity menu
- Match padding/margin like provided storyboard
- On purple background area, you need covert current data into a slider for mobile view
- 1st slide: Displayed Current Goals and Overdue
- 2nd slide: There’s this month completed area and progress bar (Screenshot: X07-A-Mentee-Goals-02-slide-01.png)
- 3rd slide: Upcoming Goals (Screenshot: X07-A-Mentee-Goals-02-slide-02.png)
- Re-use existing slide function
- Sort By need to be hidden for Goals
- Goal title need displayed in single line
- Progress Circle, Rate of Progress, Target Date and Time left displayed as separate rows
- Click each goals need load Goal Details (Screenshot: X07-A-Mentee-Goals-03-Details-mentor.png)
- This should not in separated page, display it as existing desktop function
- You need create tab layout for Related Mentor and Tasks
- Related Mentor will display all related information for Mentor
- Your tasks will be content for Your Tasks in fluid width (Screenshot: X07-A-Mentee-Goals-03-Details-Task.png)
- Click blue + button need display Add New Goal (Screenshot: X07-A-Mentee-Goals-04-New-goals.png)
- All rows need displayed in separate lines
- Add New Goal width need displayed as fluid width
10). Tasks
Screenshot: X08-A-Mentee-Tasks-01-Default.png
Page url: index.html/#/task
- On the purple background area, all content need wrapped correctly
- Match padding/margin like provided screenshot
- Add New tasks after user focus on Add New task input (Screenshot: X08-A-Mentee-Tasks-02-New-task.png)
- Notice normal text hidden on the right side of Task Priority
- Cancel and Add New Task button need placed on the left and right side
11). Mentor Matches
Screenshot: X10-A-Mentee-Mentor-matches-01-Criteria-selections.png
Page url: index.html/#/mentor-match
- This is Mentor Matches screen
- Find Match placed on the right side of dropdown
- Keep use existing checkboxes styling
- Each criterias need use fluid width
- “If checked” text need displayed full text like storyboard look
- Click Find Match button take user result screen (Screenshot: X10-A-Mentee-Mentor-matches-02-found-results.png)
- Purple background area need displayed as slide function
- 1st Slide: Suggested Mentors
- 2nd Slide: Categories and Main expertise (Screenshot: X10-A-Mentee-Mentor-matches-03-found-results.png)
- For this row, Mentor information placed on top
- Average Performance & Match Expertise displayed on the bottom
- Click each row need take user to Mentor Profile
12). Mentor Profile
Screenshot: X11-A-Mentee-Mentor-profile.png
Page url: index.html/#/profile
- Background image need fits inside the browser width
- Each rows need displayed as separated lines
- Refer to storyboard for detail placement
13). Mentorship Program
Screenshot: X12-A-Mentee-Mentorship-program-A01-list.png
Page url: index.html/#/mentorship-pro
- User landed on this screen from sidebar menu then Click Programs
- Purple background area need displayed as slider function
- 1st Slide: Suggested Mentorship Program
- 2nd Slide: Ongoing and Match (Screenshot: X12-A-Mentee-Mentorship-program-A02-list.png)
- For each program, Rating and Invite Professional need displayed as separate rows
- User need able to swipe each slide
- Skye and Message icons missing on Mobile view
- Click Program title take user to Mentorship Detail page
14). Mentorship Detail
Screenshot: X12-A-Mentee-Mentorship-program-B01-Summary.png
Page url: index.html/#/mentorship
- This is Detail page look, Summary content displayed by default
- Background image need covered browser screen
- Title need wrapped inside mobile screen
- tabs need converted into dropdown for mobile
- Add goal button placed on the right side
- Timeline for mobile view need displayed as vertical mode
- Re-use existing content based on existing prototype
- Roles and Responsibility need follow storyboard look
- Change Dropdown to Document take user to Documents content (Screenshot: X12-A-Mentee-Mentorship-program-B02-Documents.png)
- All content need displayed as separate rows
- Change Dropdown to Questions take user to Questions content (Screenshot: X12-A-Mentee-Mentorship-program-B03-Questions.png)
- re-use existing dropdown function for View selection
- Ignore this storyboard look (Screenshot: X12-A-Mentee-Mentorship-program-C00-Tabs-selection.png)
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