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

The goal of this challenge is to take the provided UI Design and convert it to a native Android application prototype in both Portrait and Landscape views.

There is no backend interaction in this challenge, we will have a follow-up challenge to connect the application with backend.

Challenge Requirements

In this challenge you will develop a prototype Android app that has all screens provided in the provided design. Note the following:

- We have a Click Map PNG screen to show the full navigation/flow between screens.

- The design is very detailed to show all variations. If there is anything not clear please post questions in forums.

Screen Requirements

- Login/Landing Screen

- Screenshot : “00-00_Sign in.png”

- To simulate invalid login use specific username/password for that.

- There is no need to set a predefined credentials for valid login, any combination should work.

- Forgot password is dead link.

- Register Screen

- Screenshot : “03-02_Registration Full.png”

- Contact Number field needs a (-) icon same as the plus icon to remove existing added number.

- Vaccine fields are selectable checkboxes/options.

- Dashboard - Home tab Screen

- Screenshots :

- “01-00_Dashboard Home.png”

- “01-03_Dashboard Sync.png”

- “01-04_Dashboard Sync Complete.png”

- Pull to refresh should be implemented in this screen which represents syncing.

- The syncing spinner indicator should also show a progress of syncing as well, we are open to your suggestion here as we don’t have a design update for it.

- Village Name picklist you need to place placeholders values in the list where default value is All Villages.

- Daily pick list (Period) will filter how data are aggregated. For now you add dummy values in the list (Daily, Weekly, Monthly, Quarterly, Yearly)

- The “< Today >” option affected by the selected “Daily” pick list, for this challenge you can try to come up with proper values for each selected period i.e. if daily then Yesterday, Today, Tomorrow, Tuesday, Thursday .. etc. If monthly, then June, July .. etc..

- Dashboard - Appointments tab Screen

- Screenshot

- “01-05_Appointments.png”

- “01-07_Appointments Filter.png”

- “01-08_Appointments Sort.png”

- “01-09_Appointments Missed.png”

- “01-10_Appointments Upcoming.png”

- tapping on the phone number and ‘phone icon’ (make it a full clickable area) should allow making a phone call.

- tapping on any other area (other than phone icon) it will open the “04-00_Profile Appointments.png” screen.

- Same as in Dashboard Home tab “Pull to refresh” should be implemented in this screen.

- Filter and Sort options get displayed at header bar when opening this tab.

- This screen has three tabs : Today, Missed, and Upcoming tabs. In missed tab user can change the range from drop down list but you don’t need to implement any functionality for this, when user select the range it just reload the data.

- Dashboard - Reports tab Screen

- Screenshots:

- “01-11_Report Total.png”

- “01-16_Reports Total Filtered.png”

- “01-17_Report Set Range.png”

- “01-18_Report Set Range.png”

- “01-19_Reports Range.png”

- “01-20_Reports Appointment.png”

- “01-21_Reports Vaccines.png”

- You can use any open source charting library that address matching the exact design.

- Same as in Dashboard Home tab “Pull to refresh” should be implemented in this screen.

- Search Screen

- Screenshots

- “02-00_Search.png”

- “02-02_Search Results Alt.png”

- Search bar should be auto complete, you need to simulate this.

- In result list when tapping on the phone icon it allows make phone call.

- tapping on any other area in the list item will take user to “04-00_Profile Appointments.png” screen.

- Profile Screen

- Screenshot : “04-00_Profile Appointments.png”

- User can swipe left/right to view all children blocks (the bar below user photo)

- tapping on “+Appointment” takes user to “New Appointment Screen”

- tapping on “+Vaccine Dose” takes user to “New Vaccine Screen”

- tapping on “+Baby born” takes user to “New Birth Screen”

- Tapping the pencil icon will take you to the Edit Profile Info 04-05

- Phone icon allows user to make direct phone call.

- The screen has three sub tabs :

- Appointments tab Screen

- “04-00_Profile Appointments.png”

- “04-01_Profile Appointments Scrolled.png”

- Vaccines tab Screen

- “04-06_Profile Vaccines.png”

- Birth Details tab Screen

- “04-07_Profile Birth Details.png”

- “04-08_Profile Appointments Unborn Baby.png”

- Edit Profile Screen

- Screenshot: 04-05_Profile Edit.png

- Used to edit profile information.

- Add New Appointment Screen

- Screenshot : “04-09_Profile Add Appointment.png”

- The date picker can be the default android datepicker.

- Vaccines field is multi-select boxes.

- Add Vaccine Dose Screen

- Screenshot : “04-11_Profile Add Vaccine Dose.png”

- Vaccines field is a radio button group, so user can select single value.

- New Birth Screen

- Screenshot: “04-12_Profile Add Baby.png”

- Used to add new child birth information

General Notes

Note the following :

- The app will be in both rotations : Portrait and Landscape.

- The landscape screenshots are not mentioned in specs but you will get access to them in forums.

- App should support localization, all string resources should be localized https://developer.android.com/guide/topics/resources/localization.html

- The target screens should target normal and large screens, it should be responsive and proper densities/resolutions should be used as provided in the storyboard.

- The implementation must be a native application, native controls must be used wherever possible.

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

Project Structure

You will use Android Studio project for this application. Follow Android Studio project structure best practices.

Technology Overview

- The target platform is Android.

- You will support Android version 4.1.x - 6.x.

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

- Use of PhoneGap is NOT allowed. We are building native application.

Documents

Provided in challenge forums : the Storyboard and Screenshots

Deliverable

- Android Studio Project with all source code that addresses the requirements.

- Deployment guide with verification steps.

Final Submission Guidelines

Deliverable

- Android Studio Project with all source code that addresses the requirements.
- Deployment guide with verification steps.