TranZform - Engage Broker Web Application Design Challenge

Welcome to TranZform - Engage Broker Web Application Design Challenge.

Our client is looking forward to redesigning an existing application that helps healthcare brokers with the insurance purchase workflow for their clients. As it’s expected, the amount of information to be inquired/collected can be significant. How do we soothe out this painful process? What practices can we implement to make this process fast and easy to use? We need your help to come up with a design solution keeping those pain points in mind.

Round 1

Submit your design for a checkpoint feedback.

2. Renewal Application (Desktop)

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

1. Book of Business (Desktop)
2. Renewal Application (Desktop and 2 Tablet Views)

- 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 for the Broker application process that reduces steps and makes the product easy to use.
• To provide a seamless flow and best in class UI experience.
• Desktop web application (desktop) responsive to a tablet device.

Project Background

• The purpose of this project is to modify an existing web application per the objective.
• This is an existing application that we are looking to improve the overall design and workflow without changing the required information among steps for the enrollment process.
• This web portal is used by healthcare broker's to purchase insurance products for Individuals, Small Group and Large groups. The application replaces a very lengthy manual paper-based process used by brokers today. This product provides real-time integration into the enrollment system used by Healthcare Insurance companies.
• We are NOT looking forward to simply rebrand the look and feel. We need to see an improvement in the easiness and design thoughts on the amount of information, how to collect it in a smooth way for the user to feel engaged for the length of the form (s).

Screens/Features
Overall

• Use the provided screenshots as a reference for data sample BUT rethink the whole user flow to fulfill the goals and design problem pain points (amount of steps, lengthy information to collect, and so on)
• Design an overall page that has navigation according to what you see in screen Ind_BoB_with_Menu.

1. Book of Business (Desktop)

• See Application 00 and Application 00b screens.
• They show how to start an application process.
• You should provide this selection method as well.

2. Renewal Application (All Desktop - 2 Tablet views)

• Main focus should be on the application process flows as stated below. The steps of the existing are meant to show you how the application process actually works, we do not want to see the same organization and structure of steps. After you come with your own solution, there could be 4 steps, 7 steps, 15 steps, a wizard, or any type of different approach you can come up with that accomplishes the goals.
• Feedback elements as status and sub-navigation (save, next, cancel, etc) should still exist in your workflow redesign.
• ALL STEPS should be presented in your design, meaning that all the presented information in the screenshot must be captured:
  • Group Information
  • Plan Selection
  • Census Data
  • Enrollment
  • Group Eligibility
  • Agents and Brokers
  • Terms and Conditions
  • Signature
  • Review and Submit.
• Show two (2) tablet views of the workflow.

Section 508 Compliance

• Your design must consider design principles and practices to pass Section 508 compliances for accessibility purposes (colors, typography, navigation, layout, and so on).
• https://www.hhs.gov/web/section-508/making-files-accessible/checklist/html/index.html
• https://www.viget.com/articles/a-designers-guide-to-accessibility-and-508-compliance/

Screen Specifications

• Desktop: 1280px width. Height as much as needed.
• Tablet: 1536 x 2048.
• Apply mobile-first design principles to smooth out the transition to mobile and tablet views.
• Make sure your work is in a vector format, for retina scaling and high fidelity.

Branding Guidelines

• Use the provided branding guidelines to style your design and content (typography, colors, layout, components, etc). 

Design Assets
Folder: https://drive.google.com/open?id=1Gen0heuzrUx_M4nv7P2FcwOxnvPRumE3 

• Screenshots: existing application snapshots.
• Logo: current application logo.
• Branding Guidelines: styles to adhere to visual design.

Target Audience

• Healthcare insurance Brokers.

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 the 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/30102274
  • 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.