Spotful Mobile screens Load screen

 

 The spot itself will grow into place and pulse slightly. At this point in the app the time, carrier and battery are

still visible, this will be hidden once in fullscreen video mode. This view is if the viewer is looking in a portrait

view initially, if they are already in the landscape view the time, carrier and battery would adjust to the

landscape orientation automatically. Though the suggestion maybe to not have that information visible within

the app experience.

Animation/transition

 

  

The spot will grow and fill the screen. The white border will return to it’s original size as the transition occurs.

Once the spot has engulfed the screen the categories will be revealed in the landscape orientation.

Category View

 The display will show 6 spots, Music, Comedy, Travel, Education, News and Random categories. The user can

select a category of interest and be taken to the top video of that category.

This screen shows the music selected in a press down sate, ready to once again go through the Rabbit Hole

animation.

The next screens take you through the Rabbit Hole and finally to the Video View.

Video View - without timeline

Video view - with timeline

Video View - Current path drawer

The video will pause on a swipe to the left and a dark overlay will come over the video to show it is disabled.

The drawer from the right will contain a Title of the Category and a showing of “My Path” taken. It will display

the rabbit holes taken, the title, duration, rabbit holes/alternative paths within that video, and a visual display

and timestamp of when that rabbit hole was entered. The content will be scrollable if there are more videos to

display that 5. The animation slide in would be similar to this link of example 4

https://interactions.webflow.com/#examples

Alternative View

 

Video View - Categories drawer

Swiping the screen to the right will pull in the categories drawer for users to reset or start a new adventure.

This drawer will function similarly to the Current path drawer by pausing the video, dark overlay and animate

in a similar fashion.

Video View - Categories drawer ALTERNATIVE

This alternative version of the categories is more fun and playful and will act similarly to the original concept,

though it will animate and display differently. Please view the link and scroll down to the Keezy example on this

page to see the transition http://capptivate.co/

Funnel Download Prompt

A user would be prompted to get the App from a service like Facebook, which in turn would take them directly

to the App Store to download the app. Similar to this Starwars ad and App store ad:

However, if from another 3rd party service the user would be presented with a layout of the following screen.

With the call to action to download the App (Branding TBD).

End of Traditional Spot View

 

 These screens have custom icons to replay, share and go to categories/Rabbit Hole. The fonts and titles are

TBD, though these are some suggestions.

Views & User Flows

The primary user-experience for the mobile application will not be the typical desktop experience with a

variety of spot templates in place. These templates must still be available since we’d like the application to

open fully-augmented Spot videos linked to online, however, the core user experience will remain simple and

straight-forward. We’re going to position this application as a new, unique way of browsing video content

online (as opposed to the desktop positioning, which is a new, unique way of augmenting video online).

This document will describe the expectations and functionality of both methods of accessing and interacting

with the application, starting with the primary user experience.

You’ll notice that there are a few features marked “this may get dropped”. These should be considered

secondary priorities in your development pipeline as we may opt to not include them in the first phase/release

of the application depending on timing; cost; and how are feeling about the user experience within the

application as it develops.

User experience for when the application is loaded natively (as in, not due to a link or client video clicked online)

● [Initial View] User has the option to choose a category/genre/channel (/ski hill/rabbit hole)

○ Music

○ Comedy

○ Art

○ Travel

○ News

○ Educational

○ Random

○ etc.

● [Second View; this may get dropped] User has the option to choose 1 of N pre-configured starting

videos

● [Core App Behavior] The starting video plays full-screen in application

○ Pre-configured Spots show up at pre-determined times.

○ Each spot is associated with a template, each of which have their own behavior.

○ Template behavior and style must match desktop versions.

○ [Change video functionality] In this view mode, the vast majority of the spots will be rabbit hole spots.

■ Rabbit hole spots are spots that cause the application to switch videos after

triggering a transition/animation.

○ Additionally, there will be no in-player way to “go back” to the previous video.

○ [Save video functionality; this may get dropped] The user should have the opportunity to

