In this challenge you can choose between "Native Android" or "Xamarin" Android or "Ionic" to prototype the app.

The main task of this challenge is to convert the provided Storyboard design to a tablet prototype using Native Android controls or Xamarin framework or Ionic framework 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!

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

Challenge Requirements

In this challenge you will develop an Android 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 marvelapp 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

- Splash Screen

- Screenshot: 01-B-Mentee-00-Splash.png

- This is splash screen look and feel

- The screen plays loading spinner indicator

- Once finished it will load the login page
 

- Navigation Menu (Sidebar)

- Screenshot : ov-00-Nav-sidebar-01-Dashboard.png

- Follow invisionapp to implement the navigation items.

 

- Login Screen

- Screenshots :

- 01-login-existing-01-walkthrough.png

- 01-login-existing-02-walkthrough.png

- 01-login-firstimer-01-walkthrough.png

- 01-login-firstimer-02-walkthrough.png

- 01-login-page-01-default.png

- Implement a carousel for top part, user can also tap or use gesture to navigate between walkthrough slides.

- Tapping login will show login modal (01-login-page-01-default.png)

- Login error style should look like (01-login-page-05-error-msg.png)

- Tapping on bottom Terms & Condition at bottom will open this sceen (03-B-Mentee-termscond-01-terms.png), but it should show ‘Discard” button at footer only.

- Tapping on “Register” will take to register flow (See below)

- There are two versions for the login page, this version (01-login-firstimer-01-walkthrough.png), and another version where there is a rounded box that represents a logged in user who checked in remember me in login screen, so next time user can login directly without providing credentials (01-login-existing-01-walkthrough.png). You need to simulate both cases.

 

- Register Screen/Flow

- Screenshots :

- 03-B-Mentee-termscond-01-terms.png

- 03-B-Mentee-termscond-02-waiver.png

- 04-Mentee-01-step-01-default.png

- 04-Mentee-02-step-01-default.png

- 04-Mentee-02-step-02-select.png

- 04-Mentee-03-step-01-default.png

- 04-Mentee-03-step-02-selections-goals.png

- Register flow starts by showing Terms of Use (03-B-Mentee-termscond-01-terms.png), tapping discard returns user to previous screen, taps agree will show (03-B-Mentee-termscond-02-waiver.png)

- Add validation so that the Consent form fields are required in order to continue (03-B-Mentee-termscond-02-waiver.png)

- Continue will take user to Create Profile screen.

- Cancel in Create Profile flow will take user back to login screen.

- Create Profile Step 1

- Implement validation for required fields.

- Date field should open a date picker control.

- User should be able to access camera or photo library to upload a photo.

- Add (regex) validation for field types:

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

- Social network login is not in scope, so these buttons/icons will not be functional in prototype.

- Create Profile Step 2

- User can select multiple interests from this screen (04-Mentee-02-step-03-select.png)

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

- Create Profile Step 3

- Adding goals is required. User must select 3 goals, so in this screen user cannot click done unless user picked 3 items (04-Mentee-03-step-05-selected-goals.png).

- User can remove goals by clicking on (X) 04-Mentee-03-step-06-goals-added.png, when there is less than 3 goals add “Add new goal” button that used to send user back to select goals screen.

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

 

- Dashboard Screen

- Screenshots:

- 05-B-Mentee-Dashboard.png
- 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 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 slides
    - The semi circle donut should play animated effect on screen load.
- Mentorship Program, user need able to swipe to see more items.

- Mentorship Program, there’s donut chart, this should play animation effect on item load
- Invisionapp show how interaction and navigation with buttons/links in this screen.

- Remove the (+) icon from this screen.

- Activities Screen

- Screenshots : 06-B-Mentee-Activities-01-Default.png

- There’s filter dropdown next to View Activities title

- The screen should support progressive loading.

- Goals Screen

- Screenshots:

- 07-B-Mentee-Goals-01-Goals-default.png

- 07-B-Mentee-Goals-02-Goal-expand.png

- All semi circle donuts controls in the screen should be animated when rendering it.

- Implement filter drop downs, with dummy values for now.

- When changing filter play a spinner indicator to simulate reloading/filtering the data.

- Tapping + will take user to Add Goal screen.

- This screen should support progressive loading for goals.

- Tapping on a goal item will expand the goal to view details.

-  Skype and SMS icons are placeholders.

- Expertise by default it will show two rows, tapping the (+ X more) will expand additional rows to show additional tags.

- Remove the + icon.

- Tapping (3 More Tasks) in tasks area will load more items in the list.

 

- Goals - Add New Goal Screen

