Kindle UX Spec Doc

17
Kindle Connect USER EXPERIENCE SPECIFICATIONS DOCUMENT UXDI Project 3: Kindle Sam Verdure Adeline Fong David Cheong UX Designer/Project Manager UX Designer UX Designer

Transcript of Kindle UX Spec Doc

Kindle ConnectUSER EXPERIENCE SPECIFICATIONS DOCUMENT

UXDI Project 3: KindleSam VerdureAdeline FongDavid Cheong

UX Designer/Project ManagerUX DesignerUX Designer

Overview

Project Overview

Kindle

Amazon wants to increase customer engagement by introducing a social aspect to the Kindle reading experience.

The Problem/Opportunity

Many people enjoy having access to books through the Amazon Kindle app. The app provides a pleasant reading experience, but lacks the social aspect that many readers desire. People love to discuss what they’re reading! Amazon wants to introduce a socialaspect to Kindle, allowing readers to comment on and discuss the books they’re reading.

UXDI Project 3: KindleSam VerdureAdeline FongDavid Cheong

UX Designer/Project ManagerUX DesignerUX Designer

Table of Contents

Chapter 01Chapter 02

Chapter 03 Wireframes + Link to Prototype

Goals for the project

(High Level App Map / Sitemap / Navigation Structure)High-Level Information Architecture

UXDI Project 3: KindleSam VerdureAdeline FongDavid Cheong

UX Designer/Project ManagerUX DesignerUX Designer

Kindle Connect is a feature develop to enable readers in Kindle to interact and form a social network within it’s own native app. Readers will be able to see friends reading a similar book, join a book club with a target completion and encourage and send qoutes and notes to other members in the group.

Chapter 01 - Project Goals

UXDI Project 3: KindleSam VerdureAdeline FongDavid Cheong

UX Designer/Project ManagerUX DesignerUX Designer

Chapter 02 - App Map

02.00.00

UXDI Project 3: KindleSam VerdureAdeline FongDavid Cheong

UX Designer/Project ManagerUX DesignerUX Designer

3

Tap

Tap

Tap

Tap

Tap

Tap Tap

Tap

Tap

Tap

Tap

Reading Screen

Native Kindle Library w

ith recomm

ended books.

A navigation menu w

ith new

Kindle connect feature as one of the links.

A navigation menu for Kindle C

onnect

Connects Kindle’s reader to other kindle users

as a social reading network.

Displays the book that is being read by the reading group w

ith their reading progress.

Activity Feed propulated by reading milestones

of group mem

bers.

Highlight Action

Send/Save N

oteSelect

Recipients

Library (Kindle H

ome)

Library (Kindle Hom

e)

Library Left M

enu

Library Left Menu

Kindle Connect

Kindle Connect

Reading Group

Hom

e

Reading Group H

ome

Reading Group

Activity Feed

Reading Group Activity Feed

23

14

5

67

89

12345678910

Reading ScreenThis screen enables user to change font size, share the page, and access their notes.

When highlighting text, user can select color,

copy the quote, and create personal note.

A page editor appears to enter notes. User can

send the note or save it,

A selection list of individual or groups in the social reading netw

ork.

Highlight Action

Send/Save Note

Select Recipients

Kindle Connect Left M

enu

Tap

UXDI Project 3: Kindle

Sam Verdure

Adeline FongDavid C

heong

UX Designer/Project M

anagerU

X DesignerU

X Designer

Tap

02.00.00App M

ap

10

UXDI Project 3: Project NameStudent NameStudent NameStudent Name

Position Title.Position Title.Position Title.

1

03.00.00Kindle Library Navigation Menu

Notes

1. Navigation MenuAction - TapBehavior - All menu items remain identical to current Kindle App with the exception of adding link to Kindle Connect screen (03.01.00). Kindle Connect functions within the native Kindle app and does not navigate users outside of the app.

MDS

1

3

2

4

