You are on page 1of 20

_experience the commitment

TM
Reading Life - Collections - Books
Tablet Wireframes
Version: 1.0
Published: August 02, 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 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
Table of Contents
Change Log
Reading Life - Full Home Experience
Books Collection
Books Collection - Interactions
Books Collection - Drag&Drop
Books Collection - Selected State Options
Books Collection - Sort
Books Collection - Filter
Books Collection - Options - Import Content
Books Collection - Options - Download All, How to add, Kobo Help
Books Collection - Options - Kobo Settings
Books Collection - Want to Read
Books Collection - Already Read
Books Collection - Selective Sync - Downloading book from Cloud
Books Collection - Selective Sync - Remove Book
Books Collection - Selective Sync - Remove Cloud & Sideloaded book
Pinned book in custom collection
Book Types & Selected State Options
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 3 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
Change Log
PAGE /SECTION
VERSION 1.0-1.1
First draft of Library Wires 1.0
Added selective sync, remove book, download from cloud
Also synced all secondary options with the reader team.
1.1
New magazine experience
Drag and drop functionality inside collections
Library item secondary options menu
Empty states of libraries added
1.2
Trimmed to just the books experience. Separated magazines into another set of wires. 1.3
Moved Want to Read shelf out to the root
New Filter options
Kobo Settings Included here
All remove book cases are documented
1.4
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 4 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Reading Life - Full Home Experience
Noitication Bar
Tap here
to create a
collection
1 Books & Want to Read Collection
This document goes into detail about out the
information architecture of the Books and Want to
Read collections which houses all of the Kobo
user's books.
Books, Magazines, Want to Read and Articles are
Smart Collections that all behave slightly different
than regular collections - they depend on external
services to populate the collections (ie. if user buys
book on Kobo, it appears there).
2 Magazine Collection
Houses all users Kobo subscriptions. Details
outlined in following document: "Reading Life -
Collections - Magazines.pdf"
3 Pocket Collection
Details outlined in following document: "Reading
Life - Collections - Pocket.pdf"
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
1 2 3
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
Related to your read
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
Related to your read
Inferno
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
W
a
n
t
t
o
R
e
a
d
1
2
Ite
m
s
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 5 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection
H
o
u
s
e
9
2

I
t
e
m
s
Noitication Bar
L
i
b
r
a
r
y
1
4
1 All Books listed here
All of users books will be listed here. This includes
previews as well.
4 Tools Area
Sync, sort, lter and options are housed here.
Sync - On tap: launches syncing with the Kobo
service. A notication will show in Android
Notication Centre informing that the sync is
happening.
Sort - On tap: Details outlined on page: Book
Collection - Sort
Show - On tap: Details outlined on page: Book
Collection - Filter
Options - On Tap: Details outlined on pages: Book
Collection - Options
2
2 Already Read
A smart sub-collection that houses all books that
are marked as nished in your library, or books that
the user has listed as nished
I
'
v
e

R
e
a
d

I
t
1
0

I
t
e
m
s
$8.99
3
3 Cover Image
Follows the same rules as custom collections. This
is the last touched or updated item in the collection.
Books
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 6 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Interactions
$8.99
Books
Noitication Bar
H
o
m
e
I
'
v
e

R
e
a
d

I
t
1
0

I
t
e
m
s
4
6 Tap on sub collection
Opens sub collection
2
3
1
1 Tap on Parent Tapestry
Tapping either bar take you to the parent
2 Tapping on book you own
Opens the reading experience
3 Longpress on book you own
Either activates drag & drop or selected state
options. Each experience is highlighted on
subsequent pages.
Drag&Drop experience detailed on page: Books
Collection - Drag&Drop
Selected state options experience detailed on
page: Books Collection - Selected State Options.
5 Swipe
Swiping will scroll the Libraryif applicable.
4 Longpress on empty space OR tapping on
Options icon
Both launches the same dialog with following
secondary actions: Import Content and Download
All, Kobo Settings
Import content experience detailed on page: Books
Collection - Import Content
6
5
7
7 Tap on Cover Image
Launches overview or book as necessary.
4
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 7 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Drag&Drop
$8.99
Bookss
Noitication Bar
H
o
m
e
1
4
Remove Item 5
1 Drag&Drop in Books
Users can drag and drop in any collection inside
the library (magazines included)
Dragging and dropping books in the library
essentially allows user to perform actions on a
duplicate of said le.
Only exception: If user wishes to place the book in
a different location within the list (reorder), the
"original" copy will move the new location. The
"original" copy should essentially replace the target
shadow in this interaction
4 Reorder
User is able to reorder items the same way
they reorder items in regular collections.
6 Add to Collection
Launches Add to Collections dialog.
Note: When a user adds a book to custom
collection, to the Kobo service it makes a
custom shelf with that book in it. Ie. If the user
has a Cooking collection, with pinned websites,
videos and 2 Kobo books, the Kobo service
should create a custom shelf with those two
Kobo books inside of it.
Thus if that user uses a Kobo Android app,
they should see a Cooking shelf.
2
2 On Drag options
When dragging regular pinned items in
collections, a remove option drops down - in
the library we will have Add to Shelf and Pin to
Tapestry instead as quick options.
3
I
'
v
e

