Challenge Summary
Welcome to –New York Life Responsive Design Challenge. Task of this challenge is to redesign the landing page user experience for AARP Term Life Insurance from New York Life Insurance Company.
Focus on creating a simple and engaging mobile-first experience, keeping in mind that this landing page will be built responsive. We are really excited to see your designs for this challenge.
Good luck on this challenge.
Round 1
Submit your initial design concepts for the Checkpoint
1) Landing Page (Mobile Responsive)
2) Quote Reveal Page (Mobile Responsive)
Notes.jpg: Please include any comments about your design for the Client.
Feel free to add additional views showing alternate states (drop select, hover states, etc)
Make sure all pages have a logical flow / Use correct file numbering (01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
1) Landing Page (Mobile + Desktop)
2) Quote Reveal Page (Mobile Responsive + Desktop)
Feel free to add any other additional screens which are necessary to explain your concept
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering (00, 01, 02, 03)
About New York Life:
New York Life Insurance Company (NYLIC) is the largest mutual life-insurance company in the United States, and one of the largest life insurers in the world. New York Life has achieved the best possible ratings by the four independent rating companies (Standard & Poor's, AM Best, Moody's and Fitch). Other New York Life affiliates provide an array of securities products and services, as well as institutional and retail mutual funds. This project is about redesigning the landing page and quote reveal page user experience for AARP Term Life Insurance from New York Life Insurance Company.
Design Considerations:
Overall Design:
- There are no specific branding guidelines, you are free to explore the colors, fonts, and layout that fit best with your concept idea. Any fonts or colors are acceptable as long as they drive users to apply.
- Remember our audience is age 50 and over, please use intuitive UI and design elements.
- We are looking for a mobile first approach to this responsive design.
Mobile:
- Experience can be multi-page form.
- Much of this experience hasn't been designed for mobile responsive yet, or even considered.
- All elements need to be rethought/reconsidered as required in your concept.
- Please try to keep the scrolling as minimal as possible and it is fine to have a scroll to go through the legal information
- Design will need work at various breakpoints leading to a desktop version
Design Size:
Mobile: 414 x 736 px (portrait)
Desktop: 1280 px width and height as required
AARP Logo:
Regarding the usage of AARP logo size.
- The minimum acceptable size for the signature is for the AARP logo is 4.4 pixels fixed at 72 dpi.
- Always scale the logo proportionally, without distortion.
- To ensure its integrity and visibility, keep clear of competing text, images, and graphics. Surround it on all sides with clear space - a minimum of half the height of the AARP/NYL logo.
- You may be able to drop the logo inside the app - if you make it multi page.
- If we remove the logo, we need the product name in text near the top- AARP Term Life Insurance from New York Life
- Ideally, the logo is visible on all screens.
Navigation:
- We need these links in navigation “AARP Member Benefits, Join AARP, Renew AARP".
- It may be possible to make the information on the page be tabs, or other way to show the info so it’s not just one long scrolling page, we are open to exploring it for now.
Legal Information:
- Please pay attention to the legal information shown in 1_Landing Page Legal Requirements.pdf
- You need to make sure that placements of the legal information are in appropriate places as mentioned in the above mentioned PDF.
- You can grab the legal text copy from 3_InitialViewCopy.doc
- Note that if you make a multi-page mobile experience, the legal information must be present on the screen that has the related text - not simply at the end.
Required Pages:
We need below pages to be designed..
1) Landing Page:
Reference: Page 1 in 1_Landing Page Legal Requirements.pdf
(or)
you can even view the current landing page experience here: https://www.nylaarp.com/Landing-Pages/TermQuoteApply
- If you go to the live page please note that:
--- “I am an AARP Member” shows dynamic options based on your choice (we need to show this in the design)
--- You should choose “Alabama” as a state to show you the quote reveal page, and make sure your age is 50+ in order to proceed.
- This landing page supports our paid search efforts and many of our paid media campaigns including banner and email.
- A user reaches this landing page from our paid search from Google search results for the keyword “AARP Life Insurance” and also through the banner advertisements.- This landing page is meant to drive quotes and applications so leading the user into the form completion is key.
- Coloration and layout should drive response.
- Items not “highlighted” in the document can be show/hide or removed as needed for the design.
- “Looking for higher coverage” section is not highlighted, but we would like to keep it on the page, if possible.
Quote Form:
- Current form experience is a full form execution. It is OK to explore a multi-step form if you feel that may work best in a mobile experience.
- Do not omit any form fields. However, we are open to exploring a simplification of fields like translating the zip code into the city/state/zip.
- Email and Title are the only “optional” field. All other fields are required.
- It’s important to have some part of the form with in the initial view on a mobile device. That is, if you have a long page, on first view the user must see the form begin on screen, without scrolling at all.
Form Elements:
- Title (Optional field)
- First Name
- Last Name
- Address
- City
- State
- Zip
- Date of Birth
- Gender
- Coverage
- Email (Optional field)
- Checkbox (Text copy: Yes, I would like to receive valuable product information and offers from the AARP Life Insurance Program from New York Life.)
- I am an AARP Member (options: yes / no)
- - - When the users selects "yes", we need to shown an additional text field with label "If you know your membership number, enter it here"
- - - When the user selects "no", we don't show the additional text field.
Action button:
- "Get Instant Quote and Apply" button (On clicking this button, it shows the quote reveal page
Text Copy:
- We would like you to use the text given in attached document “3_InitialViewCopy.doc”
- Please pay attention to the content hierarchy given for this in page 1 of 2_Content Hierarchy.pdf
2) Quote Reveal Page:
Reference: Page 2 in 1_Landing Page Legal Requirements.pdf
- Once the user submits the required details in the landing page form, then we show/reveal the quote details
- Rate - the monthly rate is the most important, and the coverage amount can be much smaller. We are open to exploring the quote experience and how the user interacts with the quote
Text Copy:
- We would like you to use the text given in attached document “4_QuoteApplyCopy.doc”
- Please pay attention to the content hierarchy given for this in page 2 of 2_Content Hierarchy.pdf
Target Audience:
- 50 years old and over - need to be very obvious and clear not CUTE
- We want to modernize and update the overall design. Mobile designs are very critical for usability for our older audience. Do not assume they are tech-savvy, the interactions should be clear and obvious.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Your design should be possible to build and make sense as a responsive application
- Cleanliness of your graphics and design
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.
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.