Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Table of Contents

UX

Click model

https://overflow.io/s/Z6B8A8VT

Mobile special handling

https://overflow.io/s/G9WS0H80?node=52fd5316

UX Assets

Register FIO Address

https://gpworrell428458.invisionapp.com/overview/FIO-dApp---Address-Purchase---Frozen---March-9th-ckm2tv3zk019j01x6eypfgrop/screens

With custom domain

https://gpworrell428458.invisionapp.com/overview/FIO-dApp---Address-and-Domain---Frozen---March-26th-ckmqj5khu1ptp015531t47vg5/screens

Mobile views

https://gpworrell428458.invisionapp.com/overview/FIO---Address-Domain-View---Mobile-Views---April-11--2021-ckndjn9ae05lr010s29h24j2v/screens

Register FIO Domain

https://gpworrell428458.invisionapp.com/overview/FIO-dApp---Domain-Purchase---Frozen---March-16th-ckmcdda6r000o011kddfa3yk8/screens

Mobile views

https://gpworrell428458.invisionapp.com/overview/FIO---Address-Domain-View---Mobile-Views---April-11--2021-ckndjn9ae05lr010s29h24j2v/screens

Free FIO Address and USDC Price Computation

Visual

Functionality

Free FIO Address

  • Every account is entitled to 1 (make this nev var) FIO Address registration for free.

  • If user is not logged, show 1 FIO Address free. If they log-in and already have free address, an error will be presented.

  • Free address count should be tracked server-side

USDC Price Computation

  • USDC equivalent prices are computed as follows:

    • run get_fee for register_fio_domain and/or register_fio_address

    • convert fee using rate of exchange (ROE) feed (same as used by Reg site)

  • The ROE should be updated only every 30 minutes and stored in session to avoid constant variations in price

Register FIO Address

Visual

Functionality

FIO Address Selection

  • Versions

    • Authenticated header

    • Non-authenticated header

  • Collect

    • Username

      • X appears when first character is entered

        • When licked it clears the content and disappears

    • Domain

      • Show domains owned by user in any FIO Wallet (sorted alphabetically)

      • Obtain the list from Registration Site API (sorted as returned)

      • Default to first domain in list

  • Validate

    • Username

      • Convert onfocusout

        • Convert to lowercase

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Username only allows letters, numbers and dash

            • This FIO Address is already registered.

      • Validation rules

    • Domain

      • Convert onfocusout

        • Convert to lowercase

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Unfortunately the domain name you have selected is not available. Please select an alternative.

      • Validation rules

  • Display

    • FIO Address and FIO Domain cost

      • FIO Address and FIO Domain cost

        • Show FIO price with 2 decimal precision, e.g. 1.23 FIO

        • Show USDC price - see Free FIO Address and USDC Price Computation

        • If user selecting existing domain show FREE (if first address) only FIO Address USDC price (if FREE address already registered or added to cart)

    • Domain pull-down

      • Add “Add Custom Domain” item at the end

        • On click

          • Display domain field as entry field

            • Show X - closes the entry field and display original pull-down

    • Search icon

      • On click display re-run validation

    • Available/error banner

      • Display when FIO Address is available

      • Display on validation error

    • FIO Address section

      • Selected FIO Address

      • Show price

        • Show FIO price with 2 decimal precision, e.g. 1.23 FIO

        • Show USDC price - see Free FIO Address and USDC Price Computation

        • If user selecting existing domain show FREE (if first address) only FIO Address USDC price (if FREE address already registered or added to cart)

        • If user has selected a FIO Address on custom domain, show combined pricing (domain + address) as single FIO Address item

      • Add to Cart link - display when FIO Address is available

        • On click

          • Add FIO Address to cart

          • Replace Add to Cart with Added

          • Add X

            • On click remove FIO Address from cart and remove this section

      • If user searches for a new FIO Address this section disappears, even if FIO Address was added to cart.

    • Cart section

      • Show items

        • For FIO Address

          • If not on domain being purchased in same cart - bold user part of user@domain

          • Add annually

        • For FIO Domain

          • Bold user part of user@domain

          • Add annually

        • Show price

          • Show FIO price with 2 decimal precision, e.g. 1.23 FIO

          • Show USDC price - see Free FIO Address and USDC Price Computation

          • If user selecting existing domain show FREE (if first address) only FIO Address USDC price (if FREE address already registered or added to cart)

          • If user has selected a FIO Address on custom domain, show combined pricing (domain + address) as single FIO Address item

      • Checkout Now link - display when cart is not empty, hide when empty

        • On click

          • Display Cart Page (if more than 1 item in cart) or Checkout Page otherwise

            • If user not authenticated, display Create Account Page as overlay and all other registration steps as overlay.

      • Trash can icon

        • On click

          • On click remove FIO Address from cart

    • Purchase Domain

      • On click

        • Display FIO Domain Selection Page

Register FIO Domain

Visual

Functionality

FIO Domain Selection

  • Versions

    • Authenticated header

    • Non-authenticated header

  • Collect

    • Domain

  • Validate

    • Domain

      • Convert onfocusout

        • Convert to lowercase

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Unfortunately the domain name you have selected is not available. Please select an alternative.

      • Validation rules

  • Display

    • Search icon

      • On click display re-run validation

    • Available/error banner

      • Display when FIO Domain is available

      • Display on validation error

    • FIO Domain section

      • Selected FIO Domain

      • Show price

      • Add to Cart link - display when FIO Domain is available

        • On click

          • Add FIO Domain to cart

          • Replace Add to Cart with Added

          • Add X

            • On click remove FIO Domain from cart and remove this section

    • Cart section

      • Checkout Now link - display when cart is not empty, hide when empty

        • On click

          • Display Cart Page (if more than 1 item in cart) or Checkout Page otherwise

            • If user not authenticated, display Create Account Page as overlay and all other registration steps as overlay.

      • Trash can icon

        • On click

          • On click remove FIO Address from cart

    • Register and Address

      • On click

        • Display FIO Address Selection Page

Mobile Special Handling

Visual

Functionality

Cost moved

  • When FIO Address/Domain is viewed on mobile device, the following changes are applied:

    • Cost is moved from it’s own label to Available banner

    • Screen is automatically scrolled after clicking Get My FIO Address/Domain so that:

      • Available banner is on top of screen making Add to Cart and Checkout visible on screen