R
e
a
d

I
t
1
0

I
t
e
m
s
3 Home
User can drag&hold a copy of the item and
move it to another collection.
5 Remove Book
Launches remove book experience. Detailed
on page: "Books Collection - Selective Sync -
Remove Book"
Add to Collection 6
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 8 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Selected State Options
H
o
u
s
e
9
2

I
t
e
m
s
Noitication Bar
B
o
o
k
s
1 Selected state
To get a book into selected state and hence
activate the secondary menu:
Long press on an item
Release and drop to the collection
2 Secondary Library Options
Depending on the type of item selected, it will have
a different set of secondary options.
Secondary options by item type are listed in this
deck on page: Book Types & Secondary Menus
4 Tap behaviour for secondary options
See Book Details: launch overview in slide out
Rate Book: Launch Rate & Review slide out
Remove Book: Experience shown on page:
"Library - Selective Sync - Remove Book"
Mark as Finished: Launch reader's Close Book
experience (in line)
Add to collection: Launch pin dialog
Buy this Book: Launch Quick Buy
Get the Preview: Move to Books view and show
the book downloading.
3 Multi Select
Once one book is selected, the user can select
multiple items, after which the secondary options
will change accordingly.
This will allow users to collections with multiple
books easily.
Remove Books Mark Books as Finished Add to Collection 4 Selected
5
5 Multi-Select menu
This shoes how the menu options change as you
select multiple items.
I
'
v
e

R
e
a
d

I
t
1
0

I
t
e
m
s
$8.99
Books
2
1
See Book Details Rate Book Remove Book Mark as Finished Add to Collection 1 Selected
4 3
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 9 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Sort
H
o
u
s
e
9
2

I
t
e
m
s
Noitication Bar
B
o
o
k
s
A
l
r
e
a
d
y

R
e
a
d
1
0

I
t
e
m
s
1 User taps on Sort
Following dialog shows. Default to Last Read
Sort By
Title
Last Read
Author
... Custom Sort
If the user manually reorders their collection, all
sort options are deselected.
If the user would like, they can then go into sort
and resort the list into one of the three options, at
which time their custom sort order will be lost.
There should be a smooth animation when books
are moving to their new sort order.
1
$8.99
Books
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 10 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Filter
H
o
u
s
e
9
2

I
t
e
m
s
Noitication Bar
B
o
o
k
s
I
'
v
e

R
e
a
d

I
t
1
0

