Interaction Design
Visual Design


User Research

TBD if there will be Usability study further in the process.

Exploration Scenarios for Framing Purposes

ScenariosDetails and Notes
As a user, I want to know about the new Pins collecting experience when the feature launches
  • Glow or visual treatment of "My Stuff" as the entry way for users to be curious about Pins and explore
  • Upon finishing Profile creation and entering birthdate, user gets their first Pin but won't be taken to a heavy-guided tutorial. Instead, they can discover the pins experience through the Profile screen somehow. Can be similar visual treatment of "My Stuff" to get users in.
As a user, I want to know when I've earned a new pin.
  • From watching shows
  • From entering my birthday
  • From authenticating
    • Do we message on the Sign In context sensitive screen that users can earn a pin from this?


As a user, I want to be able to see my collection of pins



  • Table of Contents for book sections
  • Cards for pins in a set
  • How to Sort? 
  • Should we group by IP? 
  • One-off pins how to sort


Sorting?
  • See all
  • By show
  • By set

As a user, I want to know what types of pins I can earn.

  • Silhouettes, sets, depends on how we organize pins
As a user, I want to see details about a pin I have collected

  • Set Title
  • Set: Subhead 6 out of 10 pins
  • Pin Name
  • Trivia
  • How earned
  • Rotate how? —> motion/first few times hints 
  • Save to Photos → Card template is saved to photos


States of Set Details


As a user, I want to know at a glance which pin in My Pins are newly collected
  • Visual treatment somehow of new pin

As a user, I want to see details about a pin I have not collected yet


  • Set Title
  • Set: Subhead 6 out of 10 pins
  • Pin Name
  • How to earn (vague because don't want to be perceived as promoting binge watching)
  • How to Earn CTA that takes user to the Video or Show Details. 
  • Pin Silhouette

As a user, I want to know HOW to earn a pin and be able to easily access where to do so

  • From Pin Details

As a user, I want to know how close I am to collecting another pin.

  • In Pin Details mainly – may only apply to watching content. Some sort of progress bar

As a user, I want to know when I finish collecting a set of pins.

  • Triggers pin reveal and special animation?

As a user, I want to know when new pins are added to DisneyNOW so that I can start earning them.

  • Some sort of marker or treatment of UI when there are a new set of pins/new pin
 As a user, I want to earn pins from my DisneyNOW experiences
  • Watching Content
  • Authentication
  • Birthday
  • Watching streaks video
  • Live play - 8 planned for the year
As a user, I want to know if a pin is available for a limited time only (because of programming)
  • Ex: If we know the Descendants movies are only up for X amount of time.
  • Probably disable the How-to-get CTA until the content is programmed again
  • "Uh-oh. Looks like this pin isn't able to be earned at the moment. Please check back later."
As a user, I want to save pins I have collected to my camera roll
  • Saves in card format with fun fact, when collected, how collected



Error Scenarios

  • Pin image fails to load on reward
  • Pin image or silhouette fails to load in details
  • My Stuff image fails to load 
  • Pin is not available because content needed to unlock it is not programmed. 



User Experience Design

    Exploration Sketches

    11/30/2018 - Rona & Adam Brief Ideation

    Profile Space

    Exploration of various ways to lay out new entry point for pins.

    Going with My Emoji and My Pins on top row. Daily Surprise and Collect Emoji under.

    If possible, Daily Surprise moves below Collect Emoji button after claiming.

    Pins Organization

    2x2

    Horizontal Cards Medium Cards + Sort Medium Cards + Sort + A-Z


    Pin Set Details

    -Can/should we surface link to tile for pins user has not collected
    Pin Details Achieving Pins


    Not having pins stay within card so that pins fanfare can be more flexible with portrait or landscape

    Visual Exploration



    Mobile Design

    • Profile
    • My Pins
      • All Pins
      • Pin Set Cards
    • Pins in Show Details
    • Pin Set Details
    • How to Collect Modal
    • Pin Details
    • Normal Pin Earn Fanfare (Horizontal + Vertical)
    • Bonus Pin Earn Fanfare (Horizontal + Vertical)










          Questions

          Below is a list of questions to be addressed as a result of this requirements document:

          QuestionOutcome
          What pin do new Profiles get when they first start out?