FILE NAME

Shanak Rahman
KoboMetroApp_Beta.grafe
CREATOR
Wed Jan 18 2012 MODIFICATION DATE
Kobo Metro App - Win8 Controls & Sign In
DESCRIPTION Windows 8 Controls/Splash Page/Sign In
VERSION HISTORY
Version Date Notes
1 November 15, 2011
Updated application start architecture
Search experience
App bar states dened
Book cover states dened
Sign in pages - Error copy, error states (in-line & general), external
links
Table of Contents
1.0 Architecture of Application Start
2.0 Kobo Metro Not Signed In
2.1 Kobo Metro Tiles - Signed In
3.0 Application Start Experience - Authenticated
3.1 Application Loading Experience Unauthenticated
3.2 Sign In Screen + Error Messaging
3.3 Sign In screen - Interaction + External Links
4.0 Global Charms
4.1 Search Experience
4.2 Search Behaviour
2 January 9, 2011
Updated architecture to reect authentication only access into the app
Updated to include Beta-only requirements
Updated application start ow
Pin To Start icon only appears when a book is selected
Updated Create an Account ow (breaks to web)
4.3 App Bar States
4.4 Book Cover States
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 Architecture of Application Start
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
3 / 41
User Launches app
through App Tile
Is user signed in?
Resume saved
state
Does the application
have a saved state?
Homepage
Sign in Jump
Page
Launch default
browser
Sign In Page
Create Account
Sign In
Yes
No
User signs out
January 9 - Application Start Architecture
Introduction
1. The Beta application will only allow users to sign in with existing accounts - users that need to create a new account
will be forwarded to the create account page on our website (through a default browswer)
2. Signing out of the application will take the user back to the sign in page
Kobo Metro App
2.0 Kobo Metro Tiles - Not Signed In
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
4 / 41
Tile Name
!"#$%"&$'()*$
!"#$+,-).$'()*$
Notes:
1. The non-signed in state will not rotate into different tiles. It will be a
stagnant tile which highlights our brand
2. This is our default tile
Notes:
1. The smaller tile does not rotate into different tiles. It will be a
stagnant tile which highlights our brand
Template Wireframe Kobo Creative Notes
Introduction
1. Application tiles have two states - signed in and not signed in
2. When the user is not signed in, the tiles do NOT rotate between templates
3. The smaller tile does not rotate, in either state
4. Tiles do rotate between templates - however each tile template has rules on whether or not they can be shown (for ex.
a tile that shows 5 book covers requires the user to have 5 books in their library at a minimum
5. Each time a specic tile template is shown, it should rotate between different books (if possible)
6. We have made assumptions on what is possible to implement and are looking forward to working with the devs to nd
solutions to limitations found while working on this
7. Peek tiles are templates that are essentially two tiles in one (ie. a full image is the rst tile, and then it rotates to a
second tile that explains that image
Template listings: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notications.tiletemplatetype.aspx
Kobo Metro App
2.1 Kobo Metro Tiles - Signed In
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
5 / 41
!"#$%"&$'()*$
!"#$+,-).$'()*$
!"#$%"&$'()*$/0&!$12
!"#$%"&$3$$4'()*$56
!"#$%"&$3$$4'()*$78##$92"8056
Notes:
1. The smaller tile does not rotate into different tiles. It will be a
stagnant tile which highlights our brand
Notes:
1. The brand-only tile is one of the templates that rotates through
Notes:
1. Image 1 = a book in the user's library
2. Text Field 1 = the book title - truncated so that it ts on one line
3. Author = There isn't a template with a text eld 2, however if we can gure
out a way to get the author in, we denitely want to. It's optional though
4. Logo: We've seen this implemented on other application tiles - we would
want to implement this as well.
Notes:
1. This is a peek tile, it will rotate between states back to back
2. Image1 = Book cover of a book that is opened in the user's library (we should rotate between books
in a specic order - the order should be recently opened
3. Text Field 1 = Book title
4. Text Field 2 = Percentage read through that book
5. Rotate Rules: Rotate through opened book by the following order: date last opened
6. Inclusion rule: User must have at least 1 book opened in their library
Notes:
1. This is a peek tile, it will rotate between states back to back
2. Images - Top 5 books in the book's library appear as a collage in that
order (ordered determined by date last opened/date last added to
library
3. Text Fields - refer to the titles of the corresponding books
4. Rotate Rules: Rotate the rst 5 books, then the next then the next as it
is ordered according to the rules: date last opened/date last added.
5. Inclusion Rule: User must have at least 5 books in their library
Notes:
1. Rotate Rules: This tile should select books at
random from the users library
2. Inclusion Rule: User must have at least 1 book in
their library for this tile to work. Doesn't necessarily
have to be opened
Rotation Rules:
1. Rotate between tiles 2,3,4,5
2. Tiles 3,4,5 should all alternate between book
covers as per the rules stated
3. Tile template should only show if the inclusion
rule is met
2
1
3
4
5
Tile Name Template Wireframe Kobo Creative Notes
Kobo Metro App
3.0 Application Start Experience - Authenticated
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
6 / 41
Loading your books...
+:#);< +9.$$0
+:#);< ;9.$$0 > ?"2< #8)&"0*
@8($:)*$
Introduction:
1. Splash screen - This is the screen that is used with the "closing door" transition
2. A windows 8 spinner will appear with a brief message giving the user feedback that the application is
loading.
3. Once the rst 5 lists are loaded, show the homescreen. As the user scrolls on the homescreen itself,
load the other lists on demand.
4. The current interaction with books loading into the homescreen is messy - Rather have the books
loaded prior to dropping them into the homepage
5. If the Kobo app is suspended, no splash screen is needed - just drop the user into the saved state.
Kobo Metro App
3.1 Application Loading Experience Unauthenticated
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
7 / 41
Sign In
Create an Account
Welcome to Kobo
Click sign in if you have a Kobo account
Click Create an Account if you're new to Kobo.
Use your Kobo account
Sign In
Email Address
Password
Forgot your password?
By continuing you conrm that you agree to the
Terms of Use.
Create a Kobo Account
Account creation is coming soon! This
application is still in Beta.
Click below to create an account on
Kobo.com, then re-open the app to sign in.
Create Account
+:#);< +9.$$0 +"*0 "0 A-(: +9.$$0
+"*0 '0 +9.$$0 7.$)2$ /998-02 +9.$$0
Notes
1. The beta build will not include account creation
2. If the user clicks on the button, forward them to: https://secure.kobobooks.com/PortalSignIn?
redirectUrl=http%3A%2F%2Fwww.kobobooks.com%2F&LoginType=0
3. Nice to have: Launching the sign in page with the create account radio button activated would be
awesome
Copy Edits
Jan 18, 2012
Copy Edits
Jan 18, 2012
Kobo Metro App
3.2 Sign In Screen + Error Messaging
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
8 / 41
Password
Sign In to Kobo
Sign In
Email Address
Password
Forgot your password?
By continuing you conrm that you
agree to the Terms of Use.
+"*0 "0 :)*$ > '0 B"0$ C..8.;
This is an inline error
This is an inline error
Sign In to Kobo
Sign In
Email Address
Password
Forgot your password?
By continuing you conrm that you
agree to the Terms of Use.
+"*0 "0 :)*$ > D$0$."9 C..8.
This is a General Error This is
a General Error Tsis is a
General Error This is a
General Error
Error
Type of
Error
Copy
In-Line Please enter a valid email address.
Field
Email
Error
Email not valid
In-Line Please enter your password Password Password left empty
In-Line Email address is required Email Email left empty
General
We don't recognize the e-mail address or password you
entered. Please check that you entered them correctly
and try again.
N/A
Email/password combo
incorrect
C..8. +2)2$; > 78:E
Notes:
1. Two types of errors on the sign in screen: In-line and generic. Some in-line errors
should be activated through client-side checking, others being server-side.
2. For example, entering a valid email address should be checked on the client. As
soon as the user leaves the eld with an invalid email address, it should activate the
in-line error.
3. When landing on this page, the default focus should be on the email address eld. If
the user is on a tablet only, the virtual keyboard should be activated by default.
4. Sample interaction of in-eld labels are found in this jquery plugin: http://
fuelyourcoding.com/scripts/ineld/
Email Address
Password
srah
Password
srahman@kobo.com
Three shades present in these elds:
In eld label - focused: Light Grey
In eld label - not focused: Dark Grey
User entry: Black
In this case, Email address is in the
focused state, and Password is in the not
focused state
As soon as the user starts typing, the in-
eld label disappears, and replaced with
black text
When the user tabs to the next eld, the
password in eld title dims to a light grey - this
will give the user feedback that the eld is in edit
mode.
'02$.)92"80 8F "0>F"$#& #)G$#; )0& 2$12 $02.E
Note: Actual placement of all error messages are
specied in Neil's mocks
Kobo Metro App
3.3 Sign In screen - Interaction + External Links
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
9 / 41
Sign In to Kobo
Sign In
Email Address
Password
Forgot your password?
By continuing you conrm that you
agree to the Terms of Use.
Notes:
1. The webstore version of terms-of-use assumes that the sign in page is also from the
webstore - we have a native sign in screen, therefor the back button would not work
on that page
2. Activating the website's terms of use page is a quick workaround.
Activate Default
Internet Browser
Activate Default
Internet Browser
Notes:
1. The webstore enabled Forgot-your-password is somewhat broken at the moment. In
the mean time we should let the user go through the process through the website
Kobo Metro App
4.0 Global Charms
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
10 / 41
+$).9< H8G8
+$).9< 7<).(
+<)."0*
+<)."0* 7<).(
I$J"9$;
I$J"9$;
+$22"0*;
+$22"0*; 7<).(
I
$
;
9
8
:
$
&
Windows 8 Settings
No device compatibility for Dec 1
B$2 E8-. F."$0&; 408? )G8-2 2<$
H8G8 )::K +<).$ 2<$ )::#"9)2"80
2<.8-*< 2<$;$ :#)2F8.(;
List whichever apps Windows 8
has sharing contracts with -
Facebook, Twitter, etc
Kobo
Version 1.0
Rate and Review
Sign In / Sign Out
Activates Sign In Page
Help
Win8 Help Experience -
Undened and possibly
descoped for Phase 1
Kobo
App Title App Title
App Title App Title
App Title App Title
Search
Kobo will be one of the
applications with search contracts
in the search charm - If the
search charm is activated from
within the application, Kobo is
selected by default
Rate & Review - Activates the
review section inside the
Microsoft Store
App Title App Title
App Title App Title
App Title App Title
App Title App Title
Kobo Metro App
4.1 Search Experience
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
11 / 41
+$).9< H8G8
+$).9< 7<).(
Kobo
App Title App Title
App Title App Title
App Title App Title
The lost symbol
App Title App Title
App Title App Title
App Title App Title
App Title App Title
+$).9< L$;-#2;
H8G8 +28.$ MN55O PE Q884; M6O
R8- ;$).9<$& F8.S 2<$ #8;2 ;E(G8#
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
+$).9< H8G8
Kobo
App Title App Title
App Title App Title
App Title App Title
The lost symbol
App Title App Title
App Title App Title
App Title App Title
App Title App Title
+$).9< L$;-#2;
H8G8 +28.$ MN55O PE Q884; M6O
R8- ;$).9<$& F8.S 2<$ #8;2 ;E(G8#
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
+$).9< H8G8
Kobo
App Title App Title
App Title App Title
App Title App Title
The lost symbol
App Title App Title
App Title App Title
App Title App Title
App Title App Title
+$).9< H8G8
+$).9< 7<).( > /-2898(:#$2$
Kobo
App Title App Title
The lost symbol
App Title App Title
App Title App Title
App Title App Title
App Title App Title
Book Title Book Title
Author Name
Book Title Book Title
Author Name
Notes
1. These are query suggestions -
Autocomplete of the strongest
matches from the application.
2. Results from the users library should
show rst, followed by the store.
3. Autocomplete here is limited to 5
results
4. User selecting a book from here will
go directly to the item page (or
reading experience, if the user has
that book)
Notes
1. As user types in a query,
autocomplete should be running to
suggest answers to the user - This
allows user to select an entry without
having to see the entire results page
2. If the user commits the search query,
the left hand side of the page
updates to the search results page
(shown on the right)
Introduction
1. Search in the Kobo app will be implemented
through the search charm. The search
results will be faceted into two buckets: My
Books, and Kobo Store.
2. If there are results in the users library, then
default to My Books. If there are no results
in library, default to the Kobo Store
3. autocomplete is activated when the user
starts typing into the search eld. Selecting
an entry constitutes as submitting a search
query
4. We must save the previous state of the
application - The back button will return the
user to this state
Reference Material
Designing for Search: http://
msdn.microsoft.com/en-us/library/windows/
apps/hh465233(v=VS.85).aspx
Adding Search: http://msdn.microsoft.com/en-
us/library/windows/apps/hh465238.aspx
Kobo Metro App
4.2 Search Behaviour
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
12 / 41
T;$. "; "0 )0 82<$. )::#"9)2"80 > ;$#$92; H8G8 F.8( +$).9<
+$).9< H8G8
Kobo
App Title App Title
App Title App Title
App Title App Title
App Title App Title
App Title App Title
App Title App Title
App Title App Title
H8G8 "0 ;-;:$0&$& (8&$S H8G8 8:$0$& "028 "2; ;)J$& ;2)2$
PE Q884;
See All
P$.9<)0&";$& #";2 6
+$).9< H8G8
Kobo
App Title App Title
App Title App Title
App Title App Title
App Title App Title
App Title App Title
App Title App Title
App Title App Title
Notes
1. The kobo application is launched behind the search charm in its previous state
2. If the application was not opened or not in suspended mode, doing this action should launch the application
regularly (splash screen, loading, homescreen)
3. Once the user submits a search query into the search box, the search results page is activated
4. Tapping within the page will dismiss the charm
Note: If Kobo is not in suspended mode, launch the application regularly into the homescreen till a search query is
launched.
Kobo Metro App
4.2 Search Behaviour (continued)
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
13 / 41
T;$. "; "0 )0 82<$. )::#"9)2"80 ?U ;$).9< 2$.( $02$.$& > ;$#$92; H8G8 F.8( +$).9<
+$).9< H8G8
Kobo
App Title App Title
App Title App Title
App Title App Title
The lost symbol
App Title App Title
App Title App Title
App Title App Title
App Title App Title
Notes
1. A search term is already entered in the search charm, but user is in another application
2. User presses Kobo, it should invoke the search page directly.
+$).9< L$;-#2;
H8G8 +28.$ MN55O PE Q884; M5O
R8- ;$).9<$& F8.S 2<$ #8;2 ;E(G8#
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
Q884 !"2#$ Q884 !"2#$
/-2<8. /-2<8. /-2<8.
+$).9< H8G8
Kobo
App Title App Title
App Title App Title
App Title App Title
The lost symbol
App Title App Title
App Title App Title
App Title App Title
App Title App Title
T;$. "; "0 ;8($ 82<$. )::#"9)2"80 ?U ;$).9< 2$.( $02$.$& > ;$#$92; H8G8 F.8( +$).9<
Notes
1. In this use case, the search page is activated automatically with the results for the search query.
2. The search is scope is defaulted to the user's library - However, if there are no books in the user's library, show
store results instead
Kobo Metro App
4.3 App Bar States
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
14 / 41
Reference Material
Dev: Adding an App Bar: http://msdn.microsoft.com/en-us/library/windows/apps/hh465309(v=VS.85).aspx
Designing App Bar: http://msdn.microsoft.com/en-us/library/windows/apps/hh465302(v=VS.85).aspx
@8($ PE Q884; 7-..$02 L$)& Q.8?;$ L$98(($0&$&
6 > /:: Q). > PE G884; V +28.$
7-..$02 L$)&
Notes:
1. Will appear once the user opens a book - It will be the
last book with the latest bookmark
2. Will not show if a book has not yet been opened on that
account
W > /:: Q). > L$)&"0* C1:$."$09$ > Q8-*<2 G884
Notes:
1. Takes the user back to whichever page they
activated the reading experience from.
Notes:
1. Brings the user to the homepage
PE Q884;
Notes:
1. Links to the user's library
Q.8?;$
Notes:
1. Links to the store's browse experience - always links to
the top level categories
L$98(($0&$&
Notes:
1. Links to the store's recommended list experience -
always links to the top level list, available in that
geography
@8($
Notes:
1. Always links to the user's homepage
3"0 28 +2).2
Notes:
1. This button is used to pin books to the homepage
2. Interaction is detailed out on a separate page.
Q)94
@8($
Notes:
1. Activates the table of contents yout
7802$02;
L$)&"0* +$22"0*;
Notes:
1. Activates the reading settings yout
+$22"0*; 7802$02; Q884 '0F8 Q)94 @8($
Q884 '0F8
Notes:
1. Activates the book information yout - its essentially a
view of the item page inside of the reading experience
Notes:
1. In book scrubber - used to navigate within the book
X > /:: Q). > L$)&"0* C1:$."$09$ > 3.$J"$?
Notes:
1. Buy Now will activate the light buying experience
within the reading experience.
L$)&"0* +$22"0*; 7802$02; Q884 '0F8 Q)94 @8($ Q-E Y8?
Q-E Y8?
Z > /:: Q). > +$#$92$&UL"*<2>9#"94 "2$(
3"0 28 +2).2
3"0 28 +2).2
Notes:
1. User can pin a book to start as a subtile - Works on books in
the user's library or in the store
Introduction:
1. The app bar appears at the bottom of the screen inside metro applications to offer navigation and task based support.
2. The app bar is contextual - it shows different options depending on where you activate it. Its used as a main form of
navigation and is also activated for operational tasks on items (for ex. removing a book from library)
3. Interaction to activate the app bar: Swipe up from the bottom, right click on a book, right click anywhere on the page
Copy Edits
Jan 18, 2012
Copy Edits
Jan 18, 2012
Kobo Metro App
4.4 Book Cover States
Wed Jan 18 2012
Creator
Modied
Shanak Rahman
15 / 41
Preview
1 2 3
States Available:
1. Book Downloaded (unopened)
2. Book Downloaded (opened & bookmarked)
3. Preview
Interaction:
User taps on the book cover, and the reading experience for that book is activated
B"G.).E Q884 78J$.;
+28.$ Q884 78J$.;
2 1
States Available:
1. Store item
2. Store item of a book that is already is in the user's library
Interaction:
1. User taps on book cover, and item page is brought up
2. User taps on book cover of a book in user's library and reading experience is brought up