Reading Life - Home Dash:Standroid

_experience the commitment
TM
Reading Life - Home Dash/Standroid
Tablet Wireframes
Version: 1.0
Published: July 17, 2013
Created By: Shanak Rahman (srahman@kobo.com)
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 32
Version: 1.0 | Published: July 17, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
15
14
13
12
11
10
9
8
7
6
5
4
3
Table of Contents
Change 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 - Notications
Kobo Flow - ODM
Page 3 of 32
Change Log
PAGE /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 4 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Titan - Full Home Experience
Noitication Bar
Message from Kobo
Get 50%off your
next great read
EXPIRES APRIL 13, 2013
NewIssue!
Apr 2013
Related to your read
Inferno
You finished
The Hobbit
Rate it
15% read
Discover
Jane Austen
Pride 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
Inferno
1 2
4
8
7
9
9
7 Tapping back
Does nothing. The user is home, there isn't
anything to go back to.
1 Standroid
Area that is dedicated to pinning apps and widgets
only. Requirements for this section are listed in this
document.
2 Kobo Home Dash
Dedicated area for Kobo widgets. Includes certain
xed widgets and an activity feed. Requirements
for this section are listed in this document.
3 Change Prole
All prole management (adding child accounts,
changing google proles) tasks are available to the
user after tapping on this image. Requirements can
be found in the following document:
Reading Life - Change Prole.pdf
8 Tapping Home
User 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 Home
Standroid, Kobo Home Dash, and Collection Land
act as pages that the user can swipe and snap to.
10 Collection Land scrolling
Collection Land is free scrolling if required (many
collection are present). Scrolling stops on the left
hand side
Tap here
to create a
collection
B
o
o
k
s
1
2
3
ite
m
s
M
a
g
a
z
i
n
e
1
2
Ite
m
s
P
o
c
k
e
t
1
2
Ite
m
s
S
o
c
i
a
l
1
2
Ite
m
s
E
n
t
e
r
t
a
i
n
m
e
n
t
1
2
Ite
m
s
S
a
m
p
l
e
1
2
Ite
m
s
10
5
6
5 Magazines Collection
This 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 Collection
Users 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 Collection
This is where the user's Kobo books will reside.
Requirements for this is found in the following
document:
Reading Life - Collections - Books.pdf
Page 5 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Titan - Standroid
Noitication Bar
1
1 Standroid Grid
We 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 Standroid
The background for this area is customizable by
the user.
4
4 App dock + Cover Photo is persistent
This dock is available on both Standroid and Kobo
Home Dash
3
3 Long press on empty space
Activate the standard change wallpaper
experience.
Page 6 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Collection Land
1 Collection Land
Only 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.
Noitication Bar
Tap here
to create a
collection
B
o
o
k
s
1
2

i
t
e
m
s
M
a
g
a
z
i
n
e
8

I
t
e
m
s
P
o
c
k
e
t
8

I
t
e
m
s
S
o
c
i
a
l
9

I
t
e
m
s
E
n
t
e
r
t
a
i
n
m
e
n
t
8

I
t
e
m
s
S
a
m
p
l
e
8

