Ognomy Phase 2 Mobile App React Native UI Challenge #1

CHALLENGE OBJECTIVES

• Add some new screens to the existing Ognomy mobile app.
• This challenge is UI only, there’s no need to integrate with backend API. But existing screens were already integrated and these must not be broken.

 
PROJECT BACKGROUND

• We are building a mobile app that allows patients to schedule and participate in teleconsultations on their mobile device, and a web app that allows doctors to view teleconsult schedules and participate in teleconsults from a desktop device.
• We have finished phase 1 (MVP) of the project and in phase 2 we are going to add more screens and features to the app.

 
TECHNOLOGY STACK

• React Native
• Redux
• HTML5
• Javascript
• CSS
• REST
• iOS
• Android

 
API INTEGRATION
Existing screens in the base code were already integrated with the API and these must NOT be broken, otherwise it will be considered a major requirement issue in the scorecard.
 
API for the new screens is not ready yet, you need to implement all actions/services required to fetch the data showing in the app from local JSON files and storing the data in the Redux store. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort in the near future.
 
You must not hardcode any test data into the code.
 
BASE CODE
We’ll provide the base code which implemented an MVP version of the app, in the base code the following features are already working and please make sure they are not broken by introducing the new screens:

• Sign up (iOS / Android)
• Login (iOS / Android)
• Schedule an appointment (iOS / Android)
• Join a meeting (via Zoom SDK / iOS only)

 
SCREEN REQUIREMENTS
The following screens from the design are in scope of this challenge. We’ll provide the design source file and the marvelapp password in the forum.
 
Sheepa Introduction Screen

• Right after login screen (already implemented), the app should show screen 03E and require the user to provide Name, Billing address, insurance, credit card info before then can continue (see Sheepa Screens section below).
• The following texts should be shown on this screen instead of the ones in design:
  • “It’s Sheepa, here. I’m your personal assistant to help you get around and guide you through the process using this app. I’m still new and learning cool stuff every day. You can call our live receptionist at 1-800-XXX-XXXX from 8:30-4:30 EST.”
• Tapping the “Let’s get started!” will lead to screen 08.
• Remove the “I just would like to learn more” button for now.

 
Sheepa Screens

• Please note even though it appears there are multiple screens below, I believe this is technically just a single screen that supports a few different types of questions / answers, so we expect the implementation to keep this in mind and have a highly reusable implementation that consumes the list of questions from local JSON file instead of duplicating the screen for each of the different question, that being said, the UI would work with any number of questions we choose to define in the JSON file without any hard coded logic. This is considered a major requirement.
• Screen 08
  • After 03E this screen will be shown, and we can go straight to the home address question.
  • Please start this by asking the user’s full name (which is not shown in design), and then the address.
  • Remove the “Use current location” option and just let the user enter an address manually.
• Screen 09
  • Photo taking / choosing from the library is in scope
  • After taking / uploading photo chatbot should show screen 10
• Screen 11  
  • Change the “How would you like to provide your insurance info” question to “Do you have insurance info to provide” and change the buttons to Yes and No, If Yes is tapped the app will ask the following list of questions:
    • Insurance carrier;
    • Plan number;
    • Insured's name - be sure to get the exact name shown on the insurance card;
    • Insured's identification number;
    • Effective date of coverage;
    • Patient's name;
    • Patient's relationship to the insured;
    • Patient's date of birth;
  • When the above questions are answered, show a message that says “You can add additional insurance information to your profile later.”
  • If No is tapped we move on to the next
• Screen 13
  • No ORR; text entry only for phase 2
  • Remove the “Scan Credit Card” button
  • Followed by the credit card number question, the chatbot should ask for expiration date and CVV, see screen 15
• Screen 17  
  • This question is asked during the onboarding process or when new forms are pushed to the backend. For the purpose of this prototype challenge, whether this is shown should be based on the local JSON file.
  • In this challenge, we’ll just have an “Email me the forms” button which when tapped, will tell the user that forms have been emailed. See screen 18 for reference, we’ll merge these two and remove the question “How would you like to proceed?”. Instead we show a “Email me the forms” button directly after the 1st message from screen 17, and then continue to screen 19.