“Save” or “Star” videos in order to be able to go back to them or share them later.

○ [Share video functionality; this may get dropped] The user should have to opportunity to

“Share” videos as well.

■ Share on Facebook, Twitter, Pinterest, etc. (* list to be finalized/determined) ■ Shared videos link into the application and act as if they were clicked on, on a user’s

path (see behavior below).

● [Current Path View] If a user swipes to the left, a slide-out drawer animates in from the right side of

the screen, displaying a list of videos that is the path the user has been taking down the rabbit hole.

○ A user can click on a video item in the path to go back to that video and take a different path

down the chain if he/she so chooses.

○ Choosing to go back to a video resets the user’s path (as it’s visualized) from that point on.

○ The path overlay will indicate the amount of time that was spent watching each video and the

number of spots included in that video (ie. number of alternative paths)

○ [Saved Videos List; this may get dropped] If a user swipes to the right, a slide-out drawer

animates in from the left side of the screen, displaying previously saved/starred videos.

■ These videos automatically link to the category/genre/channel that they were first

added from.

■ The selected is to be considered the start of a new path by the application (for path

display).

● [Categories View] If the user swipes to the right, a slide-out drawer animates in from the left side of

the screen, displaying the top-level list of categories from the home/category view.

○ Categories are displayed in circles/spots akin to the main view (* design mockups will be provided) but smaller and in a 1x6 grid

○ A user can click on a category in order to jump to the top of said category.

○ Selecting a category resets the current path.

Additional considerations

● In order to ensure a smooth browser experience, rabbit hole spots’ videos should have a chunk of their

video data pre-loaded just ahead of the spot showing up; that way the user can be transitioned into the

new video with a smooth animation and no loader/waiting time.

● Rabbit Hole spots will transition with a “zoom in” mechanic. This will be mocked-up and

demonstrated; but essentially, we see a port-hole-like zoom-in behavior which makes the user feel like

they’re “falling down” or “passing through” into a new video.

User experience for when the application is loaded by clicking on a Spot-enhanced video online (Web at large, Facebook, Twitter, etc.)

● The application loads and plays the spot-enhanced video immediately.

○ As part of the loading process, the application will request the Spot template details from the

Spot servers.

○ All spot templates should be supported and will be integrated in a seamless, beautiful way. (* design mockups to be provided)

○ This view-mode within the application should match the desktop viewing experience as

closely as possible. We understand that spot templates will need their mobile versions to be

designed specifically for mobile, but the overall user experience for these videos should

mirror the desktop experience as closely as possible.

● When the video is completed, the user is presented with two options: (* design mockups will be provided) ○ Watch this video again (restart)

○ Enter the rabbit hole (transition into the rabbit holing experience)

Non-rabbit hole spot behavior ● Landscape view

○ Semi-transparent slide-out shelf from the right side of the screen.

○ 50% of the width of the device and 100% of the height. (* design mockups will be provided) ● Portrait view

○ Main video takes up 50% of vertical screen real-estate.

○ Spot content is loaded and displayed in bottom-half of screen.

Rabbit Hole Path Definition (video order) ● A document format that defines the layout of the paths and videos will be determined and a spec. will be

provided in the near future.

API Contact Points ● Reception of content

○ GET categories/genres/channels

○ GET paths [for category/genres/channel]

○ GET spot templates [for specific video ID]

● Posting of events

○ Spot selected/opened (video ID, spot ID)

○ Spot closed (video ID, spot ID)

○ Video completed

Mock-ups required ● Welcome/loading screen

● Category/genre/channel selection list

● Video player

● Path drawer / view

● Saved videos drawer / view

●

● Video player with non-Rabbit Hole Spot template with phone in Portrait mode

● Video player with non-Rabbit Hole Spot template with phone in Landscape mode

● Mobile equivalents of the desktop spot templates

● Post-spot-enhanced video; when the user is prompted to watch that video again, or travel down the

rabbit hole

Sketches

Visualizing the map.

Path drawer concept.

Views.

Flow diagrams.