FILE NAME

Shanak Rahman
KoboMetroApp_Beta.grafe
CREATOR
Wed Jan 18 2012 MODIFICATION DATE
Kobo Metro App - Homepage, LIbrary, Browse & Store
DESCRIPTION
VERSION HISTORY
Version Date Notes
1 November 16, 2011
Homepage - Authenticated & non-authenticated views
Homepage Semantic zoom
My Books sort, views, and pin to start screen
My Books empty state ideation
Store experience
Table of Contents
1.0 Kobo Homepage
1.1 Homepage Details
1.2 Homepage Semantic Zoom
2.0 My Books
2.1 My Books Empty State
3.0 Browse Category Experiene
3.1 Reacommended Lists Experience
4.0 Purchase Path - User Flows
4.1 Item Page - Description
4.2 Purchase Path - Buy Experience - Positive Flow
4.3 Purchase Path - Buy Experience - Negative Flow
5.0 Error States - No Internet
2 January 12
Stripped out features that are not included in Beta
Added browse categories and recommended list experiences
Added No Internet Connection error states
Added empty book states for users library
3 January 18, 2011
Copy approved by Kobo copywriters
All copy changes are called out in this document (look for red boxes)
Kobo Metro App
1.0 Kobo Homepage
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
17 / 41
!"## %&'(() *+(, %)-..(/ *+(,
01 23345 01 23345
See All See All
0('&6-)/+5(/ #+57 8
1
2
3
0('&6-)/+5(/
See All
Homepage Scope
1. The homepage is the center of the application. It's a combination of both the Kobo store and the user's library
2. If the user has books in their library, then the My Book's list will show on the homepage - it acts as a snippet of the user's library and offers the user the ability to launch one of
their recently downloaded or bookmarked books quickly and easily
3. The rest of the homepage is comprised of a series of merchandised lists - all of which can be found in the tab request - the exact lists and ordering will be the same as the
HTML5 app
4. The rst 5 books show from my books, and the rst 7 books show from each merchandised list. The last item in each list is a call to action to see that list in a full list view.
UI Notes
The following numbers refer to the blue numbers on this page
1. Persistent Header. Portion below the header will scroll horizontally - Kobo logo, title, and search bar
2. Main canvas of the application - User can scroll horizontally towards the right - header stays persistent
3. Snapped view - Vertical scrolling is enabled in the snap view - All the functionality available in the full screen view is still available in the snapped view.
4. Each list should essentially be a snap point - Ie has a gravitational point to the beginning of the list - Please see the article in the Reference Material on this page
Reference material
Dev -Enabling Panning with CSS Touch: http://msdn.microsoft.com/en-us/library/windows/apps/hh465367(v=VS.85).aspx
Guidelines for Panning: http://msdn.microsoft.com/en-us/library/windows/apps/hh465310(v=VS.85).aspx
Rails and Snap points: http://msdn.microsoft.com/en-us/library/windows/apps/hh465310#use_snap_points
4
Kobo Metro App
1.1 Homepage Details
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
18 / 41
01 23345 93. :; 23345 <(, =(#(-5(5
0('&6-)/+5(/ #+57 >
See All See All
See All
Clicking on a book in your My Books
section will take you straight to the
reading experience
See All
Clicking See All or the title of the list
will drive you into that particular list
0('&6-)/+5(/ #+57 ?
See All
0('&6-)/+5(/ #+57 :
See All
Notes
1. My Books is a snapshot of the users library.
Details of the mechanics of My Books on the
homescreen are described on a later page. A
maximum of 5 books will be surfaced on the
homepage.
2. The last 5 books opened OR added should
surface in the homepage - It should represent
the latest books the user has interacted with.
3. The homepage is a horizontal scrolling page -
Takes advantage of the Metro Style application
- similar to the metro start screen
4. Merchandised lists show the rst 7 books from
that particular list. The last object, "See All" is a
shortcut to that particular list. The user can hit
either See All, or the title of the list itself to dive
into a full view of that list
Kobo Metro App
1.2 Homepage Semantic Zoom
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
19 / 41
My
Books
Top 50
Books
New
Releases
Merch 1 Merch 2 Merch 3
01 23345 93. :; 23345 0('&6 @+57 8 0('&6 #+57 <(, =(
Introduction
1. Semantic zoom is a UI feature in Metro that allows users to "zoom out" of a long page and easily navigate to
a different section
2. Thresholds must be dened for the pinching gesture which determines when a view changes from one to
another - details found in the reference material on this page
3. The semantic threshold between one zoom level and another should be different for zooming in and zooming
out - If not it will likely cause unpredictable or undesirable user experiences (rapid ashing between views)
4. The threshold levels for switching from one view to another should not be so close to one another - we want
to avoid accidental switching between views - and they should not be so far apart such that excessive
pinching and expanding gestures are required.
Reference Material:
Guidelines for Semantic Zoom: http://msdn.microsoft.com/en-us/library/windows/apps/hh465319(v=VS.85).aspx
Dev: Enabling Semantic Zoom: http://msdn.microsoft.com/en-us/library/windows/apps/hh465375(v=VS.85).aspx
1. User simply has to do a pinching motion on the homescreen to activate semantic
zoom
2. There is a threshold that is set programatically that denes when the views change
(how much pinching is required) from regular to zoom - Reference material goes
into details
1. User can either select a list from this zoom view, and the UI will go back to the
regular view, centered on the selected list.
2. If the user un-pinches from this view, the user returns to the same location they
started from
1. User lands on Merch List 1 - the view is centered to the selected list
See All See All
See All See All
Kobo Metro App
2.0 My Books
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
20 / 41
01 23345
See All
01 23345
Rules for showing My Books on homescreen
Two factors for determining what gets appended to the
beginning of this list:
1. Latest opened book
2. Latest downloaded book
Ordering
Also, only the rst 5 books of the users library should
show in this view. If there aren't 5 books in the user's
library, display as many books as possible, with the
See All box at the end
Ordering of the list goes from top to bottom and then
across each column to the right.
IE. If a user purchases a book, it gets appended to the
beginning of the list. Or, if a user opens a book and
comes back to the home page, it gets appended to the
beginning of the list.
Rules for My Books
Clicking on "See More" or "My Books" from the kobo
homescreen will drill the user down into a more robust
library management view of their books.
1. For the beta release, My Books simply displays all your
book in a simple list.
2. This page will scroll right if it needs to
3. The ordering is top to bottom and then across the
columns to the right
4. Post beta features include: sorting, different view
options
Kobo Metro App
2.1 My Books Empty State
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
21 / 41
01 23345
AB.71 23345 C 01 23345
User selects My Books from the app bar
when he/she does not have any books in
their library
Notes:
1. If the user has no books in their library, display a message encouraging them to
browse the homepage, categories, and recommended lists
2. The user can still click on the My Books title to dive into the list - they will see the
empty state of the library, as shown below
0('&6 #+57 8
Homepage - No Books
Browse over 2 million books (including free books!) to nd
your next great read.
Your Library is Empty
Your Library is Empty
Recommended Reads Browse Categories
01 23345
Check out these great books to nd
your next read.
Notes:
1. If the user has no books in their library, display a message encouraging them to
browse the homepage, categories, and recommended lists
Notes:
1. Display the see more option for My Books if and only if the user has 6 or more
books in their library
2. Otherwise, just display the books present.
0('&6 #+57 8
Homepage - Fewer than 5 books
01 23345
See All
Copy Edits
Jan 18, 2012
Copy Edits
Jan 18, 2012
Kobo Metro App
3.0 Browse Category Experiene
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
22 / 41
2'3,5( D-7(E3'+(5
Category Name Category Name
01 23345 0('&6 #+57 8
See All
=(F+)( G1 %"G&-7(E3'1
!+&7+3) H @+7('-7"'(
!+&7+3) H @+7('-7"'(
I3(7'1
I+) 73 %7-'7 J3B( 01 23345 D"''()7 =(-/ 2'3,5( =(&3BB()/(/
1. User activates the app bar and selects on Browse
2. Note: Reccommended will also have the same experience illustrated here
1. The top level browse categories are displayed in a list format
2. ordering of the list should be whatever is set to default by the API
3. Back will bring the user to whatever state they came from
1. Once the user selects a category, they are presented with the list of books within
that category
2. The user should be able to scroll to the right to see more books - the exact
number of total books loaded can be discussed
3. There is no pagination - loading additional books should be done as its needed
4. Tapping on any book will bring the user to the item page
5. Rene by Subcategory will allow the user to narrow their search by
subcategories
1. Rene by Subcategory will bring the user back to the category style view to
choose a sub category -
1. Once the user has reached the end of a browse tree, the subcategory link
disappears.
Art & Architecture
Biography & Memoir
Business & Finance
Computers
Entertainment
Family & Relationships
Fiction & Young Adult
Fiction & Literature
Food & Drink
Drama
Essays & Letters
Fiction
Literary Theory
Poetry
Kobo Metro App
3.1 Reacommended Lists Experience
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
23 / 41
=(&3BB()/(/ =(-/5
Category Name Category Name
01 23345 0('&6 #+57 8
See All
@334 E33/K F((# E'(-7L
I+) 73 %7-'7 J3B( 01 23345 D"''()7 =(-/ 2'3,5( =(&3BB()/(/
1. User activates the app bar and selects on Browse
2. Note: Reccommended will also have the same experience illustrated here
1. The top level recommended lists are displayed in a list format
2. ordering of the list should be whatever is set to default by the API
3. Back will bring the user to whatever state they came from
1. Once the user selects a list, they are presented with the list of books within that
list
2. The user should be able to scroll to the right to see more books
3. There is no pagination - loading additional books should be done as its needed
4. Tapping on any book will bring the user to the item page
NYT Bestsellers - Fiction
NYT Bestsellers - Non-Fiction
Look good, feel great!
Brand New Thrillers
New & Hot Romances
eBook Bundles
Newsmakers of 2011
New Teen Reads
The Latest in Non-Fiction
Introduction
1. The Recommended lists section will work similarly to our browse experience
2. Recommended lists do not have sub-categories
Kobo Metro App
4.0 Purchase Path - User Flows
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
24 / 41
View Book Details Click to Buy
Do we have
payment
information?
Display error -
User directed to ll
in billing
information on
kobobooks.com
and then they can
proceed.
Display nal total
with tax
Click to Complete
Purchase
Download Book to
client
NO
YES
Click To Buy
LEGEND
User Action
View Book Details
Application Page or action
Purchase Path Flow
Kobo Metro App
4.1 Item Page - Description
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
25 / 41
96( D-7M5 9-G#(
Similar Books
0('&6-)/+5-G#( #+57 8
See All
User taps on a book from the
store portion of the Kobo
Homescreen
Data Points
1. Book Cover
2. Synopsis
3. Price
4. Star rating
5. Author
6. Publisher Name
Functionality
1. User can buy the book - taken through the buying UX
2. User can preview the book
3. User can select from a similar book recommendation carousel - takes
them to the respective item page
4. The ratings widget is a read only widget
UI Notes
1. The synopsis will be placed in its own vertical scrolling div
2. User can pan to the right to view the full list of recommendations
96( D-7M5 9-G#(
Completely impact multifunctional processes and
wireless supply chains. Dynamically engage business
meta-services for market-driven data. Collaboratively
restore cross-platform users before client-centered
manufactured products.
Assertively evolve long-term high-impact vortals through
visionary solutions.
BUY NOW Price: $19.99
By: Michael Ondaatje
Preview
Publisher Name
Kobo Metro App
4.2 Purchase Path - Buy Experience - Positive Flow
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
26 / 41
96( D-7M5 9-G#(
Completely impact multifunctional processes and
wireless supply chains. Dynamically engage business
meta-services for market-driven data. Collaboratively
restore cross-platform users before client-centered
manufactured products.
Assertively evolve long-term high-impact vortals through
visionary solutions.
BUY NOW Price: $19.99
By: Michael Ondaatje
Preview
Publisher Name
96( D-7M5 9-G#(
CONFIRM PURCHASE
Total: $22.29
By: Michael Ondaatje
Publisher Name
96( D-7M5 9-G#(
By: Michael Ondaatje
Publisher Name
READ NOW
Completely impact multifunctional processes and
wireless supply chains. Dynamically engage business
meta-services for market-driven data. Collaboratively
restore cross-platform users before client-centered
manufactured products.
Assertively evolve long-term high-impact vortals through
visionary solutions.
Purchased
Cancel
The idea portrayed through these wireframes is the concept of buying a ebook without
leaving the page at all - A one (or two) click buy experience
Assumptions: User is signed in, and has billing information saved
1. User hits Buy Now
2. Preview will launch the preview experience
3. Back will bring the user back to the page they were viewing before this one
1. We swap out the summary through an animation with the order details
2. Any other widgets on the page are disabled in this state - The recommended
books for example are disabled (or hidden entirely)
3. Conrm Purchase will buy the book
4. Cancel will bring the user back to the original item page
5. Change Buying Details will take the user to a view in which they can alter their
buying details (possibly add a gift card/promo code as well)
The purpose of this page is to show the user the total cost of the entire transaction
including taxes. If this requirement can be lifted, we ought to be able to implement
a true one click buy implementation.
1. The book is purchased, the book cover goes into a greyed out state with a
progress bar indicating how much of the book is downloaded
2. The Read Not button appears, however it is in a greyed out state until the book is
fully downloaded
3. The Preview CTA disappears
Item Page
Item Page - Conrmation Item Page - Conrmed
Preview
Your Order Summary
Price: $19.99
Taxes: $2.30
Total: $22.29
96( D-7M5 9-G#(
By: Michael Ondaatje
Publisher Name
READ NOW
Completely impact multifunctional processes and
wireless supply chains. Dynamically engage business
meta-services for market-driven data. Collaboratively
restore cross-platform users before client-centered
manufactured products.
Assertively evolve long-term high-impact vortals through
visionary solutions.
Purchased
Item Page - Conrmed
1. After the book nishes downloading, the book cover goes back to normal, and the
read now CTA is enabled.
Kobo Metro App
4.3 Purchase Path - Buy Experience - Negative Flow
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
27 / 41
96( D-7M5 9-G#(
Completely impact multifunctional processes and
wireless supply chains. Dynamically engage business
meta-services for market-driven data. Collaboratively
restore cross-platform users before client-centered
manufactured products.
Assertively evolve long-term high-impact vortals through
visionary solutions.
BUY NOW Price: $19.99
By: Michael Ondaatje
Preview
Publisher Name
96( D-7M5 9-G#(
By: Michael Ondaatje
Publisher Name
The idea portrayed through these wireframes is the concept of buying a ebook without
leaving the page at all - A one (or two) click buy experience
Assumptions: User is signed in, and has billing information saved
1. User hits Buy Now
2. Preview will launch the preview experience
3. Back will bring the user back to the page they were viewing before this one
1. If the user does not have billing information saved, we do not allow them to
purchase the book.
2. The error message instructs the user to go to kobobooks.com to add billing
information - Kobobooks.com can be a link which activates the default browser
3. The Buy button should still be active - ie the user could hop online, enter their
information, return to the app and hit the buy button
Item Page
Item Page - no billing information saved
Preview
BUY NOW Price: $19.99
We're missing your billing information
Please go to Kobobooks.com to update your billing
information and try again.
Kobo Metro App
5.0 Error States - No Internet
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
28 / 41
Homepage
01 23345
See All
01 23345 0('&6 #+57 8
See All
01 23345 0('&6 #+57 8
See All
No Internet Connection
Please connect to an Internet
connection and try again.
Okay
No Internet Connection
Please connect to an internet
connection and tap the Try Again
button.
Try Again
Notes:
1. If the application loads with no internet, the only part of the application that will
work, will be the user's library (downloaded content).
2. The rest of the homepage will not load, and display an error message instead
3. The onus is on the user to connect to the internet and hit Try Again here - at that
time only will the application check for an internet connection again
4. Accessing the app bar and selecting Browse, or Recommended will invoke the
error message shown below.
Notes:
1. User has internet connection, and loads the entire homepage - then they lose
internet connection, and tap on the rst item in a merchandising list
Notes:
1. A yout error message shows if a user clicks on anything in the application that
requires an internet connection while no internet connection is available.
Homepage Homepage
Copy Edits
Jan 18, 2012
Copy Edits
Jan 18, 2012