ux portfolio - s3.amazonaws.com · joshua gorain • agoraingmailcom landing page miller fortune \\...

13
UX Portfolio joshua gorfain [email protected] 561.523.0845

Upload: others

Post on 02-Sep-2019

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

UX Portfoliojoshua [email protected]

Page 2: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Playlist ResultsBen & Jerry's \\ Ice Cream Jams

Page 4 of 5F#

0 50 100 150 200 250 300 350 400 450 500 550 600 650 700 750 800 900 10501000950850

Ben & Jerry's Logo Placeholder

Like us on FacebookVisit benjerry.com Follow us on Twitter

Notes

Ice Cream JamsPresents

Chocolate Peppermint Crunch Playlistlisten and subscribe post f tweet

TrackName

ArtistName

TrackName 3:00

TrackName

3:00

ArtistName

ArtistName

TrackName

3:00

3:00

ArtistName ▶

TrackName

3:00

ArtistName

3:00

3:00

ArtistName

ArtistName

TrackName

TrackName

30 tracks (2 hours)

Here is your playlist off of your new favorite flavor!

Ice cream flavor pint picture

Get a coupon for a pint of ice cream

Chocolate Peppermint CrunchBen & Jerry’s Euphoria Productions presents Chocolate Peppermint Crunch. (Cue Voiceover:) “Journey through a world of chocolate ice cream, where powerful swirls of peppermint & fudge join forces with mint chocolate cookies to await their epic destiny.” Now in freezers nationwide, and coming soon to a spoon near you. Enjoy!

Ice cream flavor pint

picture

Ice cream flavor pint

picture

Ice cream flavor pint

picture

Ice cream flavor pint

picture

Ice cream flavor pint

picture

Ice cream flavor pint

picture

Choose another flavor

Ben & Jerry’s • Ice Cream Jams

Users choose a new Ben & Jerry’s Ice Cream flavor, and generate a playlist based on their choice. Loader video plays while the playlist is being generated. Results page includes a down-load button for a coupon.

Page 3: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Ben & Jerry’s • Ice Cream Jams

Page 4: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Page 2 of 4© F# 2013 F# Pre Sales \\ FPS-1651

0 50 100 150 200 250 300 350 400 450 500 550 600 650 700 750 800 900 10501000950850

Clicking on each of the boxes below the main feature will change the main feature to the artist clicked on.

Notes

PRESENTS

RESONANCEEVERY SONG HAS A MESSAGE AND EVERY SONG HAS A STORY. HEAR ABOUT THEM STRAIGHT FROM THE SOURCE.

CHRYSLER

post ftweet visit website

Landing PageChrysler // Resonance • Content Hub

Listen to the story behind the songs of

Kanye West

Listen to the story behind the songs of

EminemListen to the story behind the songs of

Metallica

Listen to the story behind the songs of

ColdplayListen to the story behind the songs of

Kings of Leon

Listen to the story behind

Banana Pancakes by Jack Johnson

ARTIST PIC

ARTIST PIC

ARTIST PIC

ARTIST PIC

ARTIST PIC

OTHER SONG

OTHER SONG

Chrysler • Resonance

In this program, we’d invite well-known art-ists into an environment to discuss their five most popular tracks - the stories behind them, why they think they’re resonating with fans, and how they came to be over 6-12 months.

It’s kind of like Inside The Actor’s Studio, but with a music focus.

The content on the hub should be videos of the interviews (can just be an artist shot with a play button), links to the artist’s catalog/albums, and curated playlists (for Eminem, could be “The Inspirations of the Marshall Ma-thers LP”).

Page 5: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Chrysler • Resonance

Page 6: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Landing PageMiller Fortune \\ All In

Page 4 of 5F#

0 50 100 150 200 250 300 350 400 450 500 550 600 650 700 750 800 900 10501000950850

Miller Fortune Logo

Like us on FacebookVisit Miller Fortune Follow us on Twitter

Notes

All InMiller Fortune presents

Miller Fortune and Spotify teamed up to uncover moments from Young The Giant and Rudimental when they went All In.

Check out the personally curated and annotated playlists below!

Young the Giant

Young the Giant's Playlist Subscribe Share

Rudimental

Rudimental's Playlist Subscribe Share

Commentary 4HigherSpoonsCommentary 3Feel The LoveFreeCommentary 2Waiting All NightRight HereCommentary 1Not Giving InFeel The Love