UXDI Project 3: Project NameStudent NameStudent NameStudent Name

Position Title.Position Title.Position Title.

03.01.00Kindle Connect Home Screen

Notes

1. Navigation MenuAction - TapBehavior - Pulls out a left-navigation menu for the user to access their library, profile, friends, etc. (See 03.03.00)

2. My Recent ReadsAction - SwipeBehavior - User’s recently read library is accessable through a sideways scroll

3. User AvatarsBehavior - Indicates user’s friends who are currently reading a recently read book from the user’s library

4. Reading GroupsAction - TapBehavior - Pushes to a reading group screen. Deadline date is clearly shown as a reminder for member within the group.

MDS

1

2

3

4

6

5

UXDI Project 3: Project NameStudent NameStudent NameStudent Name

Position Title.Position Title.Position Title.

03.02.00Kindle Connect Left Navigation

Notes

1. LibraryAction - TapBehavior - Accesses Kindle library

2. Kindle ConnectAction - TapBehavior - Closes menu/returns to Kindle Connect home page

3. Inbox Action - TapBehavior - Accesses direct messages received from other kindle connect users. Notifications are be displayed with a standard red dot with numeric icon.

4. FriendsAction - TapBehavior - View and manage Kindle Connect friends. This will be developed in a later iteration.

5. ProfileAction - TapBehavior - Accesses profile area where Kindle Connect users manage their personal information. This will be developed in a later iteration. 6. Manage GroupsAction - TapBehavior - Accesses area where user can manage their reading groups. Administrators may invite or remove members, change reading dealines. All users may leave groups.

03.03.00Reading Group Home Screen

Notes

1. Screen Title with back buttonAction - TapBehavior - Brings user back to Kindle Connect home screen (03.01.00). Screen title is named according to group’s book title.

2. Home/Activity TabsAction - TapBehavior - Tapping on “activity” transitions the user to the group’s full activity feed (03.04.00)

3. Book SummaryAction - TapBehavior - Summary will expand and indicator arrow will invert, indicating a secondary tap will condense the content back to its original state.

4. Reading ProgressBehavior - Progress bars populate according to group member’s synced data within their Kindle e-book

5. Like ButtonAction - TapBehavior - Selected member will receive a notification that a user has liked/cheered their progress. This will be developed in a later iteration.

6. Message ButtonAction - TapBehavior - Will open a message dialogue between members. This will be developed in a later iteration.

7. Recent ActivityBehavior - Populated by the three most recent activities within the group

8. See All LinkAction - TapBehavior - Transitions to full group activity feed (02.20.01)

3

UXDI Project 3: KindleSam VerdureAdeline FongDavid Cheong

UX Designer/Project ManagerUX DesignerUX Designer

1

2

6

7

4 5

8

3

03.04.00Reading Group Activity Feed

Notes

1. Screen Title with back buttonAction - TapBehavior - Brings user back to Kindle Connect home screen. Screen title is named according to group’s book title.

2. Home/Activity TabsAction - TapBehavior - Tapping on “Home” transitions the user to the group’s home screen (03.03.00)

3. Note Share NotificationAction - Tap (conditional)Behaviors - If a note has been shared with the user, item may be tapped to push to viewable content. This will be developed in a later iteration.

4. Highlight NotificationsBehavior - If a highlight has been shared with the user or the group, item may be tapped to push to viewable content. This will be developed in a later interation.

5. Progress MilestonesBehavior - Milestones will automatically populate at the 25%, 50%, 90%, and 100% completion landmarks.

6. Infinite ScrollAction - ScrollBehavior - User may scroll infinitely as long as there is content to fill the screen

UXDI Project 3: KindleSam VerdureAdeline FongDavid Cheong

UX Designer/Project ManagerUX DesignerUX Designer

1

2

3

4

5

6

03.05.00Reading Screen Left Navigation

Notes

1. LibraryAction - TapBehavior - Returns user to their main library. This link and all others remain the same as current Kindle app with the exception of item 2.

