Telehealth Mobile App Concept Design Challenge

Welcome to Telehealth Mobile App Concept Design Challenge.

Telehealth is a well-known health center in the United States by establishing nurturing relationships that care about patient’s health. We want to translate this experience into a mobile application.

Round 1

Submit your design for a checkpoint feedback.


01. Home
02. Schedule In-Clinic Visit
03. Schedule Video Visit

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Submit your final design plus checkpoint feedback.

01. Home
02. Schedule In-Clinic Visit
03. Schedule Video Visit
04. On-Demand Video Visit
05. My Health
06. Clinic Finder


- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Objectives

• To create UI screens.
• To provide a seamless flow to complete user goals.
• Mobile application.

Application Overview

• We are looking forward to experimenting to understand how the Telehealth experience and brand could translate to a patient-facing mobile application focused on virtual care.
• The primary purpose of this application for patients would be convenience and ease of access:
  • 1. Make in-office appointments easier/more convenient to schedule
  • 2. Introduce telehealth/virtual care feature where patients wouldn't have to come into a physical clinic and could be seen by a doctor from the convenience of their own home via the app.
• We're focused on current patients that already have a relationship with us.
• The output of this application will be used as a usability testing artifact (with patients), to aid in further requirements definition. We would like the Marvelapp prototype to mimic a production app as close as possible for continued research/testing purposes.

Design Goals & Principles

• Personalization is a tenet. Healthcare is deeply personal. Focus on the individual and THEIR experience. One of the practices we advise is to tailor the application to the individual based on the information we know about them. The user should feel the application is directly talking to them.
• We prefer a simple and clean design over complex and flashy.
• Photography and illustrations are both encouraged but lead with photography and support with illustrations.

Screens/Features
Note:
These are skeleton requirements, brainstormed features simply to be used as inputs into this challenge. Feel free to come up with ideas and concepts for this mobile concept, we are open to alternative workflows and alternative features not listed here that would help the overall application. In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

• Creativity: 7
  1: barely new ideas
  10: a utopic product with features not proven to be able to be fully implemented
• Aesthetics: 10
  1: low-fidelity design, wireframe or plain sketch
  10: top-notch finished looking visual design
• Exploration: 8
  1: strictly follow an existing reference or production guideline
  10: open to alternative workflows/features not listed here that would help the overall application
• Branding: 10
  1: don't care at all about the branding just functionality
  10: without a properly branded product there is no success

01. Home

• There are login/register pages (out of scope) but authentication is not required to access the application content and features.
• Welcomes patients to the application. Should we add a Welcome message?
• Highlights the core actions we want patients taking:
  • Initiating an on-demand appointment
  • Scheduling a video/virtual visit
  • Scheduling an in-person clinic visit
• Users should be able to Cancel or Reschedule appointments.
• Should we highlight/reference upcoming appointments?
• For navigation, consider an extra page for Account Settings.

02. Schedule In-Clinic Visit

• Ability for patients to search for and schedule an in-clinic appointment.
• For context, see the existing scheduler in the forum. The current workflow should not be a limiting factor
• Example Workflow (for grounding purposes, definite room for creativity and exploration here)
  • Patient identifies if new or existing patient: This part of the application could be used by patients logged into the application and also those not logged in. What would be the best way to handle this piece of information? We would like to see both scenarios if that’s your solution, feel free to suggest.
  • Patient identifies the reason for the visit
    • Annual Physical
    • Consult/Referral
    • Flu Shot
    • Follow-Up
    • Medication Check
    • Problem
    • Sick Visit
  • Patient searches for open appointments
  • Patient can filter by location, date, and providers
  • Patient finds and selects a preferred time slot, location, and provider
  • Patient enters patient information
    • First Name
    • Last Name
    • Email
    • Phone Number
    • Date of Birth
    • Address
    • City
    • State
    • Zip
  • Patient confirms appointment information and books appointment (Add to calendar)
  • Patient views appointment confirmation.

03. Schedule Video Visit

