Firefly - Lead Generation App Design Concepts Challenge

How To Compete In This Challenge
- Competing in Topcoder design challenges are easy.
- First, register for the challenge by selecting the “Register” button in the top right.
- Second, review this challenge spec which provides details on what you’ll need to design.
- Third, please review this step-by-step guide on competing.

Challenge Summary:
Welcome to Firefly - Lead Generation App Design Concepts Challenge!
This challenge is focussed on creating an application that will be a lead generation tool enabling authorized Agents & licensed AP to grow their agency while outside the office. The client has an existing application but it has an outdated design.

You will be designing this as a responsive application for Tablet and Mobile devices.

This should be a FUN challenge. Take a look and let's discuss in the forums any questions you may have! We are very excited to see your designs for this challenge.

Round 1

Submit your initial design for a Checkpoint Feedback
- 01 Login (Tablet)
- 02 Dashboard (Tablet)
- 03 Add New Customer (Tablet)
- 03 1 Camera Feature - Scan Driver License (Tablet)
- 04 Customer Information & Generate Insurance Pre-Quote (Tablet)
- 04 1 Auto Pre-Quote (Tablet)
- 04 2 Add/Remove Drivers (Tablet)
- 05 Life Pre-Quote (Tablet)
- 06 Send Quote (Tablet)

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 the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
- 01 Login (Tablet)
- 02 Dashboard (Tablet)
- 03 Add New Customer (Tablet & Mobile)
- 03 1 Camera Feature - Scan Driver License (Tablet & Mobile)
- 04 Customer Information & Generate Insurance Pre-Quote (Tablet)
- 04 1 Auto Pre-Quote (Tablet)
- 04 2 Add/Remove Drivers (Tablet)
- 05 Life Pre-Quote (Tablet)
- 06 Send Quote (Tablet & Mobile)
- 07 App Settings (Tablet)
- 08 Profile Screen (Tablet)

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

Purpose of this Application:
This application will be a lead generation tool enabling authorized Agents & licensed AP to grow their agency while outside the office. The App functionality includes information capture and pre-quotes for Auto and/or Life. The agents will be able to easily work on their leads based on the displayed information, sort, filter and prioritize as to when to follow up on quotes, with the goal to increase sales.

Design Considerations:
- Come up with a modern and intuitive design!
- Think about the mobile user experience, ease of use.
- NOTE: We have an existing application and we are sharing the screenshots from it (please request access to it in forums)
- Come up with a design for these screen sizes:
- - - Tablet: 2048 x 1536 px (landscape)
- - - Mobile: 750 x 1334 px (portrait)

Required Screens:
We wanted to give you an idea on the screens and functionalities:

01 Login:
- The user will be able to login into the app by entering their Dashboard ID and Password
- They will need to agree to the terms & conditions / should be provided as a link/button that shows the screen with detailed t&c.
- There should be some link or button on the screen that takes them to the “About” screen.
- Try to keep it simple.

02 Dashboard:
- Come with ideas/concepts on how a dashboard for agents would help here.
- Some kind of information that shows the overall statistics on how many insurance quotes were generated, etc.
- Show Recent Activities, etc
- How can the user access all the existing customers?
- Provide an option to add a new customer.
- Show us how the overall navigation need to be put up.
- What other information can be shown in a dashboard?

03 Add New Customer:
- To add a new customer, the agent can either enter the details manually (or) scan the customer’s driving license barcode to get all the customer information.
- By default, the user can enter the details manually.
- Provide an option that is prominent in the screen to scan customer’s driving license to automatically enter all information!
- The agent will enter this information: First Name, Last Name, Email, Phone, License, DOB, Gender, Address.
- If customer’s driving license is scanned then all the above information are captured automatically and the agent just need to review them
- Once all information is entered, they save it by tapping a button.

03 1 Camera Feature - Scan Driver License:
- The user will be able to scan the barcode within the driving license, think on how to show this.
- Show specific markers/guides within the screen, so this lets them know how to scan.
- Once the barcode has been scanned, how do you think we need to show the success message.
- If there is some issue with scanning, how to show the error screen?
- All information is captured automatically and agent reviews them.

04 Customer Information & Generate Insurance Pre-Quote:
- From the customer information screen, we need a way to choose what type of insurance is required for the user and then move to enter details for that particular insurance (currently in existing application, a user can swipe right to view different type of insurance along with the different details that need to be entered for each of the them).
- Allow the user to share/send the generated pre-quote to customer mail id (please see 06 Send quote below)

04 1 Auto Pre-Quote:
- In this screen, the agent will have the option to choose the quote settings (basic, enhanced and custom), think on how to choose them!
- Based on the chosen quote settings, we show them:
- - The cost (monthly and 6 months): Insurance cost for “Monthly” and “6 Months” are shown
- - Pre-canned vehicles/drivers: Show list of vehicles and drivers for whom they need this insurance coverage. Show options to add/remove vehicles and drivers (please see more details on this below)
- - Pre-fixed Set of coverages (which are customizable):
- - - List of coverage amount are customizable i.e. coverage amount for each can be customized...for ex: in auto insurance, coverage could include “Bodily Injury (they can can coverage amount for this as $20K out of $30K cap), Property damage liability as $5K, Medical Coverage as $1K, Uninsured Motorist BI as $1K, Comprehensive as $$, etc
- - Applied Discounts (just include this section as a placeholder)
- We are open to your thoughts on how this information need to be shown based on the chosen quote settings.

04 2 Add/Remove Drivers:
- We need a screen that allows agents to add or remove vehicles
- For each of the vehicle, we need the option to associate it with a driver (should be able to associate a vehicle with more than one driver)
- Provide a way to add a new driver, new driver’s can also be added by scanning driver’s driving license.

05 Life Pre-Quote:
- Show the monthly cost.
- Show the coverages it includes like amount, the term (in years), age and any critical health issues that need to be mentioned.
- NOTE. All these information will be customizable, think on how the user will customize these details.

06 Send Quote:
- When the user selects an option to email the insurance pre-quotes to customers, show a preview of each of the insurance pre-quote along with the cost / with option to edit each of them in case of any mistakes.
- Provide a way to enter the email address
- One all information is reviewed, it is sent to the customer.

07 App Settings:
- This screen allows agents to select the type of pre-quotes (Auto, Home, Life, etc) they will be generating for customers, they can switch them on/off.
- They can decide what type of activity they want to do with this app, just generate leads or generate pre-quote (this will also include generating leads).
- Other app settings include, “Voice over (on/off), camera guidelines (on/off).

08 Profile Screen:
- Profile screen just includes these fields “Agent of Record, Producer code”

Branding Guidelines:
We are sharing a screenshot from the client's website that will help you grab the colors and other styles, please find the in below link
https://drive.google.com/open?id=1s4EqYu17qP8tipkJoAEa7VNdHfMln4_6

~
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Focus on User Experience / how the user interacts within the dashboard and other pages

MarvelApp Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvel app request to csystic@gmail.com
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).

Target Users:
- Insurance Agents

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience.
- Consistency across the UX/UI
- How well you interpret the example screens (business relevance) and show us new ideas and concepts.

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File:
- Submit JPG/PNG for your submission files
- Submit Marvelapp as part of your submission.

Source Files:
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file, Sketch or Adobe XD!

Final Fixes:
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.