Health - CRM Hybrid Mobile App Design Challenge

Welcome to the “Health - CRM Hybrid Mobile App Design Challenge". In this challenge we need your help to design the same functionalities with an improved experience for the mobile hybrid app from existing web app that clients have. This CRM mobile app enables users to manage their contacts and activities, send Scope of Appointments and perform quote and enrollments.

Round 1

Submit your initial designs for checkpoint feedback
01) Dashboard
04) Contact - Detail
06) Available Plans
09) LearningCenter

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented
01) Dashboard
02) Contacts
03) Contact - Overview
04) Contact - Detail
05) Contact - SOA
06) Available Plans
07) Share Plans
08) Account Preferences
09) Learning Center

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

CHALLENGE OBJECTIVE

• Design hybrid mobile screens for iOS and Android.
• Create 9 UI screens with seamless interactions.
• Provide a simple, clean and modern design which follows the existing app.

BACKGROUND OVERVIEW

• Our client is an insurance company in United States who already have their existing CRM web app and plan to build a dedicated hybrid mobile app. 
• This CRM is used to manage agents contacts and activities, send Scope of Appointments and perform quote and enrollments. 
• We will focus on health insurance products today but may be extended to Life Products in the future.

TARGET AUDIENCE
Insurance agents who will use this CRM hybrid mobile app.

GLOSSARY

• CRM: Customer Relationship Management (CRM) is a technology for managing a company's relationships and interactions with customers and potential customers. The goal is simple: Improve business relationships. A CRM system helps companies stay connected to customers, streamline processes, and improve profitability.
• SoA: The Scope of Appointment is a federally required form used to document an appointment between an insurance agent and beneficiary to ensure that no other types of products are discussed outside of what the beneficiary originally requested.
• Quote: insurance company's estimate of what they would charge for issuing a new policy.
• Enrollments: the process through which an approved applicant is signed up with the health insurance company and coverage is made effective.

PERSONA

• Name: Brad Cooper
• Role: Insurance Agent
• Goals: Maintaining customer relationship, sending Scope of Appointment, perform quote and enrollments.
• Frustrations: Only a CRM web app is available and it is difficult to access using mobile phones.
• Wants: A dedicated CRM hybrid mobile app to allow access using mobile anytime, anywhere.

USER STORY

• Brad logs in to the CRM using his credential (out of scope) and lands on the dashboard where he can see a list of his customers with the contact information.
• He clicks on the contact to see overview information such as provider, prescription, pharmacy, and do additional action required. 
• He clicks on contact details from the overview  to see customer details and can edit it.
• He clicks on Scope of Appointment from overview to view and sends a SoA if needed.
• He clicks on Available plans from overview to see available plans and share the plans if needed.
• He clicks on Account Preferences from overview to see communication preferences from customers and can edit if needed.
• Other than doing the customer relationship task, Brad can also access the learning center if he needs additional information.

CHALLENGE FORUM
If you have any questions regarding challenge requirements, please ask in the forum challenge.

JUDGEMENT CRITERIA

• Creativity: Impactful; the solution is different or unique from what is already out there and can be implemented.
• Exploration: Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
• Aesthetics: Hi-fidelity design; provide a top-notch finished looking visual design.
• Branding: Strict; carefully follow the provided guidelines and stick to them.

SCREEN REQUIREMENTS
Please make sure your design includes the following screens/sections. Our client is open to your suggestions about the structure of the screens as long as the screens deliver the same content and allow for the same functionality that is shown on the attached web app screenshots.

01) Dashboard
Refer to 01-00-dashboard.png

• Users will land on Dashboard once they logged in. 
• On the dashboard, user can view:
  • Menu: dashboard, contacts, learning center, account setting.
  • Recent activities of all their contacts with the last updated date.
  • Number of confirmed applications, 
  • Client Snapshot which shows the number of contacts that are in each stage.
  • Resources which enable users to access Learning Center and Contact Support.

02) Contacts 
Refer to 02-00-contacts.png, 02-00a-card-view.png, 02-00b-sort-functionality.png, 02-00c-filter-functionality.png, 02-00d-client-import.png, 02-00e-add-contact.png, 02-00f-add-reminder.png

