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

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

Screen Requirements

- Navigation menu

- Screenshot “06-1Navigation-Menu.jpg”

- Navigation items are self explanatory, all of them should take user to the corresponding screen, if anything not clear please ask in forums.

- Tabbing (X) close the menu

- Tabbing the power icon logs out the user.

- Login/Landing screen

- Screenshots :

- “01-1Validate-Screen.jpg”

- “01-2Validate-Error.jpg”

- User 1234 as invalid code, other than that, any code should be valid and take user to next screen.

- We have two flows to simulate

- New User

- This will take user to Terms of Use agreement screen.

- Add predefined code for this, i.e. 123456

- Existing User

- This will take user to chats screen.

- For simulation, allow any code other than the mentioned above.

- Terms Of Use

- Screenshot : “02-Terms-and-Conditions.jpg”

- Tabbing on button takes user to Welcome screen.

- Welcome

- Screenshots :

- “03-1Welcome-Form.jpg”

- “03-3Select-EDD.jpg”

- “03-5Confirmation-Popover.jpg”

- “03-7List-Of-Groups.jpg”

- Follow invisionapp, both fields are required in the welcome screen.

- My Chat Screen

- Screenshots :

- “04-1Chats.jpg”

- Private chat area should be progressive loading.

- Tabbing on an item in the list will take user to chat details.

- Top header has the icons:

- Notifications icon

- Show the screen with/without badge icon.

- Whatsapp icon opens whatsapp app.

- Search icon opens search filter popup.

- Group Members

- Screenshot : “06-1Group-Members.jpg”

- “View Group Chat” takes user to chat details screen.

- Tapping on a user takes to private chat screen.

- Health Center - @ Health Center

- Screenshots :

- “07-1Health-Center.jpg”

- “07-3Change-EDD.jpg”

- The screen should support progressive loading.

- Health Center - Calendar

- Screenshots :

- “07-4Calendar_No-Event.jpg”

- “07-5Calendar_With-Event.jpg”

- “07-7Add-New-Event.jpg”

- You will implement a calendar in this screen, it must matches the design.

- The datepicker control to be used for adding new event should match the one used when selecting EDD in welcome screen flow.

- Chalkboard - Contacts tab

- Screenshot:  “08-1Chalkboard.jpg”

- Tapping on “Call” should trigger a phone call.

- Chalkboard - Brochures tab

- Screenshot : “08-2Chalkboard.jpg”

- Tapping on > will open a web link in the app.

- Chalkboard - FAQ tab

- Screenshot : “08-3Chalkboard.jpg” and “08-5Answer-Expanded.jpg”

- Chalkboard - Feedback tab

- Screenshot : “08-6Chalkboard.jpg”

- Chat Details

- This screen is the same layout/UI/UX for admin/group/private chat.

- Screenshot:

- “04-2Group-Chat.jpg”

- “04-4Private-Chat.jpg”

- “05-7Private-Chat.jpg”

- Simulate chatting from other users in the chat details, i.e. when user post a message automate replies from multiple users.

- Implement ability to take photo or add photo from gallery.

- Simulate attaching a file to the chat using the top attach icon in header.

- Camera icon should allow open a cam or pick from photo library.

- Simulate auto reply to a message when user post a message.

- My Profile - Favorites tab

- Screenshot : “09-1My-Profile.jpg”

- Tapping “X” removes item from Favorite.

- Tapping on an item opens a link in webview in app.

- My Profile - My Notes tab

- Screenshots :

- “09-2My-Profile.jpg”

- “09-4Add-Note.jpg”

- Using bottom right icon allows user to add new note

- User can remove a note by tapping on (X) icon.

- Settings Screen

- Screenshots:

- “10-1Settings.jpg”

- “10-3Change-health-center.jpg”

- “10-4Settings.jpg”

- “10-6New-Born-Info.jpg”

- All setting fields should be implemented :

- Use welcome screen datepicker style for date selection.

- For change photo allows user to access to take photo or upload from photo gallery.

- For text field user should be able to edit the field.

- Radio buttons should be function.

- Search Screen

- Screenshot

- “11-1Search-Screen.jpg”

- “12-Search-Results.jpg”

- Allows user to search the app content.

- Note the following:

- Delete the search term from the search box.

- In case search results don’t return a result show a popup : “search item not found”

- In case search returns a result show a popup with link to result content in the app. User should be able to click on link and be taken to the appropriate place in the app.

General Notes

Note the following:

- The screen resolution should match the storyboard resolution (1080px x 1920px).

- 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

 

 

Final Submission Guidelines

Deliverable

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

• - Deployment guide with verification steps.