UX Lead	Rona Sheen
Visual / UI Lead	Cherrie Go David Gardner

Overview Document

15 Pins Program - Overview and Context

Usability Test - July 2019

2019.07.10-11 - Pins Usability Test

Design

Pins Intro for Existing Users Only

Plan is to have subtle indicator to draw users to pins button

Profile

Latest Wire

Removal of Daily Surprise button since that isn't going to be there anymore to save dev work time. (March 2019)

Wires Exploration

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.~~ (Daily Surprise no longer to be surfaced in Profile)

My Pins

Latest Wires

My Pins - All Sets	My Pins - All Pins	Pin Set Card States

		Old Version
Organized by programming priority

Early April 2019

My Pins - All Sets	My Pins - All Pins	Pin Set Card States

Organized by programming priority

Explorations

How might we organize pins?

Idea of toggling views early on but later simplified design
Later added in "ALL PINS" view so that users can have a show-off moment of all the pins they've collected so far.

At one point we also explored carousel of cards.

Exploration around sorting if there are a lot of pin sets.

Later on, worked with Product team to define how many sets we'll have for launch–around 6 sets. This caused us allowed us to simplify the design further.

Limited Time	New Set

Pins in Show Details

Comp


(The comp contains explorations of Season filtering but those won't be implemented during Pins Phase)

Wires


Latest Wires In late March 2019 review with Product Team, design received feedback that the Pin Silhouettes need to be more mysterious to drive collection. Perhaps not including name of the pin and only silhouette. If multi-set, then Set Name labels will appear.		Gumstick type explorations to see if we could fit a quick snippet. Silhouettes turned out to not scale down well. Too small.	Decided not to go with Pin Set Cards under the Pins filter since each show will likely only have one set. Therefore, we could expose all the pins instead.

Pin Image Fallback Details

Pin Set Details

Typically around 3-5 pins per pin set
Bonus pin is earned upon completion of set

Collected Pin	Not Collected Pin	Bonus Pin

For Mobile, as user scrolls each pin in a set into view, the environment background behind moves to a new part.	[Future] For pin sets with more than 5 pins, the indicator mickey dots appear.	User earns “Bonus Pin” for a set by collecting all the pins in the set. This Bonus Pin can be any type of character/thing/object related to the set’s IP.

Tablet

Tablet - Pin Set Details with BG	~~Tablet - Pin Set Details with Texture Environment~~

	No longer staggering pins like below. Will have aligned row of pins that scroll horizontally.

Previous potential set ideas:

1. Completing a set earns user a bonus pin that is not related to the set’s pins

1b) bonus pin is a group pin based on the other pins in the set

2. As a user collects pins in the set, the bonus pin (which is of the group) reveals each character on it that relates to what the user has already collected.

3. No bonus set pin, only individuals are earned.

How to Collect Modal

From design team weekly review 6/10/2019 we were looking at the latest comps and decided to remove the IP Key Art from the How To Collect modals. Our reasoning is because:

• It will simplify the design deliveries and prevent weird color clashes of the overlay blue and the key art
• With the smaller modal, users will still be able to associate the modal with the IP because they can see the logo through the overlay, whether that’s over Pin Set Details or Show Details.
* Here’s the example of before and after in wire form below