launching the app - case 1honeyman.info/assets/samples/tutorial.pdf · 2016-08-01 · slyde logo...

1

1

2

3

4

5

1. Opening Animation

ShiftingLogo

Carrier 12:34 AM 100%

2. Intro Panel

SlydeLogo

Slyde logo on top of a flat colorbackground. The logo animates - itshifts between the top-nav icons(menu, wallet, store, deals) untilit becomes the static Slyde logo.

Transition Animation:

Once it becomes a static logo,the next panel comes up from the bottom at full speed and decelerates into place.

Background layer: a flat color, seespecs. Note that it extends into thebackground of the topmost area (battery, bars, wifi, time, etc.).

Important Note: this tutorial sequenceis the only part of the app where theslide-up screen is not present or visible!

Header: How it WorksContent: Signup, add a card, andpay hands-free at participating storesand restaurants - it’s that simple.

Header: Earn DealsContent: Get discounts by sliding dealsfrom the list and saving them to the app.

Sub-Header: LocationContent: Slyde will find stores andrestaurants nearby that you’d like.

Sub-Header: BluetoothContent: Pay hands-free: no muss,no fuss.

Content: We take your privacy seriously.Slyde will never share your personal information.

Header: Let’s Get StartedContent: But first, may we haveyour permission...

NOTE: this text comes up fromthe bottom parrallax-style, and wobblesinto position. The text below DOES NOT.

Header: You’re Good to Go!Content: Now the magic happens.Log in, sign up, or swipe ahead for a new way to pay and save cash atyour favorite stores and restaurants.

Same scrolling interaction asprevious panel.

Background layer: a splash image,see specs.

Background layer: a splash image,see specs.

Background layer: a flat color. Seespecs. Same for the rest of the panels in the tutorial - be sure tosee specs for what color we use.

Header text and content slides up from bottomat a different speed than the backgroundpanel, parrallax style. It comes in frombottom full speed, decelerates, andwobbles into place. See the onboardingflow for the app called Argus for iOS.Note that Argus has content sliding in from the sides, ours comes in from bottom.

Header text and content slides up from bottomat a different speed than the backgroundpanel, parrallax style. It swoops in frombottom full speed, decelerates, andwobbles into place. See the onboardingflow for the app called Argus for iOS.

Header text and content slides up from bottomat a different speed than the backgroundpanel, parrallax style. It swoops in frombottom full speed, decelerates, andwobbles into place. See the onboardingflow for the app called Argus for iOS.

The Sign-up button isstatic and motionless through-out therest of the tutorial - as if it is a permanentlayers on top of the incoming tutorialpanels.

If a user presses the sign-up button, a transitionalanimation occurs: the new screen shouldexpand up from the button itself, meetingthe boundaries of the screen. Like this:http://goo.gl/Vw0Ydc or like this example:http://goo.gl/J1lJmL. It delivers them to the onboardingscreen where they can select “sign up” “log in”or “sign up via facebook”

Breadcrumbs are persistant in eachscreen to indicate the user scrollsto read the tutorial.

An arrow indicates that users shouldswipe up to bring in the next panel ofthe tutorial.

An exit button appears in the first panelof the tutorial sequence. It allows the userto exit the tutorial sequence.

When a user presses it, a transitional animationoccurs: the current page fades out to revealthe deals menu.

When a user swipes up, the new page loadsjust like the first page: it comes up from the bottomat full speed, and gently decelerates into place,appearing as if it ‘locks into position’ gracefully.

Each scroll-up should have this same transitionalanimation.

When a user scrolls up, the new page loadsjust like the first page: it comes up from the bottomat full speed, and gently decelerates into place,appearing as if it ‘locks into position’ gracefully.

2

3

Sign Up6b

6b

!

!

!

!

6a

6a

User loads Deals Page by swiping up.6a

6a


3. Payment Panel

How it Works Sign up, add a card, and payhands-free at participating storesand restaurants - it’s that simple.

