Reading Life - Home Dash:Standroid

_experience the commitmentTM

Reading Life - Home Dash/StandroidTablet Wireframes

Version: 1.0Published: July 17, 2013 Created By: Shanak Rahman ([email protected])

Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.

Confidential and Secure Handling Required

Page 2 of 32Reading Life - Home Dash/StandroidVersion: 1.0 | Published: July 17, 2013 | Created By: Shanak Rahman ([email protected])

15

14

13

12

11

10

9

8

7

6

5

4

3

Table of ContentsChange Log

Titan - Full Home Experience

Titan - Standroid

collection Land

Kobo Home Dash

Kobo Flow Interactions

Apollo - Full Home Experience

Apollo - Standroid

Home Dash - Fixed Widgets

Kobo Flow - Discover

Kobo Flow - Activity

Kobo Flow - Notifications

Kobo Flow - ODM




Change LogPAGE /SECTION

VERSION 1.0-1.1

First draft of the home experience for collections 2.0. Includes the home experience, and the various cards that will go into the Kobo activity feed. 1.0

Changes:+ Added Apollo home screen wires+ Current read and store CTA are updated+Added ODM states (with picture and without)

1.1

Changes:+ Added details on ODM+ Added interactions for activity tiles (long press to dismiss)

1.2




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Titan - Full Home Experience

Noitification Bar

Message from Kobo

Get 50% off your next great read

EXPIRES APRIL 13, 2013

New Issue!Apr 2013

Related to your readInferno

You finishedThe Hobbit

Rate it

15% read

DiscoverJane Austen

Related to your readPride and Prejudice

Go beyond the book for:Pride and Prejudice

Lebron James scores 27, records double double as Miami Heat roll past Milwakee Bucks

espn.com

45% read

5 5 5

About 2 hours to go

Book title goes here and spans two lines

spot72 just liked your Pulse post

About 9 hours to go

5 5 5

2 hrs to go

Search here for your next great read!

Kobo Store


1 2

4

87

9

9

7 Tapping backDoes nothing. The user is home, there isn't anything to go back to.

1 StandroidArea that is dedicated to pinning apps and widgets only. Requirements for this section are listed in this document.

2 Kobo Home DashDedicated area for Kobo widgets. Includes certain fixed widgets and an activity feed. Requirements for this section are listed in this document.

3 Change ProfileAll profile management (adding child accounts, changing google profiles) tasks are available to the user after tapping on this image. Requirements can be found in the following document: Reading Life - Change Profile.pdf

8 Tapping HomeUser launches an app from inside a collection. Tapping home: brings user back to the collection.

User inside a collection (regardless of how many levels deep). Tapping home: brings them to collection Land.

User inside Collection Land. Tapping home: brings user to Kobo Home Dash.

User on Kobo Home Dash or Standroid. Tapping home: toggles between Standroid and Kobo Home Dash.

9 Swiping in HomeStandroid, Kobo Home Dash, and Collection Land act as pages that the user can swipe and snap to.

10 Collection Land scrollingCollection Land is free scrolling if required (many collection are present). Scrolling stops on the left hand side

Tap here to create a collection

Books

123 items

Magazine

12 Items

Pocket12 Item

s

Social12 Item

s

Entertainm

ent12 Item

s

Sample

12 Items

10

5

6

5 Magazines CollectionThis is where the user's Kobo subscriptions will reside. Requirements for this is found in the following document: Reading Life - Collections - Magazines.pdf

6 Custom CollectionUsers are able to create custom collections where they can collect various media items in a beautiful visual interface. Examples of custom collections: Favourite Recipes, Guitar Lessons, etc.

Requirements for this is found in the following document: Reading Life - Collections - Custom Collections.pdf

3

4 Books CollectionThis is where the user's Kobo books will reside. Requirements for this is found in the following document: Reading Life - Collections - Books.pdf




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Titan - Standroid

Noitification Bar1

1 Standroid GridWe wish to use the standard android grid for this area. The proposed grid size is 7x6. However as this gets built, we will tweak the grid as necessary.

The screen orientation should also work as it does in the standard android grid.

Only apps or widgets can be placed in this area (no other pinned items)

App folders still do not exist

Users should be able to move apps and widgets via Android rules

2