• Once users click on “Contact” on the menu, they will land on this screen. 
• This screen will list all their contacts with details: full name, stage (enrolled, contacted, SOA Sent, SOA Signed, Quoted, Applied, Enrolled, Lost), reminder, primary contact, and action (view contact, find a plan, send scope of appointment, add new reminder). Users can also update stage, view and add reminders on the list.
• Users can switch from list to card view. Show both views in your design.
• Provide simple search, sort and filter functionality. (refer to provided screenshot for details).
• Provide client import and add new functionality (refer to provided screenshot for details).
• Provide add reminder functionality on contact details. (refer to provided screenshot for details).

03) Contact - Overview
Refer to 03-00-contact-overview.png

• If users click on one of their contacts from the list, they will land on this screen. 
• This screen contains overview information of a contact: 
  • Personal information: contains full name, created date, stage, email, phone and address with indicator which is the primary way to communicate with the customer.
  • Reminders section: contains reminders and notes created for this contact. Users can add new reminders and mark a reminder as complete.
  • Activity section: contains recent activities of this contact. Users can add new activity.
  • Client Notes section: contains the client notes provided by users. Users can edit the client notes.
• There will be a navigation to enable users to jump between: view overview, details, scope of appointments, preferences and view available plans.

04) Contact - Detail
Refer to 04-00-contact-details.png, 04-00a-contact-details-filled.png, 04-00b-add-provider.png, 04-00c-add-prescription.png, 04-00d-add-pharmacy.png, 04-00e-edit-contact.png, 04-00f-delete-contact.png

• If users click on “Details” from the navigation on 03) Contact Overview, they will land on this screen. 
• This screen display information about customer:
  • Contact Details section: contains first name, middle name, last name, date of birth, contact record type, email, phone number, label, address, address 2, city, ZIP, state, county. Add edit functionality on this section.
  • Provider section: contains information about the provider such as provider name, phone number, address, zip code. Show functionality to add and remove providers.
  • Prescription section: contains information about prescription such as drug name, type, dosage. Show functionality to add and remove prescriptions.
  • Pharmacy section: contains information about pharmacies near the customer area. Show functionality to add and remove prescriptions.
• Provide ability to edit and delete contact (refer to provided screenshot for details).

05) Contact - SOA
Refer to 05-00-contact-soa.png, 05-00a-send-soa.png, 05-00b-soa-sent.png

• If users click on “Scope of Appointment”  from the navigation on 03) Contact Overview, they will land on this screen. 
• This will be a simple screen to enable users to send the Scope of Appointment to the selected customers using email, text message, or new email/mobile number.
• Once it is sent, it will be shown in the list.

06) Available Plans
Refer to 06-00-available-plans.png, 06-00a-plan-details.png

• If users click on “View Available Plans”  from the navigation on 03) Contact Overview, they will land on this screen. 
• This screen will list all available plans (refer to the screenshot).
• Show filter and sort features.
• Also show how the plan details will look like.

07) Share Plans
Refer to 07-00-share-plans.png, 07-00a-share-plans.png

• If users click on “Share Plans” from plan details, they will land on this screen.
• This will be a simple screen to enable users to share plans to the selected customers using email, text message, or new email/mobile number.

08) Account Preferences
Refer to 08-00-account-preferences.png

• If users click on “Preferences”  from the navigation on 03) Contact Overview, they will land on this screen. 
• On this screen users can set the Communication Preferences of a selected customer.
• Refer to screenshot for more details.

09) LearningCenter
Refer to 09-00-learning-center.png

• Users will land on this screen if they click one Learning Center on the menu on the Dashboard.
• This will be a simple screen where users can view and download the recommended reads. (refer to the provided screenshot).

DEVICE SPECIFICATIONS

• Hybrid Mobile: we will using iPhone as references: 375 x 812px, height adjusted accordingly (export your design in @2x or @3x)

DOCUMENTATION
Please check the forum.

BRANDING GUIDELINES
Please check the forum.

MARVEL PROTOTYPE

• We need you to upload your screens to Marvel App
• Please request for marvel app in the challenge forum
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)

SUBMISSION AND SOURCE FILES
Submission File

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources

Source Files
All source files of all graphics created in either Adobe XD, Figma or Sketch and saved as an editable layer
 
FINAL FIXES
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify the overall colors