BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$50‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the Life Insurance Premium Calculator Design Concepts Contest! This contest is focused on creating design concepts/visual ideas/screen effects for a web-based mobile application to calculate life insurance premiums. Please keep in mind that this is not a native mobile application - it is web based.

We currently have the "insurance premium calculator" working for desktop web browsers and now we want to build one for smartphone browsers!

In this contest we are looking for DESIGN CONCEPTS on how UI/UX of this web-based mobile application should be designed in order to help achieve our business goals.

Round 1

Submit your design for a checkpoint status review
1. Overall screen flow
2. Draft design of user attributes entry (US-1) - visualize how you design a sequence of user attributes entry actions (wizard, single page, multipe pages, etc)
3. Draft design of insurance plan recommendation (US-2) - visualize how you present users a set of recommended plans upon user attributes entry action.
3. Draft design of premium calculator (US-3) - visualize how you express 3 patterns of plan structure (DE-7) and where you locate the total premium amount & a list of selected insurance plans for easy access.
4. Draft design of calculation result sending action (US-8) - visualize how you design the send email screen(s) for user-friendly UI/UX.
If you think there is a more important features to show - you can replace screens on this list

Round 2

Submit your final design plus any checkpoint updates
1. Everything Final - review "Design Concept Goals", "Contest Requirements", "Submission & Source Files" sections for what needs to be submitted.


Contest Details
With this insurance premium calculator, a user can simulate their life insurance plan and know how much premium they have to pay for the coverage they want. The app is to be built mainly for business purposes of funneling potential customers into the insurance application process, increasing number of brochure requests, and obtaining potential customers' email address for marketing purposes.

Our functional requirements are clear - users must be able to perform all the user stories described in attached file (user_story_requirements.pdf), with a smartphone browser. However we do not have formal requirements for design (we do have design expectations described in the attached file design-expectations.pdf) - we are looking for you to provide design concepts and suggest ideas on screen effects that can be implemented with Javascript.

Download the existing application screenshots, user story and design expectations and carefully review them. We have provided reference notes to help clarify what we need. Please post any questions you might have for the client in the forums.

* This app is for a Japanese company and some of the information/screenshots presented may include Japanese characters.

User story and design expectations: 
The user story for the smartphone browser version of the life insurance premium calculator are stated in the attached file (user_story_requirements.pdf) and they all must be expressed in your design.

The user stories that have already been implemented in the desktop browser version, are associated with the attached screenshots so that you can have better idea what they specifically mean.

Design Concept Goals: 
- How should this web-based mobile application work for the intended user?
- Suggest screen flows, navigation and screen effects
- How quickly and easily can a user navigate through 6 insurance plans (more plans may be added in future) while some of them have complex product structure.
- What is the best UX for the potential customers who wants to figure out how much premium they need to pay for their desired coverage?
- Think simple but effective solutions! Have fun creating this.
- We want this to be designed simple/clean/sophisticated!!

Submission Details
- Use the 320 x 480px (Standard sizes) for submission format. 
- Make sure you create graphic in 'shape' format, so when resize for retina versions, graphic still look sharp!
- It will be great if you can provide the landscape version.
- Make sure you include screen effect ideas.

Contest Requirements
Download: Insurance_Premium_Calculator_PC_screenshots_20131202.xlsx

1) Understand what you can and can't do with the current PC browser version of life insurance premium calculator.
- How users enter their attributes (there are 2 patterns of user attribute set you have to consider - see note DE2)
- Insurance plan structures.
- How users add/remove plan, and how users add/remove/change plan options.
- Lots of descriptions of plans and plan options need to be displayed somewhere.

2) Understand what features are to be added to the new smartphone browser version of life insurance premium calculator.
- Life insurance plan auto-recommendation during user attribute entry.
- Save calculation result, resume the calculation.
- Send calculation result via email.

3) Design overall screen flow optimized for smartphone browser.

4) Design each screens with simple/clean/sophisticated manner, without going too far from the company branding look & feel.
- It is required that each plans must be expressed with the following colors
- Plan A:#ed9b69
- Plan B:#84beb3
Plan C:#70c0de
Plan D:#aca197
Plan E:#87adcd
- Plan F:#cdd066.

4-1) Include company logo placeholder in your design

5) Include effective screen effects to give user a brisk, dapper and light user experiences.

6) Your design must contain all the user stories

7) Be creative on screen flow, screen design and screen effect!

8) Review the submission rounds for requested screens.

Attached Files
Insurance_Premium_Calculator_PC_screenshots_20131202.xlsx = screenshots and notes of the existing desktop version
user_story_requirements.pdf = User click path and how a customer would interact with the screens
design-expectations.pdf = Design guideance and notes that reference the provided screenshots

IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance

Target User
- Potential customers of life insurance product.

Judging Criteria
- How well your design meet our design expectations (design-expectations.pdf)
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should be possible to build and make sense as a web-based mobile application

Submission & Source Files
Preview Image with screen effect description.
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.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file.

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.

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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30036562