RudimentalRudimentalRudimentalRudimentalRudimentalRudimentalRudimentalRudimentalRudimentalRudimentalRudimentalRudimental

Young the Giant Rudimental

Commentary 4Garands12 FingersCommentary 3StringsGod Made ManCommentary 2I GotApartmentCommentary 1My BodyCough Syrup

Young the GiantYoung the GiantYoung the GiantYoung the GiantYoung the GiantYoung the GiantYoung the GiantYoung the GiantYoung the GiantYoung the GiantYoung the GiantYoung the Giant

Miller • All In

Users will be able to listen and subscribe to an-notated playlists by Young The Giant and Ru-dimental.

This is for a new unreleased beer called Miller Fortune.

Page 7: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Miller • All In

Page 8: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Landing StateProctor & Gamble \\ Everyday Me

Page 4 of 5F#

Notes

Everyday Me PlaylistGet that perfect playlist for whatever you are doing!

1. Who is this for?

2. What activity are they doing?

Activity Pic

3. How long is this activity?30 minutes

Get Playlist

Book Club Night

Myself

0 50 100 150 200 250 300 350 400 450 500 550 600 650 700 750 800 900 10501000950850

Proctor & Gamble • Everyday Me

User selects member of family, an activity and length of activity and a playlist is generated that fits that criteria.

Page 9: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Proctor & Gamble • Everyday Me

Page 10: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Landing PageRevlon \\ Celebration Hub

Page 4 of 5F#

0 50 100 150 200 250 300 350 400 450 500 550 600 650 700 750 800 900 10501000950850

Jessica Alba

Jessica Alba

Notes

Revlon Logo

Celebration playlists

Like us on Facebookhttp://www.revlon.com Follow us on Twitter

Discover the music that inspired Olivia Wilde and other spokeswomen

inspiring playlistOlivia Wilde's

Listen Now F T

Shout Tears for Fears

Heartbeat Childish Gambino

All Wrong Morphine

Race Cars and Goth Rock Cake

Flight of Icarus Iron Maiden

Ripe (With Decay) Nine Inch Nails

Hands in the Air Timbaland & Ne Yo

Ring Road Underworld

Iron Man Black Sabbath

Halle Berry

Halle Berry

Emma Stone

Emma Stone

Jessica Biel

Jessica Biel

presents

Revlon • Celebration Playlists

Curated/annotated playlist from Revlon spokes women (Haley Berry, Olivia Wilde, Emma Stone, Jessica Alba, Jessica Biel, etc.). Use Olivia Wilde for mock of landing page. Fans can listen to the music that inspires these women, and hear from them why they choose each song. Features tabs to navigate between the different women and their playlists.

Page 11: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Page 12: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]

Landing PageVolkswagen \\ Your Journey, Your Playlist

Page 4 of 7F#

0 50 100 150 200 250 300 350 400 450 500 550 600 650 700 750 800 900 10501000950850

Search Songs

Add a song to get your custom ski vacation playlist!

Volkswagen Logo

Placeholder

Like us on FacebookVisit www.volkswagen.es Follow us on Twitter

Your Journey, Your Playlist Volkswagen presents H.1

H.2

F.1 F.2 F.3

1. LogoDisplays logo and links to website.

2. Song SearchSearch box for searching a song to add to collaborative playlist.

3. Recently Added TrackDisplays a row of recently added tracks to the collaborative playlist. These tracks may be played inline if Facebook Ad Unit. Tracks are not played inline in Ad Page.

4. Website LinkLinks to website.

5. Facebook LinkLinks to Facebook page.

6. Twitter LinkLinks to Twitter page.

Notes

Select your ski vacation destination.

L.2

L.1

La Molina

5

3

1

4

2

Sierra Nevada

Formigal

San Isidro

Manzaneda

Get Playlist L.3

Volkswagen • Your Journey

For the 4 motion option: http://www.volkswagen.co.uk/technology/transmis-sions-and-drivetrains/4motion

Users arrive on the adpage and enter their fa-vorite song and their location and destination to the ski station on a map. While the playlist is loading they will see a video. Then the app will generate a map that show them the exact route they’re going to take and the weather information. Also they will receive a playlist based on their tastes. They can share the ex-perience with friends on social networks.

Page 13: UX Portfolio - s3.amazonaws.com · Joshua Gorain • agoraingmailcom Landing Page Miller Fortune \\ All In F# Page 4 of 5 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700

Joshua Gorfain • [email protected]