1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  

Add a Device

Add a computer or phone to your MovieHaus Video account. Just choose which type of device and how many of each you wish to add service to.

Current plan and devices
Movies: HD Quality
1
Motorola CLIQ
Lee's Phonephone: Motorola CLIQ
2
MacBook Pro
Lee's Computercomputer: MacBook Pro
New devices

Save 25% on music!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a metus ut nulla facilisis lacinia. Etiam id orci id turpis aliquam mollis. Aliquam id enim vitae sapien ultricies fringilla. Morbi ut lacus augue, eget interdum eros. Aenean convallis urna et nunc sodales ultricies.

Suspendisse urna dolor, vulputate venenatis consectetur in, tincidunt sit amet nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

more infoclose

What would you like to add?

  • You can add up to 3 phones.

    You can add up to 2 computers.

    You can add up to 3 phones and 2 computers.

How many phones do you want to add?



How many computers do you want to add?


How many of each do you want to add?

foo

List of Wireframes

Primary Scenario:
- 1 phone and 1 computer

Qualifies for: At least one more phone or computer.

Wants: 1 phone, 1 computer, plan upgrade to "Movies, TV & Music Plus."

  1. Initial Setup
    1. Initial state
    2. Selected: Phone
    3. Selected: Computer
    4. Selected: Both
    5. Shown: Discount
    6. Selected: Minimum one item

Annotations

  1. Standard MovieHaus Video header, as on current site.
  2. Static text: Page heading for Add A Device.
  3. Dynamic text: Additional copy instructing the user to choose phones/computers.
    Display rules:
    • Copy should be either plural (e.g. "each of the new devices") or singular ("the new device") based on whether the user is eligible to add more than one device or one device only.
    • Copy should only mention the product class(es) for which the user is eligible.
    • If user is only eligible for one additional device and one product class, omit this line altogether, as it will be superseded by copy in "New devices" area.
    • If user is not eligible to add any new devices, line of copy should instead be replaced with a "sorry" message and "back" link, and no other content below that line should be shown.
  4. Content area: Shows information about the user's current plan(s) and device(s).
  5. Dynamic text: Heading for current plan(s) and device(s); should denote plural or singular for plan/device info based on whether user has multiple plans and/or devices.
  6. Content area: Shows information about one plan. This entire content area should be repeated adjacent to the first for each subsequent plan the user already has.
  7. Dynamic text: Name of plan. Should link to modal window pop-up with plan info as already implemented on current MovieHaus Video site.
  8. Content area: Shows information about one device within that plan. This entire content area should be repeated adjacent to the first for each subsequent device on the same plan the user already has.
  9. Dynamic text: Device number. Number should represent the number of that device relative to the entire account (not relative to the plan), using whatever ordering scheme already in place for sorting/ordering devices. Example: if there were two devices shown, each in the context of a separate plan, the device number for the second device would not be "1" (for the first device on that plan), but "2" (for the second device on that account).
  10. Dynamic image: Medium-sized image of specific phone or computer. If the device is unknown, show a placeholder image for that product type (e.g. generic phone or generic computer).
  11. Dynamic text: Device name. User-defined name for this device, the same as shown elsewhere in the MovieHaus Video UI.
  12. Dynamic text: Product type label and product name. Name of the specific phone or computer. If the device is unknown, use placeholder copy (e.g. "Unknown.").
  13. Content area: Shows information about the new types of devices the user can choose.
  14. Dynamic text: Heading for new devices; should denote plural or singular for device info based on whether the user qualifies for one or more devices.
  15. Dynamic text: Sub-heading, preceding device type choices. Copy will changed based on whether or not the user qualifies for more than one device type. Current copy shown ("What would you like to add?") is for when the user can add either a phone or computer.
  16. Dynamic radio button & label: For the "phone" choice. This radio button and label will only be shown when the user qualifies for at least one device in each of the two product types (phone/computer). Clicking on the radio button will trigger the Selected: Phone page state.
  17. Dynamic radio button & label: For the "computer" choice. This radio button and label will only be shown when the user qualifies for at least one device in each of the two product types (phone/computer). Clicking on the radio button will trigger the Selected: Computer page state.
  18. Static text: Explanatory copy associated with the "Computer" label describing the specific products or product types (e.g. "laptop"), that help clarify and will help the user better understand this choice.
  19. Dynamic radio button & label: For the "both" (phone and computer) choice. This radio button and label will only be shown when the user qualifies for at least one device of the two product types (phone/computer). Clicking on the radio button will trigger the Selected: Both page state.
  20. Dynamic content area: Shows information about the music package discount promotion. Business rules for displaying this module, as provided by the client: show only if user meets all of the following criteria: a) user qualifies for one or more additional devices, b) user already has a plan including TV programming, c) user does not already have a music package.
  21. Static text: Headline for music package discount promotion
  22. Static text link: Copy with link to show more details about the promotion. Clicking on the link will trigger the Shown: Discount page state.
