Skip to content

Instantly share code, notes, and snippets.

@ryexley
Last active August 29, 2015 14:00
Show Gist options
  • Save ryexley/11044484 to your computer and use it in GitHub Desktop.
Save ryexley/11044484 to your computer and use it in GitHub Desktop.
UI/UX development requirements artifacts

Data Requirements

This document should outline the details of the dynamic data that the application will consume, the source it will come from, access details and format information, etc.


Search

http://example.com/api/search

Query parameters

Parameter (default) Description
source (all) The data source to search against with the give search query.
query The search term
page (1) (optional) The page number to fetch from a paged list of results
size (20) (optional) The size of the page (number of results that will be returned) to fetch from a page list of results
GET
http://example.com/api/search?source=artists&query=foo&page=1&size=25
[
  {
    "name": "Foo Fighters",
    "albums": [
      "Wasting Light",
      "Echoes, Silence, Patience & Grace",
      "Skin and Bones",
      "In Your Honor",
      "One by One",
      "There is Nothing Left to Lose",
      "The Colour and the Shape"
    ],
    "links": [
      {
        "rel": "details",
        "href": "http://example.com/api/artists/100014796/foo-fighters"
      }
    ]
  },
  {
    "name": "Fools Garden",
    "albums": [
      "Who is Jo King",
      "Ready for the Real Life",
      "25 miles to kissimmee",
      "For Sale",
      "Dish of the Day"
    ],
    "links": [
      {
        "rel": "details",
        "href": "http://example.com/api/artists/100027837/fools-garden"
      }
    ]
  },
  {
    "name": "Thousand Foot Krutch",
    "albums": [
      "Metamorphosiz: The End Remixes, Vol. 2",
      "The End is Where We Begin",
      "Live at the Masquerade",
      "Deja Vu: The TFK Anthology",
      "Welcome to the Masquerade",
      "The Flame in All of Us",
      "The Art of Breaking"
    ],
    "links": [
      {
        "rel": "details",
        "href": "http://example.com/api/artists/100039461/thousand-foot-krutch"
      }
    ]
  }
]

Sources

http://example.com/api/search/sources
GET
[
  "all",
  "artists",
  "albums",
  "music"
]

Artists

http://example.com/api/artists/{id}

URL Tokens

Token Description Data Type
id The id of an artist to fetch number
GET
http://example.com/api/artists/100014796
{
  "id": 100014796,
  "name": "Foo Fighters",
  "description": "West coast based grunge rock band, founded by Dave Grohl, former drummer of Nirvana",
  "albums": [
    {
      "id": 9004283094,
      "name": "Wasting Light",
      "url": "http://example.com/artists/100014796/foo-fighters/albums/9004283094/wasting-light"
    },
    {
      "id": 900283940,
      "name": "Echoes, Silence, Patience & Grace",
      "url": "http://example.com/artists/100014796/foo-fighters/albums/900283940/echoes-silence-patience-grace"
    },
    {
      "id": 900103829,
      "name": "Skin and Bones",
      "url": "http://example.com/artists/100014796/foo-fighters/albums/900103829/skin-and-bones"
    },
    {
      "id": 900793718,
      "name": "In Your Honor",
      "url": "http://example.com/artists/100014796/foo-fighters/albums/900793718/in-your-honor"
    },
    {
      "id": 900902849,
      "name": "One by One",
      "url": "http://example.com/artists/100014796/foo-fighters/albums/900902849/one-by-one"
    },
    {
      "id": 900342956,
      "name": "There is Nothing Left to Lose",
      "url": "http://example.com/artists/100014796/foo-fighters/albums/900342956/there-is-nothing-left-to-lose"
    },
    {
      "id": 900019297,
      "name": "The Colour and the Shape",
      "url": "http://example.com/artists/100014796/foo-fighters/albums/900019297/the-colour-and-the-shape"
    }
  ],
  "links": [
    {
      "rel": "details",
      "href": "http://example.com/api/artists/100014796/foo-fighters"
    },
    {
      "rel": "albums",
      "href": "http://example.com/api/artists/100014796/foo-fighters/albums"
    }
  ]
}

Cart

http://example.com/api/cart/{userId}

URL Tokens

Token Description Data Type
userId The ID of the user the shopping cart belongs to guid
GET
http://example.com/api/cart/2e8dae28-1696-4ce4-b225-bd35a8e5ee06
{
}
POST
http://example.com/api/cart/2e8dae28-1696-4ce4-b225-bd35a8e5ee06
{
}

Functional Requirements

This document represents the desired functional and behavioral requirements for the Music Store application.


Main View

"music store" main header
  • This text should be present across all pages/views of the application
  • When clicked, should always return the user to the Main View of the application
Breadcrumbs bar
  • Should provide standard, commonly understood breadcrumbs navigational functionality
Account links bar (located immediately to the right of the Breadcrumbs bar)
  • Logout link: This link should navigate the user to an administratively configurable logout URL, as based on our current, internal security structure, the URL could change.
  • Your Cart link: Should link to our externally hosted shopping cart site, which also could change at any given time, so this URL should also be configurable, and accept parameters that should be available from a persistent cookie.
  • Your account link: Should link to the currently logged in user's account information page. Should be rendered as "Login", and should link to an administratively configurable login URL, when the user is not currently logged in.
Search panel
  • Sources dropdown: This is the dropdown list with the "music" option selected in the wireframe. The options in this dropdown are dynamic, and will be provided by the sources API endpoint.
  • Search term field: The textbox that has the text "artist name" in it in the wireframe. "artist name" is just placeholder text for the field, and should provide the user with an example of a common type of information they can search against the source. The placeholder text is also dynamic, and should change based on the value selected in the Sources dropdown. It should also receive focus automatically when the Sources dropdown value is changed. Pressing the enter key when this field has focus should trigger a search, and the user should not be required to click the Go button to trigger a search.
  • Go button: This button should be disabled when there is no value entered in the Search term field.
Related Artists panel
  • Each of the artist links on this panel, when clicked, should launch a modal "preview" view that displays summary information about the artist.
  • Each of the "listen" links next to tracks under the "Popular Tracks" heading, when clicked, should be replaced with a micro-player control that will play a clipped sample of the track.
Artist information (main) panel
  • All of the artist-specific information on this panel is dynamic and will be provided by the artists API endpoint.
  • artist updates registration checkbox: this checkbox, when checked or unchecked, should automatically trigger a call to the subscriptions API endpoint to register or unregister the currently logged in user to updates for the currently displayed artist.
  • media type radio group: these are static values that can be hard-coded. Each option should correspond to a price value associated with the selected album in the albums list for the artist. The value displayed below this list for "Price" should get automatically updated when the selected option changes.
  • Price label: This is a read-only label that should get automatically updated based on the selected album in the albums list, and the selected media type radio group. It should display "$0.00" when no album is selected in the albums list.
  • Add to cart button: This button should be disabled either when no album is selected in the albums list, or when the currently selected album and media type is already present in the currently logged-in user's cart.

Related Artist modal preview

TODO


Search Results View

TODO

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment