This Prototype challenge is part of the HPE Live Blitz Challenge Series. Make sure to check it out!

In a past challenge we implemented prototype for Mentee screens, in this challenge, we are doing the Mentor screens.

The main task of this challenge is to add new screens to existing Ionic Prototype using the provided Storyboard design and following the specification of this challenge.

At the end of this challenge, we need a solid prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!

Challenge Requirements

In this challenge you will develop an Ionic app prototype that will run as native app on Android tablets that has all screens provided in the provided design.

Note the following:

- We have an invisionapp that show the full navigation/flow between screens.

- The design provided detailed screenshots for all screens. If there is anything not clear please post questions in forums.

- We are only addressing Portrait view.

Screen Requirements

- Mentee vs. Mentor

- Screenshot : 01-Register-page-00-Selections.png

- In landing page, if user tapped on Register, we should show a modal (01-Register-page-00-Selections.png) to let user select between Mentee or Mentor. If user selected Mentee it will take the user to the current prototype flow. If user select Mentor then user will be taken to the new register flow (01_Register.jpg).

- Also for Login, you need to simulate when user login as Mentee/Mentor where user is redirected to the proper dashboard based on user role.

The following are the changes we are making to implement the Mentor screens :

- Navigation Menu (Sidebar)

- Screenshot : 02_Dashboard1.jpg

- Follow invisionapp to implement the navigation items.

- It is identical to the existing navigation with difference being the new “More ..” section.

- Register Mentor Screen/Flow

- Screenshots :

- 01_Register.jpg

- 01_Register0.jpg

    - The background shows Create Profile, this is wrong design, the background will be the terms of use screen from 01_Register.jpg.

- 01_Register1.jpg

    - The background shows Create Profile, this is wrong design, the background will be the terms of use screen from 01_Register.jpg.

- 01_Register2.jpg

    - The background shows Create Profile, this is wrong design, the background will be the terms of use screen from 01_Register.jpg.

- 01_Register4.jpg

    - The background shows Create Profile, this is wrong design, the background will be the terms of use screen from 01_Register.jpg.

- 01_Register5.jpg

- 01_Register5_1.jpg

- 01_Register5_2.jpg

- Register flow starts by showing Terms of Use, tapping discard returns user to previous screen, taps agree will show (01_Register0.jpg), then next screens will follow the screenshots numbering.

- In Create Profile Basic Info

- Implement validation for required fields (labeled with * astrisk)

- User should be able to access camera or photo library to upload a photo in create Profile screen

- Add (regex) validation for field types (these are not REQUIRED but you need to add validation if the values are provided):

- First/Last name : must be at least 1 character and max of 30 characters.

- Email : must be valid email.

- username : must be at least 1 character and max of 30 characters.

- Phone number fields should be valid in US phone numbers in WW Format (+1 408-555-2222).

- Create Profile - Occupational Interests tab :

- User can select multiple interests from this screen.

- This step is required, user must select at least one interest in order to move to next step.

- Create Profile - Intro Video

    - User should be able to play a video in this tab

- At bottom of Create Profile screen there should be a “Done” and “Previous” blue bar as currently done in existing prototype.

- When clicking Done the user will be taken to Dashboard.

- Dashboard Screen

- Screenshots:

- 02_Dashboard.jpg

- Page header need remain fixed on top.
- Menu button on left side need opened the left sidebar navigation.
- Magnifier (remove it) and Message buttons placed on the right side, message icon takes user to messages screen.
- User quick profile view placed on the dark purple background sections

- User need able to collapse the section by click whole row

- User need able to swipe or tap on dot pagination to navigate between current programs in the top dark purpule background section.

- Click + will take user to Create New Program.
- Usernames links will take to the user profile.

- Activities widget :

- More Activities will take user to Activities screen.

- Mentee Requests Widget :

- Find Match will take user to Find Match screen 03_Matching.jpg.

- View All Mentee Requests is dead link.

- Goals Widget

- The donut chart should be animated when page loads as currently done.

- View All will take user to Goals screen.

- Your Tasks and Schedule Meeting & Programs widget should match current widgets in prototype.

- Mentee Matches Screen

- Screenshots :

- 03_Matching.jpg

- 03_Matching1.jpg

- 03_Matching2_1.jpg

- 03_Matching2_2.jpg

- 03_Matching2.jpg

- 03_Matching3.jpg

- User can change the list of radio buttons from drop down filter.

- Tapping “Find Match” will take user to (03_Matching3.jpg)

- Tapping on a mentee will open mentee Profile screen (04_Profile.jpg - already implemented).

- Mentee Matches result screen should support progressive loading.

- User can filter the result using the filter drop downs.

- The strike icon will trigger the search when user change pick lists selection.

- My Own Program Screen

- Screenshots:

    - 06_My Own Program.jpg

- There are two tabs : Ongoing and Closed, both should be implemented, and will have same type of UI items.

