Challenge Summary
How To Compete In This Challenge
Competing in Topcoder design challenges is 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.
Welcome to the Firefly Agents Dashboard Responsive Web App Design Concept Challenge!
In this challenge we need your help to design a web tool that will help insurance agents find the best prospects to work on. The client is looking for your creativity to show how the user should accomplish this.
Let us know if you have any questions on forums!
1. Dashboard (Insurance Agent)
2. Prospects Table (Insurance Agent)
3. Edit Multiple Prospects (Insurance Agent)
4. Prospect Details (Insurance Agent)
1. Dashboard (Insurance Agent)
2. Prospects Table (Insurance Agent)
3. Edit Multiple Prospects (Insurance Agent)
4. Email Users (Insurance Agent)
5. Prospect Details (Insurance Agent)
6. Dashboard + Prospects Table (Corporate User)
7. Dashboard + Prospects Table (Dual Agent)
Design Problem
The purpose of this project is to design a responsive web application that will be used by insurance agents to track quotes not closed and help them prioritize in reaching the prospects that are most probable to turn into customer (close the quote).
User Story
Please make sure your design incorporate this userstory.
The insurance agent checks his dashboard to see an overview of his current activity by checking his stats and graphs. He’s also able to see a table with his prospects that he has already sent quotes to, for a period of 1 year. User has to find specific prospects so he applies some filters to query the table. He’s also able to sort the table, search for exact entry, prioritize prospects and export results. Once he finds the result he’s looking for, he can see more details of it.
Roles
- Single Insurance Agent (Mike): most of the requested pages are addressing to him as he’s our main target audience
- Corporate User (John): he is a manager, able to see what the agent’s view to check his activity, but cannot make any updates
- Dual Agent (Christina): is a single insurance agent, who can serve customers in two states ( EX: CA and AZ)
Required Pages
In this challenge we are asking for a couple of responsive desktop pages to illustrate the above scenario. Use your creativity at best to design an easy to use application for the insurance agents.
Because there are a couple of industry specific terms you can find their explanation below.
Glossary:
Prospect = a potential new customer who can be approached for buying an insurance.
Carrier = insurance company
X – Date = expiry date of policy with current insurance provider
Loss date = actual date of accident or violation
Date modelled = this is the date when the entry was created
High propensity to buy = customer that is likely to buy the insurance
Hot zip code = zip code with persons living there who are likely to buy
Competitive carrier = other insurance agents / competition
Query = a set of one or multiple filter applied to the table to find specific prospects
If there are other terms you’re not clear, please ask in the forums.
1. Dashboard (Insurance Agent)
When the user lands on this page he will see an overview of his available prospects data shown as stats and charts.
Example of data to show:
- Insurance Records: Total records = 2,000; of that 75% are Auto Insurances and 25% are Home Insurances
- Graphical view based on prior carrier (before a customer signs his deal with Mike, he is already insured to another company – this graph should show distribution of the other insurances companies among Mike’s customers)
- Graphical view based on geography (visual representation of customers distribution)
Below the charts and stats section, the user will be able to define a query to filter his large data set by the following fields (note: this will also be headers in the resulted prospects table which will be displayed on next page).
- Customer Name
- Customer Address
- Line of Business (Auto or Home) – this is the insurance type
- Quote Date
- Quote Number
- Quote Amount
- X-Date
- Prior Carrier
- Loss Date
As the user has a large table with many entries he wants to have a more in depth search to find records by multiple values. He can apply basic queries or more complex ones based on the fields mentioned above (table’s header).
Base queries to narrow the data set (examples):
- Show all quotes for a specific carrier
- Show all quotes in a certain city/zip
Complex queries: filter abilities for users to select their own criteria outside of the base queries (examples):
- Ability to select individual values or multi-select (for a given field)
- Ability to set multiple concurrent filters
- Ability to easily reset filters
Query example: Customer Name=”John Doe” and Prior Carrier=“Allstate Corp”
2. Prospects Table (Insurance Agent)
The result of the previous query will be displayed on a second page in the prospects table. This table will include many columns, some are visible by default and others can be shown if the user wants to.
Fields to be shown by default are (previously fields used in query):
- Customer Name
- Customer Address
- Line of Business (Auto or Home) – this is the insurance type
- Quote Date
- Quote Number
- Quote Amount
- X-Date
- Prior Carrier
- Loss Date
The user can customize the table’s columns by hiding some of the above fields and show others optional like:
- Priority (high, medium, low)
- Interest (hot, warm, cold)
- Work in Progress (yes, no)
- Work Status (no longer working, not interested)
- Date Modelled
- High Propensity to Buy
- Hot Zip Code
- Competitive Carrier
- Comments (max 500 chars)
We’d like to see how this customization will look like.
User can also perform the following:
- Filter the table by all fields (visible by default and optional)
- Search the table for a particular prospect
- Sort by column headers
- Select and edit multiple rows/prospects at the same time (read below)
- Email users with top 5 quotes that meet certain criteria (read below)
- Export to Excel and CSV (not in scope to show the related flow)
- Upload to CRM (not in scope to show the related flow)
- Can go back to dashboard page
3. Edit Multiple Prospects (Insurance Agent)
The application will allow the user to select multiple prospects to do bulk editing of the editable fields.
4. Email Users (Insurance Agent)
Once the user filters the table by some criterias, he should be able to email a person those results. This page will include:
- Email of the person to send the email to
- Subject
- Comment fields
- Attached table results
5. Prospect Details (Insurance Agent)
When the user will click on a prospect name he will see the details about him/ her.
This will include all the detailed information or extra columns that are too much to show in table view.
6. Dashboard + Prospects Table (Corporate User - John)
Corporate users are managers, like John, that need to search by an agent’s code like of Mike’s(6 digit) and see his dashboards and prospects table in the same way Mike does, the only difference being that John doesn’t has edit options. We’d like to see how the dashboard looks like.
7. Dashboard + Prospects Table (Dual Agent - Christina)
Some of the agents like Christina, can serve customers in two states (ex: CA – California and AZ - Arizona). The dashboard and prospects table are pretty much like what Mike sees, the only difference is that we need a way to toggle between the 2 codes or easy filter based on them.
Branding
You can find the client’s branding primary colors from here. Feel free to add other secondary colors that will complement that palette.
Stock Artwork & Icons
- Stock photo and icons are allowed for this challenge. Please remember to declare them so you don’t fail screening.
Target Devices
Responsive desktop application
- Desktop: 1280px width and height as much as needed
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Insurance Agents who needs quick access to information
- Corporate Users to want to see how the agents are performing
Judging Criteria
- How fast can the find desired prospects? Does he needs many clicks or just few?
- How good is the user experience
- Does the design follows the branding guidelines?
- Hierarchy and organization of content
- Cleanliness of your graphics and design.
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD or Sketch. Layers should be named and well organized.
Competing in Topcoder design challenges is 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.
Welcome to the Firefly Agents Dashboard Responsive Web App Design Concept Challenge!
In this challenge we need your help to design a web tool that will help insurance agents find the best prospects to work on. The client is looking for your creativity to show how the user should accomplish this.
Let us know if you have any questions on forums!
Round 1
Submit your initial design for a Checkpoint Feedback1. Dashboard (Insurance Agent)
2. Prospects Table (Insurance Agent)
3. Edit Multiple Prospects (Insurance Agent)
4. Prospect Details (Insurance Agent)
Round 2
Submit your Final Design plus Checkpoint Updates1. Dashboard (Insurance Agent)
2. Prospects Table (Insurance Agent)
3. Edit Multiple Prospects (Insurance Agent)
4. Email Users (Insurance Agent)
5. Prospect Details (Insurance Agent)
6. Dashboard + Prospects Table (Corporate User)
7. Dashboard + Prospects Table (Dual Agent)
Design Problem
The purpose of this project is to design a responsive web application that will be used by insurance agents to track quotes not closed and help them prioritize in reaching the prospects that are most probable to turn into customer (close the quote).
User Story
Please make sure your design incorporate this userstory.
The insurance agent checks his dashboard to see an overview of his current activity by checking his stats and graphs. He’s also able to see a table with his prospects that he has already sent quotes to, for a period of 1 year. User has to find specific prospects so he applies some filters to query the table. He’s also able to sort the table, search for exact entry, prioritize prospects and export results. Once he finds the result he’s looking for, he can see more details of it.
Roles
- Single Insurance Agent (Mike): most of the requested pages are addressing to him as he’s our main target audience
- Corporate User (John): he is a manager, able to see what the agent’s view to check his activity, but cannot make any updates
- Dual Agent (Christina): is a single insurance agent, who can serve customers in two states ( EX: CA and AZ)
Required Pages
In this challenge we are asking for a couple of responsive desktop pages to illustrate the above scenario. Use your creativity at best to design an easy to use application for the insurance agents.
Because there are a couple of industry specific terms you can find their explanation below.
Glossary:
Prospect = a potential new customer who can be approached for buying an insurance.
Carrier = insurance company
X – Date = expiry date of policy with current insurance provider
Loss date = actual date of accident or violation
Date modelled = this is the date when the entry was created
High propensity to buy = customer that is likely to buy the insurance
Hot zip code = zip code with persons living there who are likely to buy
Competitive carrier = other insurance agents / competition
Query = a set of one or multiple filter applied to the table to find specific prospects
If there are other terms you’re not clear, please ask in the forums.
1. Dashboard (Insurance Agent)
When the user lands on this page he will see an overview of his available prospects data shown as stats and charts.
Example of data to show:
- Insurance Records: Total records = 2,000; of that 75% are Auto Insurances and 25% are Home Insurances
- Graphical view based on prior carrier (before a customer signs his deal with Mike, he is already insured to another company – this graph should show distribution of the other insurances companies among Mike’s customers)
- Graphical view based on geography (visual representation of customers distribution)
Below the charts and stats section, the user will be able to define a query to filter his large data set by the following fields (note: this will also be headers in the resulted prospects table which will be displayed on next page).
- Customer Name
- Customer Address
- Line of Business (Auto or Home) – this is the insurance type
- Quote Date
- Quote Number
- Quote Amount
- X-Date
- Prior Carrier
- Loss Date
As the user has a large table with many entries he wants to have a more in depth search to find records by multiple values. He can apply basic queries or more complex ones based on the fields mentioned above (table’s header).
Base queries to narrow the data set (examples):
- Show all quotes for a specific carrier
- Show all quotes in a certain city/zip
Complex queries: filter abilities for users to select their own criteria outside of the base queries (examples):
- Ability to select individual values or multi-select (for a given field)
- Ability to set multiple concurrent filters
- Ability to easily reset filters
Query example: Customer Name=”John Doe” and Prior Carrier=“Allstate Corp”
2. Prospects Table (Insurance Agent)
The result of the previous query will be displayed on a second page in the prospects table. This table will include many columns, some are visible by default and others can be shown if the user wants to.
Fields to be shown by default are (previously fields used in query):
- Customer Name
- Customer Address
- Line of Business (Auto or Home) – this is the insurance type
- Quote Date
- Quote Number
- Quote Amount
- X-Date
- Prior Carrier
- Loss Date
The user can customize the table’s columns by hiding some of the above fields and show others optional like:
- Priority (high, medium, low)
- Interest (hot, warm, cold)
- Work in Progress (yes, no)
- Work Status (no longer working, not interested)
- Date Modelled
- High Propensity to Buy
- Hot Zip Code
- Competitive Carrier
- Comments (max 500 chars)
We’d like to see how this customization will look like.
User can also perform the following:
- Filter the table by all fields (visible by default and optional)
- Search the table for a particular prospect
- Sort by column headers
- Select and edit multiple rows/prospects at the same time (read below)
- Email users with top 5 quotes that meet certain criteria (read below)
- Export to Excel and CSV (not in scope to show the related flow)
- Upload to CRM (not in scope to show the related flow)
- Can go back to dashboard page
3. Edit Multiple Prospects (Insurance Agent)
The application will allow the user to select multiple prospects to do bulk editing of the editable fields.
4. Email Users (Insurance Agent)
Once the user filters the table by some criterias, he should be able to email a person those results. This page will include:
- Email of the person to send the email to
- Subject
- Comment fields
- Attached table results
5. Prospect Details (Insurance Agent)
When the user will click on a prospect name he will see the details about him/ her.
This will include all the detailed information or extra columns that are too much to show in table view.
6. Dashboard + Prospects Table (Corporate User - John)
Corporate users are managers, like John, that need to search by an agent’s code like of Mike’s(6 digit) and see his dashboards and prospects table in the same way Mike does, the only difference being that John doesn’t has edit options. We’d like to see how the dashboard looks like.
7. Dashboard + Prospects Table (Dual Agent - Christina)
Some of the agents like Christina, can serve customers in two states (ex: CA – California and AZ - Arizona). The dashboard and prospects table are pretty much like what Mike sees, the only difference is that we need a way to toggle between the 2 codes or easy filter based on them.
Branding
You can find the client’s branding primary colors from here. Feel free to add other secondary colors that will complement that palette.
Stock Artwork & Icons
- Stock photo and icons are allowed for this challenge. Please remember to declare them so you don’t fail screening.
Target Devices
Responsive desktop application
- Desktop: 1280px width and height as much as needed
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Insurance Agents who needs quick access to information
- Corporate Users to want to see how the agents are performing
Judging Criteria
- How fast can the find desired prospects? Does he needs many clicks or just few?
- How good is the user experience
- Does the design follows the branding guidelines?
- Hierarchy and organization of content
- Cleanliness of your graphics and design.
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD or Sketch. Layers should be named and well organized.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.