- Screenshots :

- 07-B-Mentee-Goals-03-New-goal-blank.png

- 07-B-Mentee-Goals-04-New-goal-Added.png

- All fields are required.

- Target date: Show a calendar to pick a date

- Time left: Calculated field Days between Target date and today

- Rate of progress: is not required, remove it.

- Goals Categories: Smart field to select the Goal/Skill from a predefined list.

- Choose mentor: List to select the mentor name from a list of previously selected mentors for this mentee

- Add new task: this field is not needed, remove it.

- Draft button : remove it.

 

- Tasks Screen

- Screenshots :

- 08-B-Mentee-Tasks-01-Default.png

- The semi circle donut should be animated when rendering.

- Tapping “View Unfinished Tasks” will hide all complete tasks and only show the unfinished tasks form list.

- Filter drop down should be implemented, with dummy data. Simulate reloading lists when selected item changed.

- Tapping the three lines icon will toggle the list to be reordered, user can drag the items to reorder them (08-B-Mentee-Tasks-02-reordering-task.png), tapping “Save List Order” icon will toggle it again.

- Add New Task

- Due Date should open default date picker UI control.

- Simulate adding the task to the list after clicking “Add New Goal” (Change it to Add New Task)

- In the tasks list, tapping on the circle will mark task as completed and strikethrough it as shown in storyboard.

- Task list will display 5 items by default, the rest of tasks rows will be collapsed, tapping “X More Tasks” will load more rows to the list.

 

- Meeting Screen

- Screenshot: 09-B-Mentee-meetings.png

- Quick information placed on top of this screen
    - Display animated effect for the hrs progress bar on screen load

- The implemented Calendar must match the design

- User need able to navigate months by press left and right arrow

- The blue highlighted days in calendar represents a day with meetings.

- Selecting a blue highlighted day will show event list below the calendar of that selected day.

- User need able to scroll down the screen to view the list.

- Tapping (+) will be placeholder.

- Mentor Matches Screen

- Screenshots :

- 10-B-Mentee-Mentor-match-01-Match-criteria.png

- 10-B-Mentee-Mentor-match-03-Results.png

- User can change the list of radio buttons from drop down filter (10-B-Mentee-Mentor-match-02-change-criteria.png)

- Tapping “Find Match” will take user to (10-B-Mentee-Mentor-match-03-Results.png)

- Tapping on a mentor will open Profile screen.

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

 

- Profile Screen

- Screenshot: 11-B-Mentee-Mentor-profile-01-Default.png

- User landed to this page, after click the username or user thumbnail across the app.

- Back button take user to the previous page

- Profile background image or video placed on top. For video we should be able to play it.

- There are action buttons for Skype, Send message and Youtube link, these are dead links.

 

- Mentorship Program Screen

- Screenshots :

- 12-B-Mentee-Mentorship-program-01-Tabs-Summary.png

- 12-B-Mentee-Mentorship-program-02-Tabs-Documents.png

- Only Summary and Documents tab to be implemented in this challenge.

- Add Goal will open Add New Goal screen.

- Tapping use thumbnail/username will take to profile screen.

- Tapping skype and sms icons are placeholders.

- Tapping PDF files will download them.

- Tapping the links will open it in web browser.

 

- Messages Screen
- Screenshot: 14-B-Mentee-Messages-01-Message.png
- Filter is placeholder, populate it with dummy data.

- Tapping + will start new conversion.
- Page will display all Message list from all users
- Notice there’s checkmark icon on the right side
- Each row need clickable to take user to message detail screen.

- Message Detail Screen
- Screenshot: 14-B-Mentee-Messages-01-Message-details.png

- The top header is fixed.
- Back button take user to Message page
- 3 dots icon will do nothing for now.
- User should be able to input a message and attach a file.

- Add auto responses when user enter a message.

- User need able scrolltop to view previous screens, show loading indicator for this.

General Notes

Note the following:

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

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

- Follow technology best practices in your solution, you will be judged about it.

- Add proper logging and error handling.

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

- We are only addressing Portrait view in this challenge.

Technology Overview

- Android (native)
- Ionic/HTML/CSS/JS/Cordova
- C#

- Xamarin Platform https://www.xamarin.com/

- You are allowed to use any supporting open source libraries. Please clearly document use of all such libraries.

Documents

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

Final Submission Guidelines

Deliverable

- Full Xamarin/Visual Studio solution (if you developed using Xamarin) or Android Studio solution (If you developed native android) or HTML/CSS/JS (For Ionic) with all files and scripts that implement requirements.

- Deployment Document.

- Verification Document.