76
New York Life Wireframe Analysis Prepared 11/11/15 By Perficient - Mike Gorgone AxShare Link: http://3j2d7z.axshare.com AxShare Link (wireframes with Wizards): http://mvaexp.axshare.com
New York Life Wireframe Analysis
Prepared 11/11/15
By Perficient - Mike Gorgone
AxShare Link: http://3j2d7z.axshare.com
AxShare Link (wireframes with Wizards): http://mvaexp.axshare.com
Header
The Header appears on the majority of the pages and is comprised of the following sections.
1) NYL Logo. The Logo is a link back to the home page www.nylexpress.com.
2) The mobile menu icon/text. This icon, when clicked displays the hidden global navigation fly out.
3) The global navigation. This contains all of the links for the global navigation. The current desktop navigation will need to be redone so that it uses the bootstrap menu HTML structure and CSS. The navigation should look the same/similar on tablet and desktop as it does currently but at the mobile breakpoint will automatically adjust to the mobile menu icon/text and hidden fly out menu.
Footer
The footer appears on all of the pages and is comprised of the following sections.
1) Courtesy navigation. The links in the courtesy navigation are the same as the global navigation. At the mobile breakpoint the links will adjust to the mobile view.
2) General NYL information and legalese. At the mobile breakpoint the contents will wrap to match the width of the container.
Home Page
Hero
The Hero section appears at the top of the page and is comprised of the following.
1) Title and bullet point list of information.
2) “apply by mail“ link. This link, when clicked, scrolls the User down the page to the Request Your Free Information Kit form.
Mobile Notes: The “apply by mail” link needs to be programmed so that there is the original desktop link and the mobile link. At the mobile breakpoint the desktop link is hidden and the mobile link is displayed. The “application online” text needs to be programmed so that there is the original desktop link and the mobile text. At the mobile breakpoint the desktop link is hidden and the mobile text is displayed.
Quick Quote
The Quick Quote section is where the User can enter information and get a quick quote for the Simplified Term Life Insurance product.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the form fields.
2) The form fields for the quick quote form.
3) The Tobacco/Nicotine use radio buttons. These are only displayed when certain states are selected in the state dropdown list.
4) The submit button. When the User submits their information they are taken to the Simplified Life page (www.nylexpress.com/Simplified-Term-Life) where the quick quote result is displayed.
Simplified Term Life Summary
The Simplified Term Life section is where the User can read a one-sentence summary of the product.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the summary and links.
2) The one sentence summary for the product.
3) “See Rates and Apply >>” link. This link when clicked, takes the User to the Simplified Term Life page (www.nylexpress.com/Simplified-Term-Life).
4) “Get Info by Mail >>“ link. This link, when clicked, scrolls the User down the page to the Request Your Free Information Kit form.
Mobile Notes: On the desktop the links are stacked but at the mobile breakpoint they should switch to an inline look to save vertical space.
Simplified Whole Life Summary
The Simplified Whole Life section is where the User can read a one-sentence summary of the product.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the summary and links.
2) The one sentence summary for the product.
3) “See Rates and Apply >>” link. This link when clicked, takes the User to the Simplified Whole Life page (www.nylexpress.com/Simplified-Whole-Life).
4) “Get Info by Mail >>“ link. This link, when clicked, scrolls the User down the page to the Request Your Free Information Kit form.
Mobile Notes: On the desktop the links are stacked but at the mobile breakpoint they should switch to an inline look to save vertical space.
Guaranteed Acceptance Life Summary
The Guaranteed Acceptance Life section is where the User can read a one-sentence summary of the product.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the summary and links.
2) The one sentence summary for the product.
3) “See Rates and Apply >>” link. This link when clicked, takes the User to the Guaranteed Acceptance Life page (www.nylexpress.com/Guaranteed-Acceptance-Life).
4) “Get Info by Mail >>“ link. This link, when clicked, scrolls the User down the page to the Request Your Free Information Kit form.
Mobile Notes: On the desktop the links are stacked but at the mobile breakpoint they should switch to an inline look to save vertical space.
Rate Comparison
The Rate Comparison section is where the User can click the button and be taken to the product comparison page at www.nylexpress.com/Compare-Products. Mobile Notes: The text explaining the button will wrap at the mobile breakpoint.
Backed By
The Backed By section is where the User can see a brief summary of ratings for NYL.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the summary information.
2) The summary information for the NYL ratings.
Mobile Notes: On the desktop the 4 information cells are all inline. At the mobile breakpoint they will need to stack into a 2x2 formation. Text in the section will wrap due to the change in width.
Looking For
The Looking For section is where the User can see information on how to contact New York Life to find out more about their insurance products.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the summary information
2) The contact information for New York Life. The “click here” link takes the User to the find an Agent page www.nylexpress.com/Agent.
Free Information Kit
The Free Information Kit section is where the User can fill out their contact information to receive product information by mail.
1) Title of the section. 2) Basic information about the
free information kit. 3) Information fields for the User
to enter their mailing information.
4) The submit button to send the User’s information to NYL.
5) “privacy policy” link to NYL’s privacy policy.
Mobile Notes: On the desktop this form is a modal that opens for the User. A version of the form will need to be added to the page that is hidden on the desktop and at the mobile breakpoint it is displayed.
Simplified Term Life Page
Hero
The Hero section appears at the top of the page and is comprised of the following.
1) Title and bullet point list of information.
2) “apply by mail“ link. This link, when clicked, scrolls the User down the page to the Request Your Free Information Kit form.
Mobile Notes: The “apply by mail” link needs to be programmed so that there is the original desktop link and the mobile link. At the mobile breakpoint the desktop link is hidden and the mobile link is displayed. The “application online” text needs to be programmed so that there is the original desktop link and the mobile text. At the mobile breakpoint the desktop link is hidden and the mobile text is displayed.
Quick Quote See Quick Quote description in the Home page.
Simplified Term Life Information
The Simplified Term Life Information section lists out the basic information about the STLI product.
Rate Table
The Rate Table shows the different rates for men, women and if the appropriate state is selected smoker and non-smoker. The table is divided into groups of the Insurance amounts available with the ages and their rates.
1) The Men and Women tabs. Clicking on the tab updates the table rates as they apply to Men and Women.
2) The Non-Smoker and Smoker tabs. Clicking the tab updates the table rates as they apply to Non-Smokers and Smokers.
3) The product value sections. Each section title is clickable and expands the table rates or collapses the table rates.
4) The Table rates for the product value. The ages and the rates are listed.
Mobile Notes: This table is a completely different table from the table displayed at the desktop. At the mobile breakpoint the desktop table is hidden and the mobile table is displayed.
Request Your Free Information Kit
The Request Your Free Information Kit section lets the User know about the free information Kit and if the user clicks the button they are scrolled down the page to the Free Information Kit form
Common Questions
The Common Questions section is where the User can see a list of questions and answers that other Users commonly ask. To save space a group of questions is collapsed and can be shown by clicking on the “more questions and answers…” link.
Backed By See Backed By description in the Home page.
Looking For See Looking For description in the Home page.
Free Information Kit See Free Information Kit description in the Home page.
Simplified Whole Life Page
Hero
The Hero section appears at the top of the page and is comprised of the following.
1) Title and bullet point list of information.
2) “apply by mail“ link. This link, when clicked, scrolls the User down the page to the Request Your Free Information Kit form.
Mobile Notes: The “apply by mail” link needs to be programmed so that there is the original desktop link and the mobile link. At the mobile breakpoint the desktop link is hidden and the mobile link is displayed. The “application online” text needs to be programmed so that there is the original desktop link and the mobile text. At the mobile breakpoint the desktop link is hidden and the mobile text is displayed.
Quick Quote See Quick Quote description in the Home page.
Simplified Whole Life Information
The Simplified Whole Life Information section lists out the basic information about the SWLI product.
Rate Table
The Rate Table shows the different rates for men, women and if the appropriate state is selected smoker and non-smoker. The table is divided into groups of the Insurance amounts available with the ages and their rates.
1) The Men and Women tabs. Clicking on the tab updates the table rates as they apply to Men and Women.
2) The product value sections. Each section title is clickable and expands the table rates or collapses the table rates.
3) The Table rates for the product value. The ages and the rates are listed.
4) The age range sections. These sections are sub-sections to the product value sections and can be collapsed and expanded by the User as they see fit.
Mobile Notes: This table is a completely different table from the table displayed at the desktop. At the mobile breakpoint the desktop table is hidden and the
mobile table is displayed.
Request Your Free Information Kit
The Request Your Free Information Kit section lets the User know about the free information Kit and if the user clicks the button they are scrolled down the page to the Free Information Kit form
Common Questions See Common Questions description in the Simplified Term Life page.
Backed By See Backed By description in the Home page.
Looking For See Looking For description in the Home page.
Free Information Kit See Free Information Kit description in the Home page.
Guaranteed Acceptance Life Page
Hero
The Hero section appears at the top of the page and is comprised of the following.
1) Title and bullet point list of information.
2) “apply by mail“ link. This link, when clicked, scrolls the User down the page to the Request Your Free Information Kit form.
Mobile Notes: The “apply by mail” link needs to be programmed so that there is the original desktop link and the mobile link. At the mobile breakpoint the desktop link is hidden and the mobile link is displayed.
The “application online” text needs to be programmed so that there is the original desktop link and the mobile text. At the mobile breakpoint the desktop link is hidden and the mobile text is displayed.
Quick Quote See Quick Quote description in the Home page.
Guaranteed Life Information
The Guaranteed Acceptance Life Information section lists out the basic information about the GALI product.
Rate Table
The Rate Table shows the different rates for men, women and if the appropriate state is selected smoker and non-smoker. The table is divided into groups of the Insurance amounts available with the ages and their rates
1) The Men and Women tabs. Clicking on the tab updates the table rates as they apply to Men and Women
2) The product value sections. Each section title is clickable and expands the table rates or collapses the table rates
3) The Table rates for the product value. The ages and the rates are listed
4) The age range sections. These sections are sub-sections to the product value sections and can be collapsed and expanded by the User as they see fit.
Mobile Notes: This table is a completely different table from the table displayed at the desktop. At the mobile breakpoint the desktop table is hidden and the
mobile table is displayed.
Request Your Free Information Kit
The Request Your Free Information Kit section lets the User know about the free information Kit and if the user clicks the button they are scrolled down the page to the Free Information Kit form
Common Questions See Common Questions description in the Simplified Term Life page.
Backed By See Backed By description in the Home page.
Looking For See Looking For description in the Home page.
Free Information Kit See Free Information Kit description in the Home page.
Products Compare A
Hero
The Hero section appears at the top of the page and is comprised of the following.
Start Here
The Start Here section is a form for the User to enter some basic information that will then be used to generate the comparison information.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the form fields.
2) The form fields for the quick quote form.
3) The Get Your Free Quote button, when clicked will update the comparison columns information.
Simplified Term Column A
The Simplified Term Life column displays default information when the User has not entered information in the Start Here form.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the information.
2) The information about the STLI product.
3) “See Rates and Apply >>” link. When clicked by the User they’re taken to the Simplified Term Life Insurance page.
4) “Get Info by Mail >>” link. When clicked by the User they’re scrolled down to the bottom of the page to the Free Information Kit form.
Mobile Notes: On the desktop the links are stacked but at the mobile breakpoint they should switch to an inline look to save vertical space.
Simplified Whole Column A
The Simplified Whole Life column displays default information when the User has not entered information in the Start Here form.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the information
2) The information about the SWLI product
3) “See Rates and Apply >>” link. When clicked by the User they’re taken to the Simplified Whole Life Insurance page
4) “Get Info by Mail >>” link. When clicked by the User they’re scrolled down to the bottom of the page to the Free Information Kit form
Mobile Notes: On the desktop the links are stacked but at the mobile breakpoint they should switch to an inline look to save vertical space.
Guaranteed Acceptance Column A
The Guaranteed Acceptance Life column displays default information when the User has not entered information in the Start Here form.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the information
2) The information about the GALI product
3) “See Rates and Apply >>” link. When clicked by the User they’re taken to the Guaranteed Acceptance Life Insurance page
4) “Get Info by Mail >>” link. When clicked by the User they’re scrolled down to the bottom of the page to the Free Information Kit form
Mobile Notes: On the desktop the links are stacked but at the mobile breakpoint they should switch to an inline look to save vertical space.
How Can
The How Can I section is an informational section. Mobile Notes: On the desktop the information is in two columns but at the mobile breakpoint they should stack vertically.
Backed By See Backed By description in the Home page.
Looking For See Looking For description in the Home page.
Free Information Kit See Free Information Kit description in the Home page.
Products Compare B
Hero See Hero description in the Product Compare A page.
Start Here See Start Here description in the Product Compare A page.
Simplified Term Column B
The Simplified Term Life column displays default information when the User has not entered information in the Start Here form.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the information.
2) The quick quote rate based on the information entered in the start here form.
3) “> Apply Online” button. When clicked by the User they’re taken to the Simplified Term Life Insurance page.
4) “>Get Info by Mail” button. When clicked by the User they’re scrolled down to the bottom of the page to the Free Information Kit form.
5) Other information about the STLI product.
Simplified Whole Column B
The Simplified Whole Life column displays default information when the User has not entered information in the Start Here form.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the information
2) The quick quote rate based on the information entered in the start here form.
3) “> Apply Online” button. When clicked by the User they’re taken to the Simplified Whole Life Insurance page.
4) “>Get Info by Mail” button. When clicked by the User they’re scrolled down to the bottom of the page to the Free Information Kit form.
5) Other information about the SWLI product.
Guaranteed Acceptance Column B
The Guaranteed Acceptance Life column displays a Not Available message if information entered in the start here form doesn’t apply to the Guaranteed Acceptance product.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the information.
How Can See How Can description in the Product Compare A page.
Backed By See Backed By description in the Home page.
Looking For See Looking For description in the Home page.
Free Information Kit See Free Information Kit description in the Home page.
Products Compare C
Hero See Hero description in the Product Compare A page.
Start Here See Start Here description in the Product Compare A page.
Simplified Term Column C
The Simplified Term column displays default information when the User has not entered information in the Start Here form.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the information
2) The quick quote rate based on the information entered in the start here form.
3) “>Get Info by Mail” button. When clicked by the User they’re scrolled down to the bottom of the page to the Free Information Kit form.
4) Other information about the STLI product
Simplified Whole Column C
The Simplified Whole column displays default information when the User has not entered information in the Start Here form.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the information
2) The information about the SWLI product
3) “See Rates and Apply >>” link. When clicked by the User they’re taken to the Simplified Whole Life Insurance page
4) “Get Info by Mail >>” link. When clicked by the User they’re scrolled down to the bottom of the page to the Free Information Kit form
Guaranteed Acceptance Column C
The Guaranteed Acceptance column displays default information when the User has not entered information in the Start Here form.
1) Title and the expand and collapse icon. The expand and collapse icon, when clicked, will hide and show the information
2) The quick quote rate based on the information entered in the start here form.
3) “>Get Info by Mail” button. When clicked by the User they’re scrolled down to the bottom of the page to the Free Information Kit form.
4) Other information about the SWLI product
How Can See How Can description in the Product Compare A page.
Backed By See Backed By description in the Home page.
Looking For See Looking For description in the Home page.
Free Information Kit See Free Information Kit description in the Home page.
Agent Page
Hero
The hero section appears at the top of the page and is comprised of the Title and bullet point list of information as well as some contact information.
Quick Quote See Quick Quote description in the Home page.
Backed By See Backed By description in the Home page.
Apply Online
The Apply Online section offers a brief summary of the Simplified Term Life Insurance product and a button to click on to go to the SLTI page.
Customer Service Page
Hero
The hero section appears at the top of the page and is comprised of the Title and a short summary of how to contact Customer Service.
Submission Methods
The Submission Methods section lists out the different ways a User can contact NYL Customer Service.
1) Make a Payment Online. The description of how a User can make their payments online
2) Call Us. The information on how to call NYL
3) > Manage Payments online button. The User clicks this button in order to go to the online payment website for NYL
4) Send an Email. The User can enter information into the form and then submit that information which is then emailed to NYL.
Mobile Notes: On the desktop the information is displayed more horizontally. At the mobile breakpoint the content will stack vertically.
Claims Page
Hero
The hero section appears at the top of the page and is comprised of the Title and a short summary of how to submit a Claim.
Request a Claim
The Request a Claim section lists out the different ways a User Request a claim.
1) The section listing how a User can request a Claim packet from NYL. There is a download link for a PDF file and phone contact information.
Mobile Notes: On the desktop the information is displayed more horizontally. At the mobile breakpoint the content will stack vertically.
Mail Your Claim
The Mail Your Claim section lists out the information for a User to mail their claim to NYL. Mobile Notes: On the desktop the information is displayed more horizontally. At the mobile breakpoint the content will stack vertically.
Provide Additional Documentation
The Provide Additional Documentation section lists out the information a User needs in order to get more claim documentation Mobile Notes: On the desktop the information is displayed more horizontally. At the mobile breakpoint the content will stack vertically.
Claims Checklist
The Claims Checklist section lists out the items needed in order for a User to submit a claim. The User should review this list to make sure they have everything before submitting a claim. Mobile Notes: On the desktop the information is displayed more horizontally. At the mobile breakpoint the content will stack vertically.
Common Questions
The Common Questions section lists out the questions Users have about the NYL claim process. Mobile Notes: At the mobile breakpoint the text of the questions and their answers will have to wrap more due to the change in width of their container
Term Choice Page
Hero
The hero section appears at the top of the page and is comprised of the Title and a short summary of how to submit a Claim.
Quick Quote See Quick Quote description in the Home page.
Information Content
The Information Content section provides some basic information on Simplified Term Life Insurance.
Looking For See Looking For description in the Home page.
Simplified Term & Simplified Whole Life Wizard Pages For these wizards they cover both the Term and Whole Life insurance products. The only thing different between the two wizards (that I’ve seen) is the title at the top of the page. I.e. “Simplified Term Life Insurance Application” vs. “Simplified Whole Life Insurance Application”.
Step 1
The Step 1 of the wizard allows the User to enter their general information. Once entered the User clicks the “> Continue” button to move on to the next step. Mobile Notes: Fields that are taking up horizontal space will need to stack vertically
Step 2
The Step 2 of the wizard allows the User to enter their Coverage Details. Once entered the User clicks the “> Continue” button to move on to the next step. The user can also use the “<< Return to Previous Page” if they want to go back to the previous step in the wizard. Mobile Notes: Fields that are taking up horizontal space will need to stack vertically
Step 3
The Step 3 of the wizard allows the User to enter some answers to Health Questions. If the user answers “Yes” to a question then a text area field is displayed for them to enter more details. Once entered the User clicks the “> Continue” button to move on to the next step. The user can also use the “<< Return to Previous Page” if they want to go back to the previous step in the wizard. Mobile Notes: Fields that are taking up horizontal space will need to stack vertically
Step 4
The Step 4 of the wizard allows the User to review the information they’ve entered. If the User wants to make any changes there is an “Edit >>” link in each section that, when clicked, will take them back to the step needed to make updates. Once entered the User clicks the “> Click to Sign” button to move on to the final step. Mobile Notes: Fields that are taking up horizontal space will need to stack vertically
Step 5
The Step 5 of the wizard allows the User to download a PDF version of their application to review. The User then clicks the “> Submit My Application” button send their online application to NYL. Mobile Notes: This content wasn’t taking up much horizontal space to begin with so more than likely the text will just end up wrapping.
Guaranteed Acceptance Life Wizard Pages
Step 1
The Step 1 of the wizard allows the User to enter their general information. Once entered the User clicks the “> Continue” button to move on to the next step. Mobile Notes: Fields that are taking up horizontal space will need to stack vertically
Step 2
The Step 2 of the wizard allows the User to enter their Coverage Details. Once entered the User clicks the “> Continue” button to move on to the next step. The user can also use the “<< Return to Previous Page” if they want to go back to the previous step in the wizard. Mobile Notes: Fields that are taking up horizontal space will need to stack vertically
Step 3
The Step 4 of the wizard allows the User to review the information they’ve entered. If the User wants to make any changes there is an “Edit >>” link in each section that, when clicked, will take them back to the step needed to make updates. Once entered the User clicks the “> Click to Sign” button to move on to the final step. Mobile Notes: Fields that are taking up horizontal space will need to stack vertically
Step 4
The Step 5 of the wizard allows the User to download a PDF version of their application to review. The User then clicks the “> Submit My Application” button send their online application to NYL. Mobile Notes: This content wasn’t taking up much horizontal space to begin with so more than likely the text will just end up wrapping.