Error / Warning States
  • If the user has already has one or more individual plans and chooses more devices that, when combined with the number of current devices, would be more than the number that could theoretically be combined into a shared plan, the user should be presented with a modal window over the current page warning them of this when the user clicks on the "Next" button to continue. The modal window should contain an option/link to continue, as well as one to cancel. The former link would take the user to a plan selection page assuming an individual plan for the first of their phones/computers; the latter link would dismiss the modal window, revealing the page beneath immediately prior to the user having clicked on the "Next" button.
  1. Content area: Revealed upon selection of one of the three initial radio buttons shown when the user qualifies for adding at least one device in either product class. Visual design should tie together the area of the user's selection with the relevant associated options revealed upon that selection.
  2. Dynamic text: Sub-heading, preceding second-level of choices once the initial selection has been made. Copy will be changed based on whether the user qualifies for one or more than one phone. Copy shown is for two or more phones.
  3. Dynamic radio buttons & labels: One button/label each for the number available of this product type ("phone") that the user can add based on current devices/plan(s) and credit qualification. Maximum possible number to be displayed is five. If the user already has a shared plan, then the number of phones displayed will reflect, in part, the maximum number that could be added to that existing plan. (User will not be able to switch from shared to individual in Add A Device.) If the number of phones that can be added is "1", then the radio button will be pre-selected and have a custom label, and the sub-heading copy above will change, as shown in Secondary Scenario #1. Once any radio button is selected, the "Next" link/button will appear. (If radio button is pre-selected, "Next" link/button will be shown by default.)
  4. Dynamic text: Contextual help copy that informs the user of the maximum number of devices that can be chosen for the selected product type. Will need to be customized based on number of devices (e.g. "2 phones"). Omit this entire content area if the number of selectable phones = 1, as the customized label copy as shown for the Computer selection in Secondary Scenario #1 will already convey this information.
  1. Dynamic text: Sub-heading, preceding second-level of choices once the initial selection has been made. Copy will be changed based on whether the user qualifies for either one or two computers. Copy shown is for two. See Secondary Scenario #1 and select "Computers" for a single device choice sub-heading copy example.
  2. Dynamic radio buttons & labels: One button/label each for the number available of this product type ("computer") that the user can add based on current devices/plan(s) and credit qualification. Maximum possible number to be displayed is two. If the number of devices that can be added is "1", then the radio button will be pre-selected and have a custom label, and the sub-heading copy above will change, as shown in Secondary Scenario #1 (select "Computer" to view). Once any radio button is selected, the "Next" link/button will appear. (If radio button is pre-selected, "Next" link/button will be shown by default.)
  3. Dynamic text: Contextual help copy that informs the user of the maximum number of devices that can be chosen for the selected product type. Will only apply if the user can select two computers. Omit this entire content area if the number of selectable computers = 1, as the customized label copy as shown for he Computer selection in Secondary Scenario #1 will already convey this information.
  1. Static text: Sub-heading, preceding second-level of choices once the initial selection has been made.
  2. Static label: For the "Phones" product type option.
  3. Dynamic drop-down form field: For the "Phones" product type option. Contents will change based on the number of available devices of this product type that the user can add based on current devices/plan(s) and credit qualification. Default value will always be "0" and possible maximum value will always be "5". Contents of this drop-down may change based on user selection in other product type drop-down within this same content area. For example, if a user were to qualify for five new devices total, the "Phones" drop-down would display options from 0 to 5, but selecting "2" in the "Computers" drop-down would change the contents of the "Phones" drop-down to then display only options from 0 to 3. User can toggle back and forth between the two drop-downs changing values at will but never able to select more than a total of n devices (where n is the total number he/she qualifies for) across both. Whenever the current state of selected devices across both drop-downs is greater than or equal to "1", show the "Next" button/link that will allow the user to proceed to the next step; hide this button if/when the number of selected devices is "0".
  4. Static label: For the "Computers" product type option.
  5. Dynamic drop-down form field: For the "Computers" product type option. Contents will change based on the number of available devices of this product type that the user can add based on current devices/plan(s) and credit qualification. Default value will always be "0" and possible maximum value will always be "2". As above, contents of this drop-down may change based on user selection in other product type drop-down within this same content area, and "Next" link/button will display once number of selected devices in this content area is greater than or equal to "1".
  6. Dynamic text: Contextual help copy that informs the user of the maximum number of devices that can be chosen for each of the two available product types (not the combined total across both). As with this entire content area, will only apply if the user can select at least one device of each product type. See Secondary Scenario #3 for an example of when there is only one possible product type available.
  1. Dynamic content area: Shows detailed information about the music package discount promotion. Triggered to display onclick of the "more info" link in the small version of the discount promotion area. This area should be large and visible enough relative to the current page contents so that the user's attention is focused on it. Can use an expanding promo area, as per the prototype, or a modal window or other design approach.
  2. Static text: Larger/more prominent headline for music package discount promotion. Should match the version of the headline in the smaller headline, either in full, or as an extended version of that smaller headline.
  3. Static text and/or image(s): Detailed information about the discount promotion, including images if relevant.
  4. Static text link: Copy with link to close/shrink/dismiss the larger discount promotion content area or window. Clicking on the link will return the page state to exactly what it was prior to the user clicking on the "more info" link, retaining all prior form selections, etc. May also want to make a larger area of the promo (such as the entire copy block, as in the prototype) clickable to dismiss it.
  1. Dynamic link/button: Link text and placement will be static, link target and display rules are dynamic. Once the user has selected a minimum of one new device from the options shown, this link/button should appear. Clicking on it will take the user to the next page in this flow, which will vary based on the user's current device(s)/plan(s) and selected product type(s) and number.
    Examples:
    • If the user has selected at least one new phone, and he/she already has a shared plan, the next page would be Primary Scenario: Plan Selection.
    • If the user has selected at least one new phone, and he/she already has one or more individual plans, the next page would be Secondary Scenario #3: Plan Sharing Question
    • If the user has selected at least one new phone, and he/she does not currently have any phones on a plan, the next page would be Secondary Scenario #5: New Plan Selection
    • If the user has selected only computer, no phones, the next page would be Secondary Scenario #6: New Plan 2 Selection
toggle transparency | toggle fullscreen