2 StandroidThe background for this area is customizable by the user.

4

4 App dock + Cover Photo is persistentThis dock is available on both Standroid and Kobo Home Dash

3

3 Long press on empty spaceActivate the standard change wallpaper experience.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Collection Land

1 Collection LandOnly collections are allowed on this level. User can create collections.

They can also drag apps or widgets outside of collections and move them onto the Standroid area. The user has to drag the item to the left edge and we scroll them past Kobo Home Dash automatically - they can only drop it in the Standroid area.

If the user tries to drag anything other than an app or widget, we will not allow them to scroll onto the other areas.

Noitification Bar

Tap here to create a collection

Books

12 items

Magazine

8 Items

Pocket8 Item

s

Social9 Item

s

Entertainm

ent8 Item

s

Sample

8 Items

1




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Kobo Home Dash

Noitification Bar

1 5

Message from Kobo



New Issue!Apr 2013


Rate it



espn.com

45% read

5 5 5

About 2 hours to go



15% read

DiscoverJane Austen


cnn.com

Leahy: Boston bombings exploited in immigration debate.

About 9 hours to go

2

41 Profile Picture

This displays the users profile picture for the device.

3

3 Tap on Profile PictureOpens the change user experience. TBD

6 Fixed tile: Current ReadThe Current Read is fixed to this position - it never moves (but its included in the view, so it will scroll)

4 Activity FeedLandscape: 4 ColumnsPortrait: 3 Columns

Activity trickles down to the right and then down. All the various cards are detailed in this document. Each card has a different trigger which causes it to show up in the activity feed. These rules are also defined in this document.

There are fixed tiles and free flowing tiles. Fixed tiles always stay in their position in the feed, whereas free flowing tiles get pushed further and further down as new tiles come in.

7 Swipe Activity FeedThe activity feed (3 columns) scroll up and down. Exact size and limit of the activity feed is TBD.

7

2 App barThe app bar under the profile picture holds 5 apps, without titles. This acts as the home screen app bar dock.


5 5 5

2 hrs to go


Kobo Store

6

5 Fixed tile: StoreThe store tile is fixed to this position - it never moves (but its included in the view, so it will scroll)




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Kobo Flow Interactions

Noitification Bar

Message from Kobo



New Issue!Apr 2013


Rate it



espn.com

45% read

5 5 5

About 2 hours to go



15% read

DiscoverJane Austen


cnn.com


About 9 hours to go

4

1 Long press on Fixed itemsLaunches contextual menu