I
t
e
m
s
1 User taps on Filter
Following dialog shows. Default to All
3 Show Options
Only one option can be selected at a time.
All: Shows all books available to the user
On Device: Shows all downloaded or side loaded
books
Currently Reading: Shows all downloaded books
with an active bookmark
1
3
3 Filter has an On and Off state.
If all books are showing, the lter is in an OFF
state. If any other of the options are showing, the
lter is in an ON state to visually indicate to the
user that there is content being ltered out.
$8.99
Books
Show
All
On Device
Currently Reading
3
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 11 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Options - Import Content
Choose an Action
Import Content
Download All
Kobo Settings
How to add to this Collection
Kobo Help
1
1 Longpress on empty space OR tapping on
Options icon
Activates a modal dialog in the middle of the
screen withs secondary options.
Searching Memory Card
Stop Search
Import Content
Kobo will now search your memory
card for items that you can import
into your library. You can select
some or all of these items in the
next step
Cancel Start
Select Items to Import
Import Selected
Found 1 new item.
Book Title Book Title Book Title
Author Name Author Name
Remove Files
Kobo is about to import your items
into the Library. Do you want to
remove the original les from the
memory card?
Yes No
Importing Content
2
3
4 4 3
3
2 Secondary Options Menu
This is a modal dialogue that pops up in the middle
of the screen, with various secondary options.
The entire Import Content experience is borrowed
from the reading app. We are not recreating this
experience on our end.
3 Borrowed dialogs from Reading App
These dialogs are borrowed from the reading app.
4 Import Content Experience
This entire experience in the app is a full screen
experience. We wish to bring this into the slide out
that houses book overviews, the rate/review
experience and more.
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 12 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Options - Download All, How to add, Kobo Help
Choose an Action
Import Content
Download All
Kobo Settings
How to add to this Collection
Kobo Help
1
1 Longpress on empty space OR tapping on
Options icon
Activates a modal dialog in the middle of the
screen withs secondary options.
2 Download All
Tapping here puts all books in the cloud in a
download state.
2
3 How to add to this Collection
Opens books empty state yout, outlined in wires:
Custom Collections - Empty States - Help Flouts
3
4
4 Kobo Help
Launches Intelliresponse in the browser.
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 13 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Options - Kobo Settings
Choose an Action
Import Content
Download All
Kobo Settings
How to add to this Collection
Kobo Help
1
1 Longpress on empty space OR tapping on
Options icon
Activates a modal dialog in the middle of the
screen withs secondary options.
2
2 Kobo Settings
Tapping on Kobo settings will bring the app settings
inside of the Reader yout (not a pop up, like in the
app).
There are certain settings that we wish to suppress
and not show on the tablet. The wire above shows
which settings we want to keep on our side.
Kobo Settings
Manage Device Library
Notications
Quick Buy Settings
Manage Device Library Notications Quick Buy
Reading Notications
Newly Earned Awards
Other Reading Life Events
Show Notications While Reading
Notication Bar
Book Recommendations
Hide the Status Bar
Kobo Notications
Get the latest from Kobo, including exclusive
eReader promotions, right on your home screen.
Enable Quick Buy
Remember My Password
Book title goes here spans one line...
10.38 MB
Book title goes here spans one line...
10.38 MB
Book title goes here spans one line...
10.38 MB
Book title goes here spans one line...
10.38 MB
Book title goes here spans one line...
10.38 MB
Total: 311.73 MB Cancel Remove
3
3 Settings Flyouts
As the user drills into each section, a subsequent
yout gets activated, which houses a section of
settings.
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 14 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Want to Read
$8.99
Noitication Bar
B
o
o
k
s
1
2 Tapping on non purchased book
Opens spotlight view with that book
1 Want to Read Books
All the books that a user selects as "Want to Read"
ends up in this shelf. Once a user purchases one
of these books, it is removed from this shelf.
3 Long Press on non purchased book
Opens Non-purchased book secondary options -
detailed on page titled "Library - Book Types"
4 User taps on Sort
Following dialog shows. Default to Date Added.
Date Added: most recent items at the top of list.
2
3
$8.99 $8.99
$8.99
$8.99 $8.99 $8.99
Want to Read
Sort By
Title
Last Read
Author
4 5
5 User taps on options
Slightly different menu gets presented from the
Want to Read shelf. Import Content isn't present
because you cannot import books into
Choose an Action
Download All
Kobo Settings
How to add to this Collection
Kobo Help
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 15 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Already Read
H
o
u
s
e
9
2