8

A

A9

9

Image thatconveys settingup a profile anda credit card.

The text fieldsanimate as contentis entered, and thena credit card bumpsup and into view.


4. Deals Panel

Earn Deals Get discounts by clipping dealsand saving them to the app.

Image thatshows how to slide-to-clip deals.

This image animateswith a shot of a deal being swipedand saved.

Toggle buttons for Location andBluetooth. NOTE: if the user’s phonealready has bluetooth on, do not displaythe option on this page - the label,and the toggle should not be visiblif it is already on. If a user clicks eithertoggle, the pop-up request appearsto let them allow location/bluetooth.

Swipe up button is present again. Seenext panel for interaction.

When a user swipes up, same as above:a transitional animation occurs to bringuser to the Deals page. First, the fournavbar icons fly upward into place inthe navigation header. They shoulddecelerate gently into place. The Dealsheader should be at the top, center of the navbar.

If a user taps any of the icons a transitionalanimation occurs to bring them to the pagethey selected. First, the four navbar iconsfly upward into place inthe navigation header. They shoulddecelerate gently into place. The Dealsheader should be at the top, center of the navbar.

9


5. Opt-in Panel 5. Final Segue Panel 6. Transition to Deals 7. Transition to Deals Cont. 8. Final if swiped from #5 8. Final if tapped an icon

Let’s Get StartedBut first, may we have your permission...

Location Slyde will find stores and restaurants nearby that you’d like.

BluetoothPay hands-free: no muss, no fuss.


10

10

10

You’re Good to go! Now the magic happens,

log in, sign up, or swipe aheadto start getting all your favorite

things hassle-free.

Launching the App - Case 1 Occurs when a user opens the app for the very first time.

7

7

7a

7a

We take your privacy seriously. We willnever share your personal information. Swipe Up

Carrier 12:34 AM 100% Carrier 12:34 AM 100%

You’re good to go! Now the magic happens,

log in, sign up, or swipe aheadto start getting all your favorite

things hassle-free.

Menu Deals Stores WalletMenu Deals Stores Wallet

Swipe Up12

11

11

12

Next, the Deals page slides up from thebottom of the screen at the same time as the icons fly to their positions at the topof the screen.

The user is delivered tothe deals page in the app.

12

12 13

13

Deals Page


Deals Page


Deals Page

If the user tapped an icon in panel#5, and the icon is NOT the Dealsicon, the page slides left or right to their selection (menu, stores, or wallet).

As always with transitional animations:the page should slide in at full speed,and gently decelerate before locking into place gracefully.

14

14


Menu,Stores,

or Wallet Page

5


4

B

B

F

C

D

E

F

G

G

C

D

E

3

4

5 If a user presses the sign up button, a transitional animation occurs:the new screen should expand up fromthe button itself, meeting the boundariesof the screen.

An arrow indicates that users shouldswipe up to bring in the Deals Page.

When a user scrolls up, the Deals Page loads:it comes up from the bottom at full speed, andgently decelerates into place, appearing as if it‘locks into position’ gracefully.

!

Launching the App - Case 2 Occurs any time the user opens the app WITHOUT being logged in.

5


SlydeLogo

3

Sign Up

!

4

53

4

5


SlydeLogo

4

Background layer: a splash image that arrivesunfocused and blurry, but sharpens into focus as dealsare loaded (this animation occurs for howeverlong it takes to load the Deals info), see specs for image.

The image comes into focus. When it does,the Slyde logo fades into view.

Once the image sharpens and the logoappears, the deals page slides in fromthe bottom of the screen.


3

Launching the App - Case 3 Occurs any time the user opens the app and she IS LOGGED IN.


Deals Page

9

Swipe Up

Swipe Up

Sign Up Sign Up Sign Up Sign Up Sign Up

launching the app - case 1honeyman.info/assets/samples/tutorial.pdf · 2016-08-01 · slyde logo...

Documents