Web Mockup Statement of Work

Owned by Former user (Deleted)
Last updated: Jun 04, 2010Version comment
4 min read

This page describes the SOWs for an HTML/Web Mockup being developed to demonstrate the end-user experience of logging in to a site.

Statement of Work #1

The contractor is to work with Kantara staff to put up a new section of the Kantara site that can be linked to from the ULX pages (e.g. Working Drafts). These pages taken together constitute the "Web Mockup". Here are the requirements for these pages:

  1. Implements the "unmodified browser, first visit" use case within the NIH scenario
    1. Flow #1
    2. Flow #3 if possible
    3. Flow #2 if possible
  2. This scenario has been mocked up as the NIH Scenario Static Mockup using static images, the idea is to bring this to life and to make it seem to actually work to log the user in. (Of course this is really just a mockup so no "real" login happens)
  3. The NIH Scenario Static Mockup is missing in the first step the "connect" button shown in the middle of this page Non-chrome Login Button

Statement of Work #2

This is a new statement of work to be done that builds on what has already been done in the previous SOW #1.

  1. Add a close button to the popup
  2. Disable the left and right horizontal scrolling controls if there are no more account-buttons to see
  3. Add a "MyNCBI" button and have it link to the MyNCBI login page
  4. After the user clicks on an account-button it should launch a separate browser window (showing all the regular chrome etc.). [ulx:Have a look at how Janrain RPX UX works--their popup launches a second browser window (SBW)]
  5. Each account-button should redirect the SBW to a fake copy of the the correct OpenID or SAML or Infocard site. 
    1. I-card
      1. Replace Citigroup account-button with a new PayPal button. The PayPal non-fake is http://icard.paypal-ids.com/home.do
      2. The Equifax non-fake is http://equifaxicards.com.
      3. We should delete Acxiom account-button because their IdP site is currently password protected (it is live but not public)
    2. OpenID
      1. Yahoo non-fake is here
      2. Google non-fake is here
      3. Replace AOL account-button with Windows Live ID here
      4. Delete Wave account-button
    3. SAML
      1. The non-fake OSU is https://webauth.service.ohio-state.edu/idp/profile/Shibboleth/HS?shire=foo&target=foo
      2. <BU, "Bost" etc. urls here >
  6. As you type in the search field it should dynamically filter the visual display of account buttons. There should be no need to type return/enter
  7. Change the search bar to say "Search accounts i.e. Boston University"
  8. The words "Connect with" should not be bold
  9. Replace "Connect with:" with "Connect with..."
  10. Display account buttons for all accounts [ulx:Valeska to create 5 more account-buttons] including Boston University and the other "bost" account-buttons
  11. Replace the search field icon/button with an icon floating inside on the right of the search field
  12. After the user logs in, the background page should change to look different from the login page AND the "Connect" button should be replaced with a "Disconnect" button [ulx:Valeska to create a Disconnect icon]
  13. Change the orange vertical bars back to the blue color we started with
  14. The new "MyNCBI" account-button should replace Google in the upper left. 
  15. On Equifax, Acxiom and Citigroup account-buttons redirect the SBW to the correct URLs in the SBW --duplicate of #5
  16. Each account-button should have a tool-tip
  17. Tooltip on Connect button: "Click here to sign in"
  18. Tooltip on the Disconnect button: "Click here to sign out"
  19. Match the style of screen "D" and "E" Valeska can provide you these screens
  20. Remove "MyNCBI" button from the top right of the pubmed home page
  21. Paul will probably want to replace Citigroup with PayPal account-button
  22. Add mouse-over treatment on account-buttons (see Valeska's screen "F")

Statement of Work #3

  1. Make at least one of the account-buttons lead to a full browser redirect (as opposed to popping up a smaller separate browser window).
  2. Remove OSU and Boston university account buttons from the default display. (The default display corresponds to a display of the RP's "preferred" account-buttons)
  3. Add some kind of "Help" or "What is this?" link on the selector pop up to give people some exposition. It can lead to a page that just says "Explanatory text would go here."
  4. Even though OSU and BU were removed as "preferred" accounts (aka account-buttons) if you type these in the search area they WILL still appear.
  5. Double check that all of the IdP web pages (e.g. Google, etc.) mention the same "requesting" site (in this case pubmed.gov). Also, add a text string that represents the name of the application running at the domain (e.g. 'PubMed Home Page' in this case). Also, add an icon copied from the domain.
  6. Need to add a "see all choices" capability to break out of the captive list. Not clear whether a drop down or just actual presentation of a list is best.
  7. Ignore.
  8. One user actually thought that you had to click all 8 account-buttons. So clearly we need to change the "Connect with:" language --Valeska to suggest
  9. Ignore.
  10. The Oauth/permissioning third window is present in the Google account-button flow but is missing from the Yahoo, PayPal and MSFT Live flows. It should be added back in.
  11. The account-buttons should be vertically separated into two groups: (a) those that you've used before at the site and (b) all the rest of "preferred" choices. This is an entirely new capability: the selector popup has to remember what you have used previously (not just what you used last time (as it does today)).
  12. Ignore
  13. Bug: Doesn't work on an iPhone/iPad: the popup appears, but the secondary browser invocation fails (not surprisingly). If the ULX code detects that you are on and iPhone (others??) it should always redirect to the IdP's page (e.g. Google's login page) and not attempt to pop up a browser window.

Statement of Work #4

Implement Valeska's REVISED version 4 mockups (created 4-June-2010). This work includes (cumulatively from original + revised version 4 mockups):

  1. New aspect ratio and appearance for account-buttons
  2. Three columns of buttons (not two)
  3. New scroll bar at the right
  4. New text/wording (e.g. Sign in to PubMed / with 1 of the 45 accounts below)
  5. New close button
  6. New mouse over options
  7. Eliminate the "Connect" button--revert to existing site treatment (e.g. "Sign In" in the PubMed case)
  8. Implement new "two horizontal areas" popup mockup that Valeska created (upper area shows "last time used", lower area shows "all the other options". Implement >> (more) and << (less) link/buttons on popup. Clicking more displays the lower horizontal area. Clicking less collapses/hides the lower area.)