- Tapping on a program will take user to program details screen 06_My Own Program1.jpg

- My Own Program Details Screen

- Screenshots :

    - 06_My Own Program1.jpg

    - 06_My Own Program2.jpg

    - 06_My Own Program3.jpg

    - 06_My Own Program4.jpg

    - 06_My Own Program5.jpg

- Top dark purple area can be collapsed/expand, by default it is expanded. The donut chart should be animated when page loads.

- Set these programs as is radio buttons group.

- Add Goal button take user to Create New Goal screen (06_My Own Program6.jpg).

- Summary tab :

    - Programs Tasks should be functional same as it is in Tasks screen in existing prototype, user can add new task, mark task as complete, and reorder tasks.

- Documents tab :

    - The pdf files and links should be clickable, it should open the pdf in web view.

    - Add Files/Links should allow attaching file or adding link to the screen.

- Lesson Learned tab :

    - The top section is a form where user can submit a lesson learned.

    - When user click Submit it should add the entry to the History section.

    - The history section should support progressive loading.

- Create New Goal

- Screenshots :

    - 06_My Own Program6.jpg

- This screen will have 5 weeks sections. Design show only 2 weeks sections but you will need to add 5 sections.

- Clicking Done will take user back to the Details screen.

- Add New Meeting

- Screenshots :

    - 07_Add New Meeting.jpg

- We get to this screen from Meetings screen when tapping on (+) icon.

- Tapping on a blue circled date will load meeting info in the Add New Meeting section.

- User can add new meeting, tapping Add New Meeting button should add the new meeting to calendar.

- You need to implement the calendar.

- Add New Message

- Screenshots :

    - 08_Add New Message.jpg

    - 08_Add New Message0.jpg

    - 08_Add New Message1.jpg

- We get to this screen by tapping on (+) icon in the messages screen.

- Selecting a user from auto complete will take to the messages details screen 08_Add New Message1.jpg.

- Professional Consultants

- Screenshots

    - 09_Professional Group.jpg

- The screen will list professional groups.

- The list should support progresive loading.

- User can change selection in pick lists and it will automatically refresh the list, you need to simulate it.

- Clicking Add to Mentor Group will check the radio button next to it, Tapping again will remove it.

- Tapping on a group will take user to group details screen.

- Professional Group Details SCreen

- Screenshots :

    - 09_Professional Group1.jpg

- Tapping on Apply will change button to “Applied”. Tapping again will toggle the text.

- Tapping on “Group Forums” will take user to Group Forums screen 09_Professional Group2.jpg

- Group Forum Screen

- Screenshots

    - 09_Professional Group2.jpg

    - 09_Professional Group3.jpg

- The screen should support progressive loading.

- Changing picklist value will re-render items, you need to simulate it.

- Tapping on a group will take user to 09_Professional Group3.jpg

- In Group details screen :

    - Simulate chat

    - Only chat section is scrollable, the top section is fixed.

- Mentor My profile Screen

- Screenshots :

- 10_Mentor Profile.jpg

- This screen is same as Mentee screen but for Mentor.

- It has Edit Profile for Mentor. The button will take user to Create Profile flow.

- Institution Profile Screen

- Screenshots

    - 11_Institution Profile.jpg

    - 11_Institution Profile1.jpg

    - 11_Institution Profile2.jpg

- We get to this screen from Mentee/Mentor profile by clicking on the Instituation Information entry.

- Implement all tabs/screens.

- User can scroll vertically to view all programs.

General Notes

Note the following:

- Should use ionic directives (ion-list, ion-item, etc.) as much as possible.

- All screen elements should work as in existing design, i.e. (+) button means adding new item, even if specs does not mention it you need to implement this following existing prototype.

- We are targeting Tablet screens, you need to generate the correct resolution assets to support the target devices.

- We are targeting only Android tablet in this challenge. So make sure to test your work on a device not a web browser.

- You are required to fix any bug in existing UI prototype to address the requirements in this challenge.

- For Android tablet we are targeting large screens with proper resolution that match design and produce quality images/assets.

- The back button should go back in history (i.e. as if you were pressing back in the browser). If there is no more history (i.e. you're at the first page), pressing back closes the app.

- Tapping user thumbnail or username will take user to profile screen.

- Store/Load data from JSON files, don’t hardcode data.

- We are only addressing Portrait view in this challenge.

Specific HTML/CSS/JavaScript Requirements

- You must use HTML5 and CSS3, it is is preferred if you use Sass.

- 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.

- 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.

- No inline CSS styles - all styles must be placed in an external stylesheet.

- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

- 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).

- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.

- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Libraries/Plugins

Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.

Documents

The existing prototype and design source files and screenshots are provided in challenge forums.

 

Final Submission Guidelines

Deliverable

- All source code that implement the requirements.

- Deployment Document.

- Verification Document.