Lionsgate Peeples Wireframes v1

PAGE

1LIONSGATE – PEEPLES FAMILY PORTRAIT CREATOR

CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

F.P.O.

FAMILY PORTRAIT

BEGIN

VISIT THE PEEPLES’ FAMILY ALBUM

In Theaters May 10

THIS FILM ISNOT YET RATEDFIND US ON SHARE VISIT OFFICIAL SITE PEEPLES’ FAMILY ALBUM LEGAL INFO

1

2

3

1. Talent Video• On desktop, video will play on the left side of the screen, prompting the user to begin the experience.

• On tablet, a still image of talent will occupy the space.

2. Recent Portraits• Recent images will be pulled from the Tumblr site and displayed here.

3. Tumblr CTA• Link to the Tumblr site. Link is also persistent in the footer.

HOMEPAGE

Portrait Creator

PAGE


CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

In Theaters May 10

First, select a family portrait style

F.P.O.


1. Talent Video• On desktop, video continues to play throughout the experience, in a random order.

• On tablet, one video plays per user action.

2. Portrait Selector• The 9 portrait styles are displayed in a grid. User clicks/taps to select their template.

1

2

TEMPLATE SELECTOR

PAGE


CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

In Theaters May 10

Alright, this portrait has 3 people.

First, we need Dad’s photo.

TAKE PHOTO UPLOAD FACEBOOKF.P.O.

F.P.O.


1. Image Acquisition, Step 1 (desktop)• Image acquisition is a multi-step process, with multiple images per template (up to 3). The user is informed of which photo needs to be acquired.

2. Desktop Image Acquisition Options• In a desktop browser, the user is given the options of taking the photo using their webcam, uploading a local file, or pulling a photo from their Facebook account.

1

2

IMAGE ACQUISITION, STEP 1 (DESKTOP)

PAGE


CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

In Theaters May 10



TAKE OR USE A PHOTO FACEBOOKF.P.O.

F.P.O.


1. Image Acquisition, Step 1 (tablet)• Image acquisition is a multi-step process, with multiple images per template (up to 3). The user is informed of which photo needs to be acquired.

2. Tablet Image Acquisition Options• In a tablet browser, the user is given the options of going to their camera application (where they can take a new photo or use a photo in an existing album), or using an image from their Facebook account.

1

IMAGE ACQUISITION, STEP 1 (TABLET)

PAGE


CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

In Theaters May 10

F.P.O.

F.P.O.


1. Image Acquisition, Step 2 (desktop)• In a desktop browser, the user must allow use of their webcam.

1


PAGE


CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

In Theaters May 10

F.P.O.

F.P.O.


1. Image Acquisition, Step 2 (desktop)• Once the user has allowed access to their webcam, a live feed of the webcam is displayed. User can take their picture using the camera button below.

1


PAGE


CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

In Theaters May 10



TAKE OR USE A PHOTO FACEBOOKF.P.O.

F.P.O.

Would you like to take a photo with the camera or use a photo from one of your albums?

CAMERA PHOTO ALBUM


1. Image Acquisition, Step 2 (tablet)• If the user opts to take or use a photo on tablet, they are given a device prompt asking them to choose between using the camera or going to a photo album.

1

IMAGE ACQUISITION, STEP 2 (TABLET)

PAGE


CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

In Theaters May 10

F.P.O. RETAKE LOOKS GOOD

HUE CONTRAST SATURATION

F.P.O.


1. Image Acquisition, Step 3• The photo taken by the user is placed roughly into the correct area.

2. Image Manipulation• Using buttons on the corners of the image bounding box, the user can rotate, scale, and move the image.

3. Image Adjustment• Sliders allow for adjustment of image hue, contrast, and saturation.

4. Confirm / Cancel• The user can return to the previous step or confirm the image. If additional images are required for the template, the user is returned to step 1 of the image acquisition process and prompted to capture the next required image.

1

2

3

4

IMAGE ACQUISITION, STEP 3

PAGE


CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

In Theaters May 10

F.P.O.DOWNLOAD

f t p t gMAKE ANOTHER

ADD US TO THE PEEPLES’ FAMILY ALBUM

F.P.O.

SHARE

LOREM IPSUM DOLOR SIT AMET


1. Completed Portrait• Once all photos have been acquired and placed, the user is presented with their completed portrait. Completed portrait features a text overlay and any necessary branding and copyrights.

2. Download / Share / Restart• Users can download the completed image, share it to social networks, restart the process, and upload it to the Peeples’ Tumblr site.

1

2

COMPLETED PORTRAIT

PAGE


CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

In Theaters May 10

F.P.O.

ADD US TO THE PEEPLES’ FAMILY ALBUM

CANCEL

F.P.O.

By adding your photo to the Peeples’ Family Album, lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

OR


1. Peeples’ Tumblr site upload• If users wish to share their portrait on the Peeples’ Tumblr site, they must opt in.

1

POST TO TUMBLR

PAGE


CLIENT

WIREFRAMES -

DESCRIPTION

03.15.13

DATE

Notes:

Peeples

Layout Not Final

In Theaters May 10

F.P.O.

VISIT THE PEEPLES’ FAMILY ALBUM

MAKE ANOTHER PORTRAIT

F.P.O.

Thank you, lorem ipsum dolor sit amet.

OR


1. Tumblr Upload Confirmation• Upon opting in to the Tumblr site, users are given a thank you message, and CTAs to visit the Tumblr site or make a new portrait.

1

SUCCESSFUL POST TO TUMBLR

Documents

Lionsgate Peeples Wireframes v1