• Screen 20
  • After screen 19, workflow assumes the patient is ready to schedule their consultation as soon as they are on boarded to the app.
  • Hitting “Let’s Go” should navigate to the schedule appointment screen (already implemented).
• Screen 16  
  • The user should be able to leave the app, and be able to return to it during the on-boarding process and their progress is saved/bookmarked. For example, the patient can’t schedule a new appointment without us receiving their personal information, Insurance information, Payment set up, and Medical Questionnaire sent to them. Sheepa should be able to keep track of what’s completed in the background. In this prototype, we need some way to simulate this.

 
Me Screens

• Tapping “My Profile” on home screen (already implemented) or tapping the “Me” tab at the bottom will enter screen 03A
• Tapping “My Info” brings up 03B  
  • The initial profile info should come from the answers to the Sheepa screen questions.
  • “Edit Info” doesn’t need to work in this challenge.
• Tapping “Insurance Info” brings up 03C, we will not have any card images on this screen as shown in the design though, just plain text.
  • Initial card info should come from the answers to the Sheepa screen questions.
  • “Scan New Card” will be renamed to “Enter New Card”, but the icon doesn’t need to work yet.
  • “Edit” doesn’t need to work in this challenge.
• Tapping “My Records” brings up 03D
  • Remove the “Review Records” and “Download Records” menus and show a “Coming Soon” message
  • “Help” should bring up screen 06
• Tapping “Payment Info” brings up 03E
  • Initial card info should come from the answers to the Sheepa screen questions.
  • “Payment History” button doesn’t need to work in this challenge.
  • “Scan New Card” should be renamed to “Enter New Card” but the button doesn’t need to work in this challenge.
  • The “Edit” icon doesn’t need to work in this challenge.
• Tapping “Request Prescription” brings up 03F
  • ‘Request’ items: these buttons should be replaced with "Coming Soon" and a note to call 1-800-123-4567. We should make the phone number a hotlink to the actual phone app to call out.
  • “Help” should bring up screen 06
• Tapping “My Progress” will navigate to screen 02A which is not implemented in this challenge 

 
Prescriptions Screen

• Tapping “Prescriptions” on home screen (already implemented) will bring up screen 05
  • For Phase 2, replace buttons with ‘Coming Soon’ and ‘To request CPAP Supplies or Rx Refill, call 1-800-123-4567’; make the phone number a hotlink that can open the native phone app.
  • This screen is basically a duplicate of 03F with different entry paths. 

 
Help Screen

• Tapping “Help” on home screen (already implemented) will bring up 06
  • We’ll have phone and email only in this version. no FAQ yet (leave it as a dead link).
  • We’ll not accept any questions in this version, i.e. users won’t be able to type in a question and get answers, we just show the phone and email on the screen.
• This screen should have Dr’s office number and email
  • Tapping “Help” from 03D and 03F should open this too 

 
GENERAL REQUIREMENTS

• Must follow the provided design unless changes are explicitly mentioned above.
• The UI must work on all mainstream screen sizes (both iOS and Android).
• Show loading spinners when populating data from API / local JSON to UI
• Implement validation errors (for example: invalid input on login / signup screen)
• No errors with prod builds
• You are expected to create a detailed README file including information on how to setup, run and verify your application.
• Please include a brief description of your solution for how Sheepa tracks progress from screen 16.

 
CODE REQUIREMENTS

• ES6 syntax is preferred, as Babel has been setup to handle transpiling the syntax to the current JavaScript standard.
• Follow the existing coding convention and standards in the base code.
• Ensure that there are no lint errors.
• Follow a clean folder structure.
• Create reusable components.

 
JAVASCRIPT REQUIREMENTS

• 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 ES6 linter for code quality

 
LICENSES & ATTRIBUTION

• Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first.
• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

 
OS REQUIREMENTS

• iOS 13+ (iPhones in portrait mode only)
• Android 8+ (phones in portrait mode only)

Final Submission Guidelines

• Full code that covers all the requirements.
• A detailed README file including information on how to setup, run and verify your application.
• You don't need to provide a demo video, verification details should be provided in markdown format instead.