I
t
e
m
s
Noitication Bar
B
o
o
k
s
1
3
1 Already Read It Books
All the books that a user selects as "Read It" ends
up in this shelf. In addition, any book that a user
marks as nished will also show up here.
It would be interesting if we were able to pull books
that the user has previously rated before.
3 No "Sub-shelves"
Shelves only exist on the Library level.
2 User taps on Sort
Following dialog shows. Default to Date Added.
Date Added: most recent items at the top of list.
$8.99 $8.99
$8.99
$8.99 $8.99
2
Already Read
Sort By
Title
Last Read
Author
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 16 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Selective Sync - Downloading book from Cloud
3 Book in library
If the download completes, it is now in the library.
3
1 User taps on cloud state book
It changes to the downloading state. This includes
a download progress bar.
1
2
2 User taps on downloading state book
This pauses the download - puts it in a paused
state.
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 17 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Selective Sync - Remove Book
See Book Details
Rate Book
Remove Book
Mark as Finished
Pin to Tapestry
Add to Shelf
See Book Details
Rate Book
Remove Book
Mark as Finished
Pin to Tapestry
Add to Shelf
3
1
1 Remove Book Experience
If a user taps Remove Book, we prompt the user
with two options. Removing from device removes
the book from the device, but keeps it in the user's
library. We should delete any pinned instances of
the book from any tapestry as well.
Delete book from Library deletes the book entirely
from the users library (and the device of course)
2 Book state changes to cloud state
The book is now in the cloud state. Tapping on the
cloud state will start the download of the book into
the library.
2
3 Book removed
Book is removed from the Library. Any instance of
it is also deleted.
Remove Item...
From LIbrary Cancel From Device
Remove from Device lets you re-download items
from the Kobo Cloud later.
Remove from Kobo Library clears your items from
the Kobo Cloud and from all of your devices.
Remove Item...
From LIbrary Cancel From Device
Remove from Device lets you re-download items
from the Kobo Cloud later.
Remove from Kobo Library clears your items from
the Kobo Cloud and from all of your devices.
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 18 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Books Collection - Selective Sync - Remove Cloud & Sideloaded book
See Book Details
Rate Book
Remove Book
Mark as Finished
Add to Collection
See Book Details
Rate Book
Remove Book
Mark as Finished
Add to collection
2
1
1 Remove Book - Book in Cloud
A book from the cloud can only be removed from
the users Library.
2 Book removed
Book is removed from the collection. Any instance
of it is also deleted.
Remove from Library?
This clears your item from the Kobo Cloud and from all
your devices.
Remove Cancel
Remove from Device?
Removing this item also erases your annotations.
Remove Cancel
2
Sideloaded Book
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 19 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Pinned book in custom collection
1 Custom Collection
This document shows what happens to a book
after it is pinned to a custom collection
2 Pinned Book
The book itself behaves as if its inside of the Books
Collection. The progress bar is maintained and
updated. Press and hold will activate the same
secondary drag menu, and secondary menus.
Resizing is enabled as well.
Noitication Bar
Tap here to
create a
collection
H
o
m
e
1
2
... Removing the Book
Remove options from here will NOT activate the
remove experience from the Kobo service, rather it
will simply remove the pinned copy in this
collection.
IE. For a user to remove a book from the device or
the library, they must do it from the Books
collection.
... Collections - Kobo Shelf relationship
If a Kobo book is housed in a collection or sub-
collection, it creates a shelf in the Kobo Service
with the same collection name, and vice versa.
A consequence of this rule is: Naming for ALL kobo
collections must unique on a Global level, not a
local level, as it is now. IE there may only be one
collection named "Cooking" on the entire device
(collection or sub-collection levels).
Renovations
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 20 of 22
Reading Life - Collections - Books
Version: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Book Types & Selected State Options
Purchased book - In
progress
Purchased book - Not
Opened
Finished Book
Finished Book -
secondary options
See Book Details
Rate & Review
Remove Item
Add to collection
Book Previews -
secondary options
Buy this Book
See Book Details
Rate & Review
Remove Item
Add to collection
Book in the Cloud
Non-purchased book
$8.99
Non-purchased book -
secondary options
Add to collection
Buy this Book
Get the Preview
See Book Details
Remove Book
.. Tap behaviour for secondary options
See Book Details: launch overview in slide out
Rate Book: Launch Rate & Review slide out
Remove Book: Experience shown on page: "Library -
Selective Sync - Remove Book"
Mark as Finished: Launch reader's Close Book experience
(in line)
Add to collection: Launch pin dialog
Buy this Book: Launch Quick Buy
Get the Preview: Move to Books view and show the book
downloading.
Preview of Kobo book
in Library
$8.99
Purchased book -
secondary options
See Book Details
Rate & Review
Remove Item
Mark as Closed
Add to collection
Purchased book -
secondary options
See Book Details
Rate & Review
Remove Item
Mark as Closed
Add to collection
Book in the Cloud -
secondary options
See Book Details
Rate & Review
Remove Item
Add to collection

You might also like