• Ability for patients to schedule a date/time for a video visit in the app, at a later time.
• Example Workflow (for grounding purposes, definite room for creativity and exploration here):
  • 1. Book video/virtual visit
    • Patient identifies if new or existing patient
    • Patient identifies the reason for the visit
      • Annual Physical
      • Consult/Referral
      • Flu Shot
      • Follow-Up
      • Medication Check
      • Problem
      • Sick
      • Visit
    • Patient searches for open appointments
    • Patient can filter by date (highlight first available appointments?) 
    • Patient finds and selects the preferred time slot
    • Patient enters patient information
      • First Name
      • Last Name
      • Email
      • Phone Number
      • Date of Birth
      • Address
      • City State
      • Zip
    • Patient confirms appointment information and books virtual appointment (Add to Calendar)
  • 2. Return to the application at the appointment time
  • 3. Start appointment
  • 4. Conduct appointment
  • 5. Complete
• The mentioned steps 3, 4 and 5 represent the workflow of the interaction that occurs between the actors, the actual video call itself. For this design exercise, we would like to see a placeholder of the video call, no need to design those screens BUT we need to see how a patient would enter a video call, waiting for a video call appointment to start, and then a completion/conclusion screen.
• How does patient view/access appointment they scheduled when they return to the application?

04.  On-Demand Video Visit

• Ability for a patient to book, initiate and conduct an on-demand visit, immediately in the application.
• Example Workflow (for grounding purposes, definite room for creativity and exploration here):
  • Patient selects Book Video Visit
  • Patient presented information explaining how it works
  • Patient identifies if new or existing patient
  • Patient identifies the reason for the visit
    • Annual Physical
    • Consult/Referral
    • Flu Shot
    • Follow-Up Medication
    • Check Problem
    • Sick
    • Visit
    • Others... (design to scale)
  • Patient enters patient information
    • First Name
    • Last Name
    • Email
    • Phone Number
    • Date of Birth
    • Address
    • City
    • State
    • Zip
  • Patient is informed how long wait will be.
  • Patient held in the waiting room
  • Patient is connected to a physician to conduct appointment
  • Patient completes appointment

05. My Health

• Ability to access basic health record components from the app.
• Design an overview of this page, summarized data with options to drill-down further.
• Example Contents:
  • Appointments
    • Displays both upcoming appointments and past, historical appointments
    • Appointment details
    • Cancel appointment
    • Reschedule appointment
  • Test Results
  • Medications Care
  • Summaries
  • Vitals
  • Medical History
  • Medical Documents

06. Clinic Finder

• Ability to find a physical Telehealth Clinic nearest to the patient.
• Should we design a map interface?

Screen Specifications

• Phone: 750px width. Height as much as needed.
• Make sure your work is in a vector format, for retina scaling and high fidelity.

Branding Guidelines

• A logo is provided. 
• Follow the branding document and Telehealth website for style reference. Not to be considered a limiting factor.

Accessibility Standards

• It’s mandatory to be compliant with W3C/WAI and WCAG 2.0. In terms of design, make sure of the following:
• Color contrast, compliance with WCAG 2.0: https://accessible-colors.com/
  • According to the Web Content Accessibility Guidelines 2.0 (WCAG), to maintain AA levels of accessibility, the visual presentation of text and images of text should have a contrast ratio of at least 4.5:1 except in the following cases:
    • Large Text: Large scale text and images of large scale text can have a contrast ratio of at least 3:1.
    • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that is not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
    • Text that is part of a logo or brand name has no minimum contrast requirement.
    • Minimum text size: can be no smaller than 16 pixels[1] to maintain legibility and readability. • Legal text: can only be shown in black and should be no smaller than 12 pixels.

Target Audience

• Targeted to the US only.
• Focus on current Telehealth patients.
• Registered Patients: patients that have registered an online account.
• Non-Registered Patients: patients that have not yet registered an online account.
  • Can still access appointment scheduling.
• Majority of the patients of ours are between 30 - 70 years old. 50 - 59, and 60 - 69 age brackets do skew higher for us. Slightly more female than male.

Judging Criteria

• How well you plan the user experience and capture your ideas visually.
• Are mobile-first principles properly applied to your solution?
• How well you implement the challenge requirements.
• Cleanliness of your graphics and design.
• Creativity and ease-of-use is key to success as it must be engaging to users.

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop, Adobe XD or Sketch.
• Numbered/Ordered JPG screen files.
• Marvel Prototype
• We need you to upload your screens to Marvel App.
  • Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30112236
  • Do not use the forums to request for MarvelApp.
  •  Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
  • You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).

Stock Artwork (Illustrations, Icons, Photography)

• Stock artwork is allowed for this challenge.
• Make sure to declare all your assets properly or you might fail screening.
• You don’t want to fail screening? Read this.