2. Kindle ConnectAction - TapBehavior - Link tap pushes to screen 03.01.00. Link is added to third menu line, pushing all other existing menu items down one row.

UXDI Project 3: KindleSam VerdureAdeline FongDavid Cheong

UX Designer/Project ManagerUX DesignerUX Designer

2

1

03.06.00Highlight Action

Notes:

1. Highlight InteractionBehavior - All aspects on screen look and behave same as current Kindle app.

2. Write NoteAction - TapBehavior - Native to Kindle app. Triggers screen 03.07.00

3. Share ButtonAction - TapBehavior - Native to Kindle app. Will now enable user the option to share highlight within their Kindle social network. Triggers screen 03.07.00

UXDI Project 3: Project NameSam VerdureAdeline FongDavid Cheong

Position Title.Position Title.Position Title.

1 2 3

03.07.00Send/Save Note

Notes: Helvetica Nueu Text

1. Create NoteBehavior - The ‘save note’ interaction and layout is identical to current native Kindle app with the addition of a share feature in item 3

2. Writing NoteAction - TypingBehavior - As user types their note via the keyboard the share & save buttons change from being inactive at 50% being active at 100% opacity 4. Share ButtonAction - TapBehavior - This buttom will push reader to screen 03.08.00

UXDI Project 3: Project NameSam VerdureAdeline FongDavid Cheong

Position Title.Position Title.Position Title.

2

3

1

03.08.00Sending note/ high light to Social Network

Notes:

1. Reading AreaBehavior - Kindle Reading text is grayed out

2. Modal Text TitleBehavior - Modal box is titled “Share Highlight Text” in small grey text according to the HIG 3. via Kindle ConnectAction - TapBehavior - This option connects reader to a list of recepients/readers from the Kindle native app. See screen 03.09.00

4. via EmailAction - Tap Behavior - User can email the highlighted quote via email. Exits user from the Kindle app.

5. via Message Action - TapBehavior - User can send the highlighted quote via text/SMS. Exits user from the Kinde app.

6. Cancel buttonAction - TapBehavior - Returns user to current book page

UXDI Project 3: Project NameSam VerdureAdeline FongDavid Cheong

Position Title.Position Title.Position Title.

1

2

3

4

5

6

1

3

2

4

5

9

03.09.00Send Highlight to…

Notes: Helvetica Nueu Text

1. Back Button Action - TapBehavior - Returns user to reading screen

2. Search BarAction - TypingBehavior - Tapping inside the search bar will trigger iOS keyboard. Searching will filter the friends list according to typed results.Size - Box 44 px

3. Group TitleText - Medium 14 pxBox size - 35 px

4. Group Recepients Action - TapBehavior - Tapping inside the box highlights it a different color and indicates the text will be sent to all members belonging to the book’s Kindle Connect groupText - Regular 14 pxBox size - 50 px

5. Individual Recepients Action - TapBehavior - Tapping inside the box highlights it a different color and indicates the text will be sent to an individual’s inbox within Kindle Connect. User may select as many recipients as they desire.Text - Medium 12 pxBox size - 50 px

6. Send Bar Action - TapBehavior - Sends the message, triggering screen 03.10.00 to confirm the user’s action.

UXDI Project 3: Project NameSam VerdureAdeline FongDavid Cheong

Position Title.Position Title.Position Title.

03.10.00High light Sent Comfirmation

Notes:

1. Confirmation IndicatorBehavior - Colored overlay confirming to user their previous action. Text will change according to action. (e.g. “Highlight sent!” or “Note saved!”) Overlay remains visible for 3 seconds or until user taps anywhere on screen. 2. Kindle Native Reading Page Behavior - Tap any part to the screen and the Highlight sent box will dissapper

1

2

UXDI Project 3: Project NameSam VerdureAdeline FongDavid Cheong

Position Title.Position Title.Position Title.