kobometroapp homepage library store v3

FILE NAMEShanak RahmanKoboMetroApp_Beta.graffle

CREATORWed Jan 18 2012MODIFICATION DATE

Kobo Metro App - Homepage, LIbrary, Browse & Store

DESCRIPTION

VERSION HISTORYVersion 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 Flow4.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 App1.0 Kobo Homepage

Wed Jan 18 2012

Creator

Modified

Shanak Rahman17 / 41

!"##$%&'(()$*+(, %)-..(/$*+(,

01$2334501$23345

See All See All

0('&6-)/+5(/$#+57$8

1

2

3

0('&6-)/+5(/

See All

Homepage Scope1. 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 easily3. 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 app4. The first 5 books show from my books, and the first 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 page1. Persistent Header. Portion below the header will scroll horizontally - Kobo logo, title, and search bar2. 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).aspxGuidelines for Panning: http://msdn.microsoft.com/en-us/library/windows/apps/hh465310(v=VS.85).aspxRails and Snap points: http://msdn.microsoft.com/en-us/library/windows/apps/hh465310#use_snap_points

4

http://msdn.microsoft.com/en-us/library/windows/apps/hh465367(v=VS.85).aspx


http://msdn.microsoft.com/en-us/library/windows/apps/hh465310#use_snap_points

Kobo Metro App1.1 Homepage Details

Wed Jan 18 2012

Creator

Modified


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 first 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 App1.2 Homepage Semantic Zoom

Wed Jan 18 2012

Creator

Modified


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 defined 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 flashing 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).aspxDev: 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 defines 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 AllSee All See All See All



Kobo Metro App2.0 My Books

Wed Jan 18 2012

Creator

Modified


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 book2. Latest downloaded book

OrderingAlso, only the first 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 to3. The ordering is top to bottom and then across the

columns to the right4. Post beta features include: sorting, different view

options

Kobo Metro App2.1 My Books Empty State

Wed Jan 18 2012

Creator

Modified


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 lists2. 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 find your next great read.

Your Library is Empty

Your Library is Empty

Recommended ReadsBrowse Categories

01$23345

Check out these great books to find 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 library2. Otherwise, just display the books present.

0('&6$#+57$8

Homepage - Fewer than 5 books

01$23345

See All

Copy EditsJan 18, 2012


Kobo Metro App3.0 Browse Category Experiene

Wed Jan 18 2012

Creator

Modified


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-'7J3B( 01$23345 D"''()7$=(-/2'3,5( =(&3BB()/(/

1. User activates the app bar and selects on Browse2. 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 API3. 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 needed4. Tapping on any book will bring the user to the item page5. Refine by Subcategory will allow the user to narrow their search by

subcategories

1. Refine 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 App3.1 Reacommended Lists Experience

Wed Jan 18 2012

Creator

Modified


=(&3BB()/(/$=(-/5

Category Name Category Name

01$23345 0('&6$#+57$8

See All

@334$E33/K$F((#$E'(-7L

I+)$73$%7-'7J3B( 01$23345 D"''()7$=(-/2'3,5( =(&3BB()/(/

1. User activates the app bar and selects on Browse2. 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 API3. 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 needed4. 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 experience2. Recommended lists do not have sub-categories

http://www.kobobooks.com/lists/Healthy/HNfDgPV3qEGYLLMVSOS7MQ-1.html

http://www.kobobooks.com/lists/Thrillers/sA3p-IDWJUulQVPNvAZXCA-1.html

Kobo Metro App4.0 Purchase Path - User Flows

Wed Jan 18 2012

Creator

Modified


View Book Details Click to BuyDo we have

payment information?

Display error - User directed to fill

in billing information on

kobobooks.com and then they can

proceed.

Display final total with tax

Click to Complete Purchase

Download Book to client

NO

YESClick To Buy

LEGEND

User Action

View Book Details Application Page or action

Purchase Path Flow

Kobo Metro App4.1 Item Page - Description

Wed Jan 18 2012

Creator

Modified


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

HomescreenData Points

1. Book Cover2. Synopsis3. Price4. Star rating5. Author6. Publisher Name

Functionality1. User can buy the book - taken through the buying UX 2. User can preview the book3. User can select from a similar book recommendation carousel - takes

them to the respective item page4. The ratings widget is a read only widget

UI Notes1. The synopsis will be placed in its own vertical scrolling div2. 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 NOWPrice: $19.99

By: Michael Ondaatje

Preview

Publisher Name

Kobo Metro App4.2 Purchase Path - Buy Experience - Positive Flow

Wed Jan 18 2012

Creator

Modified


96($D-7M5$9-G#(





Preview

Publisher Name

96($D-7M5$9-G#(

CONFIRM PURCHASE

Total: $22.29

By: Michael OndaatjePublisher Name

96($D-7M5$9-G#(By: Michael OndaatjePublisher Name

READ NOW



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 Now2. Preview will launch the preview experience3. 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 details2. Any other widgets on the page are disabled in this state - The recommended

books for example are disabled (or hidden entirely) 3. Confirm Purchase will buy the book4. Cancel will bring the user back to the original item page5. 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 - Confirmation Item Page - Confirmed

Preview

Your Order Summary

Price: $19.99

Taxes: $2.30

Total: $22.29


READ NOW



Purchased

Item Page - Confirmed

1. After the book finishes downloading, the book cover goes back to normal, and the read now CTA is enabled.

Kobo Metro App4.3 Purchase Path - Buy Experience - Negative Flow

Wed Jan 18 2012

Creator

Modified


96($D-7M5$9-G#(





Preview

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 Now2. Preview will launch the preview experience3. 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


We're missing your billing information

Please go to Kobobooks.com to update your billing

information and try again.

Kobo Metro App5.0 Error States - No Internet

Wed Jan 18 2012

Creator

Modified


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 instead3. 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 again4. 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 first item in a merchandising list

Notes:1. A flyout 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



kobometroapp homepage library store v3

Documents