2 Contextual Menu - Fixed ItemOnly has the option to Open (which is same action as tapping on the item.


5 5 5

2 hrs to go


Kobo Store

3

Open

Dismiss

1

Open

2

3 Long press on Kobo Flow itemsLaunches contextual menu

4 Contextual Menu - Kobo Flow ItemOptions are to Open or Dismiss. Open is the same action as tapping on the item, and Dismiss will remove the tile from Kobo Flow.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Apollo - Full Home Experience

1 StandroidBehaves the same as Titan…only a smaller grid

2 Kobo Home Dash - ApolloPortrait: Tiles flow in two columnsLandscape: Tiles flow in three columns

3 App Dock - ApolloOnly four apps in the dock.

Noitification Bar

45% read

5 5 5

About 2 hours to go

5 5 5

2 hrs to go



Rate it



Kobo Store

Library

24 items

Renovations

12 items

Recipes

8 items

21

3




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Apollo - Standroid

1 Standroid GridRules and features same as Titan.

Proposed standroid grid is: 6x6

Noitification Bar1

2

2 App dockLocated at the bottom for portrait orientation.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Home Dash - Fixed Widgets

Recent Read Store Search

1 Current read widget is always fixed in the activity feed.

Annotations section includes dogears, highlights and notes.

Tap: Opens the reading experience for that book.Tap annotation section: Opens annotations section in that book

1

4 The experience for the store search is TBD.

4

5 5 5

2 hrs to go


Kobo Store

5 bookmarks

2 hrs to go 2 hrs to go

2 3

2 One type of annotation found. If two types of annotations are found, display both (in short form)

3 No annotations found




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Kobo Flow - Discover

Related/Similar Books

Related to your readA Fine Balance



Stack

DiscoverJane Austen


1 Trigger: If user opens a book for the first time and if they reach 70% complete of a book.

Choice: Randomly select one of these options.

On tap: Opens the item page of the book that is the source - it will have a related books widget on that page.

1

Recommended Books

Recommended for you1 book just added



2 Trigger: As new recommendations are downloaded to the device

On tap: Open the library or store to the recommendations section.

2

3 Trigger: When the user opens a book that has a related stack, show this card.

On tap: Open the stack

3

Beyond the Book

4 Trigger: User opens a book for the first time that has BtB content

On tap: Open the reading app to the beyond the book section for that book.

4





PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Kobo Flow - Activity

Rating Widget

70% readThe Hobbit

Rate it

Rating Widget


Rate it

1 Trigger: User finishes 70% of a book and/or marks the book as finished.

On Tap: Launches end of book experience in the context of the Home Dash - which allows users to rate and review the book.

If user completes rating, we dismiss the tile.

1 53

3 Trigger: User opens a book other than the current read, which bumps the current read out of the fixed position, and it turns into a smaller tile like this.

On tap: Opens into the reading experience.

Preview15% read

45% read

5 5 5

About 2 hours to go

5

4 For previews, the cover is likely too small to show the preview badge - thus the label will be in the card itself.

Recent Reads Recently added article to Pocket


espn.com

5 Trigger: User adds an article to Pocket

Contents: Include the title up to 4 lines maximum, the domain URL and the pocket icon.

On tap: Opens into the reading experience for that article

4

4 Displays # of bookmarks, highlights and notes inside of the book. Tapping here will take the user to their list of annotations.

15% read

About 2 hours to go About 2

hours to go




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Kobo Flow - Notifications

New Magazine Issue

New Issue!Apr 2013

Pulse Notifications2

2 Trigger: Another user comments on your post, another user likes your post, or another user comments on a post that you also commented on.

On tap: Opens up the post in Pulse.

1

1 Trigger: New issue arrives for a subscription

On tap: Open into the reading experience

This is the spot72's comment and it can span up to four lines in this card


spot72 also commented on a pos.

This is the user's reply to your comment.

Book Title Goes Here

spot72 replied to your comment in Pulse



3

Articles from user's feed

3 Trigger: An article gets downloaded from one of the user's news sources. However, not all the articles from the news sources will be downloaded - there will be some kind of selection process to regulate the number of articles that get shown to avoid over flooding the feed with articles.

On tap: Opens into the reading experience for that article

cnn.com





PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Kobo Flow - ODM

ODM - txt only w/ expiration

4 Message gets 3 lines total with an expiration date at the bottom.

Tiles with expirations get removed once they are expired. Messages with expiry cannot be replaced by another message until that expiry has been reached.

Tap: Displays ODM in spotlight view

Get 50% off your next great read msg spans 3 lines


Marketing message goes here and spans 2 lines

ODM - with book covers

5 When ODMs have images, they will always be three book covers.

We have a short title (Recommended) and two lines of space for a message.

Tap: Displays ODM in spotlight view.

ODM - txt only w/o expiration

4 Message gets 3 lines total with a generic title at the bottom.

Tap: Displays ODM in spotlight view

Get 50% off your next great read msg spans 3 lines

Notification

Rrecommended

... General Rules about ODM

1. Only one message will display at a time. 2. New messages will appear at the top of the Flow, and trickle

down as expected. If there is an older message in the flow at that time, and it has no expiration, then remove it. If there is an older message in the flow with an expiration, wait until that expiration is reached before displaying the new tile.

3. Two types of messages will be sent down: one with images, and one without.

4. All ODM will activate a spotlight view that will display a snippet of HTML which contains the actual message itself.

Message Title spans across one line

Message Area for ODM

6 Spotlight ViewWe will leverage our spotlight view to display the snippet of HTML that comes down with the ODM.

http://www.hostelworld.com/hosteldetails.php/The-Cranky-Croc-Hostel/Bogota/26229

http://www.hostelworld.com/hosteldetails.php/The-Cranky-Croc-Hostel/Bogota/26229

Date post:	01-May-2017
Category:	Documents
Upload:	shanak-rahman
View:	220 times
Download:	3 times

Reading Life - Home Dash:Standroid

Documents