I
t
e
m
s
1
Page 7 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Kobo Home Dash
Noitication Bar
1
5
Message from Kobo
Get 50% off your
next great read
New Issue!
Apr 2013
You finished
The Hobbit
Rate it
Go beyond the
book for:
Pride and
Prejudice
Miami Heat roll past Milwakee
Bucks
espn.com
45% read
5 5 5
About 2
hours to go
spans two lines
spot72 just liked your
Pulse post
15% read
Discover
Jane Austen
Pride and Prejudice
cnn.com
Leahy: Boston bombings
exploited in immigration
debate.
About 9
hours to go
2
4
1 Prole Picture
This displays the users prole picture for the
device.
3
3 Tap on Prole Picture
Opens the change user experience. TBD
6 Fixed tile: Current Read
The Current Read is xed to this position - it never
moves (but its included in the view, so it will scroll)
4 Activity Feed
Landscape: 4 Columns
Portrait: 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
dened in this document.
There are xed tiles and free owing tiles. Fixed
tiles always stay in their position in the feed,
whereas free owing tiles get pushed further and
further down as new tiles come in.
7 Swipe Activity Feed
The activity feed (3 columns) scroll up and down.
Exact size and limit of the activity feed is TBD.
7
2 App bar
The app bar under the prole picture holds 5 apps,
without titles. This acts as the home screen app
bar dock.
Inferno
5 5 5
2 hrs to go
Search here for your next
great read!
Kobo Store
6
5 Fixed tile: Store
The store tile is xed to this position - it never
moves (but its included in the view, so it will scroll)
Page 8 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Kobo Flow Interactions
Noitication Bar
Message from Kobo
Get 50% off your
next great read
New Issue!
Apr 2013
You finished
The Hobbit
Rate it
Go beyond the
book for:
Pride and
Prejudice
Bucks
espn.com
45% read
5 5 5
About 2
hours to go
spans two lines
Pulse post
15% read
Discover
Jane Austen
Pride and Prejudice
cnn.com
debate.
About 9
hours to go
4
1 Long press on Fixed items
Launches contextual menu
2 Contextual Menu - Fixed Item
Only has the option to Open (which is same action
as tapping on the item.
Inferno
5 5 5
2 hrs to go
great read!
Kobo Store
3
Open
Dismiss
1
Open
2
3 Long press on Kobo Flow items
Launches contextual menu
4 Contextual Menu - Kobo Flow Item
Options 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 9 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Apollo - Full Home Experience
1 Standroid
Behaves the same as Titanonly a smaller grid
2 Kobo Home Dash - Apollo
Portrait: Tiles ow in two columns
Landscape: Tiles ow in three columns
3 App Dock - Apollo
Only four apps in the dock.
Noitication Bar
45% read
5 5 5
About 2 hours
to go
5 5 5
2 hrs to go
Inferno
You finished
The Hobbit
Rate it
Go beyond the
book for:
Pride and Prejudice
Search here for your next great
read!
Kobo Store
L
i
b
r
a
r
y
2
4
ite
m
s
R
e
n
o
v
a
t
i
o
n
s
1
2
ite
m
s
R
e
c
i
p
e
s
8
ite
m
s
2
1
3
Page 10 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Apollo - Standroid
1 Standroid Grid
Rules and features same as Titan.
Proposed standroid grid is: 6x6
Noitication Bar
1
2
2 App dock
Located at the bottom for portrait orientation.
Page 11 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Home Dash - Fixed Widgets
Recent Read Store Search
1 Current read widget is always xed
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
great read!
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 15 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Kobo Flow - Discover
Related/Similar Books
A Fine Balance
A Fine Balance
A Fine Balance
Stack
Discover
Jane Austen
Pride and Prejudice
1 Trigger: If user opens a book for the rst 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 you
1 book just added
Recommended for you
2 book just added
Recommended for you
5 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 rst time that
has BtB content
On tap: Open the reading app to the beyond the
book section for that book.
4
Go beyond the
book for:
Pride and
Prejudice
Page 16 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Kobo Flow - Activity
Rating Widget
70% read
The Hobbit
Rate it
Rating Widget
You finished
The Hobbit
Rate it
1 Trigger: User nishes 70% of a book and/or marks
the book as nished.
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
5
3
3 Trigger: User opens a book other than the current
read, which bumps the current read out of the xed
position, and it turns into a smaller tile like this.
On tap: Opens into the reading experience.
Preview
15% 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
Bucks
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 17 of 32
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Kobo Flow - Notifications
New Magazine Issue
New Issue!
Apr 2013
Pulse Notications
2
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
spans two lines
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
spans two lines
Pulse post
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
ooding the feed with articles.
On tap: Opens into the reading experience for that
article
cnn.com
debate.
Page 21 of 32
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 ow at
that time, and it has no expiration, then remove it. If there is an
older message in the ow 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 View
We 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

Reading Life - Home Dash:Standroid

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Reading Life - Home Dash:Standroid

Uploaded by

Copyright:

Available Formats

_experience the commitment

You might also like