Kindle X-Ray
Amazon Kindle
At-a-glance overview of key concepts in the book
PROBLEM:
How can we help readers keep track of various story elements, including characters, locations, and terms, especially in lengthy novels or books with intricate plotlines, or in non-fiction books?
X-Ray a book - create a reference tool that will provide definitions and references for anything mentioned on the page
SOLUTION:
What is Kindle X-Ray?
Kindle X-Ray is a visual summary of a book. It displays definitions of characters, locations, and terms. It provides readers with a deeper understanding of the content by offering contextual information about characters, terms, and concepts within a book. It is also shows locations where characters, locations, and terms are mentioned. It is especially useful for referencing concepts and ideas within non-fiction books, or for looking up character details in long multi-volume fiction books such as Game of Thrones.
My Role:
SVP of Kindle asked me to explore ways to "X-Ray" a text and display the "bones" of the book - key concepts and ideas visually
I defined the requirements, created and iterated on UX until we reached executive sign-off and alignment with other Kindle teams
Collaborated with PM and Dev to get the feature built and shipped to customers
CHALLENGE:
Create an "X-Ray" view of a book that will allow readers to see the "bones" of the text - to see the structure of the text - key concepts, characters, and ideas
I imagined a "magic" physical book. If you ask it a question, the edges of pages that contain relevant information turn black. This is how the X-Ray Strip was created.
INSPIRATION:
DESIGN PROCESS:
1. Developed the original design concept
VP of Kindle described his vision of a tool that would enable customers to "X-Ray" a book to see its bones. From that description, I created the entire experience, including the X-Ray Strip, working as a a PM and UX designer
2. Created new patterns for the emerging E-Ink technology
Designing for E-Ink is very diffeent from designing for standard devices. At the time, At the time, E-Ink technology was just starting to develop, andThere were no defined rules or patterns, and a lot of interactions have to be discovered via trial and error
3. Designed additional Kindle features
I also designed Table of Contents and Before you go pages. This work focused on creating new patterns that would be used throughout the device as E-Ink technology evolves and functionality gets more complex over time.
4. Communicated the big picture across teams
As more features were getting added to Kindle across the org, the next challenge was to determine how everything will work and interact together, and to communicate the big picture across teams. I addressed this need by creating an Interactive Flowchart.
5. Evolved the design and translated it to other devices
Working on early versions of an E-Ink device placed a lot of limitations on what could be done, but as E-Ink technology evolved, and X-Ray functionality was extended to standard devices, I was able to evolve the design to make it rich, modern, and interactive.
UX & FUNCTIONALITY
In a Customer-Centered Design Process, I usually define problems to solve and desired customer outcomes before starting design work. However, this project was different because is started as a vision of a new type of functionality rather than a solution to a specific problem, and so these outcomes surfaced and were refined during the design process.
-
Character, location & Terms definitions & insights
-
Visualization of references throughout the book
-
Access to supplemental information on Wikipedia
-
List of references for each concept
-
Ability to filter type if information shown
FUNCTIONALITY:
Navigation
.png)
.png)
Entry Point
Detail View
Home
.png)
Entry point is located on the main menu at the top of any page. X-Ray will show concepts for that page
X-Ray cope can be changed from current page to current chapter or entire book. The strip next to each concept shows all places in the book where it is referenced
Detail view contains the definition of the character, term, or location, and a list of all the references to it from the book, starting at the current reading location
The X-Ray Strip
.png)
On the home page, the strip functions as a frequency and location indicator for each concept throughout the book. On the detail page, the horizontal line on the X-Ray Strip scrolls horizontally across the strip as the reader scrolls vertically through the mentions to indicate where in the book the currently shown mentions are located
Spoilers Guard
.png)
For fiction books, the X-Ray strip could reveal spoilers - if a character died later in the book, you would be able to tell by the abcense of lines on the x-ray strip, and so I designed a "Spoiler Guard" that would hide the X-Ray strip past you current reading location. This functionality could be turned on or off by the reader for each book
DESIGNING FOR E-INK
Designing for Kindle E-Ink is very different from designing for other devices because of E-Ink display technology is limited and does not allow the same richness of interactions as regular devices. It requires understanding of unique characteristics and limitations of E-Ink Technology
CHALLENGE:
Create an awesome experience using developing technology on a device with unique parameters that restrict what can be implemented
SOLUTION:
-
Understand what can and cannot be done e-ink
-
Collaborate with engineers to verify design proposal and adjust functionality to fit within constrains of the device
-
Adopt best practices from other devices but adjust and simplify to make them work for E-Ink
-
"Less is more" - simplify as much as possible
E-INK DESIGN CONSIDERATIONS:
-
Slower refresh rates that affect transitions and scrolling
-
Limited color patterns as only grayscale is supported
-
Slower touch-screen interaction patterns limit what can be implemented
-
Reading-centered focus makes layout and typography especially important
-
Varying device form factors require adapting designs to different layouts
-
Performance considerations shift design focus to clarity and simplicity
-
Customer expectations require customizations to font sizes and contrast
ADDITIONAL KINDLE FEATURES
While working on Kindle, I also designed Table of Contents and Before you go pages. This work focused on creating new patterns that would be used throughout the device as E-Ink technology evolves and functionality gets more complex over time.
.png)
Table of Contents
Before You Go...
Expendable sections match hierarchical structure of data
Makes it easier to take the next logical step after finishing a book
PUTTING IT ALL TOGETHER
As more features were getting added to Kindle across the org, the next challenge was to determine how everything will work and interact together, and to communicate it to all teams that were working on different software and hardware components. I needed to insure that everyone had a clear understanding of the big picture and a cohesive vision of how everything fits together.
.png)
CHALLENGE:
Integrate new and existing functionality, maintain consistent visual language, and align UX patters across teams?
INSPIRATION:
An interactive map that shows you exactly where you are and where you want to go, and gets updated as you change your location
An interactive flowchart coupled to an interactive prototype
SOLUTION:
Interactive Flowchart & Prototype
.png)
Flowchart
Flowchart shows navigation and flows for the key Kindle features and makes it easy to see at a glance how all functionality works together. Clicking on flowchart components updates the prototype so that you can see what that feature looks like and how it works
Prototype
Each click that navigated the prototype was also updated the flowchart which showed where current feature fits in with the rest of the Kindle functionality
DESIGNING ACROSS DEVICES
The next step was to make X-Ray available on other hand-held devices. Working on early versions of an E-Ink device placed a lot of limitations on what could be done, but now, working with devices that did not have E-Ink limitations, I was able to expand and evolve functionality by making it more robust and interactive. A key challenge in this process was understanding design and navigation patterns of each device, and adjusting the UX to make it work seamlessly in each setting
Translate Kindle functionality on all handheld devices, adjusting the UX for the patterns specific to each device
Get familiar and comfortable using each device
GOAL:
PROCESS:
Carefully study patterns, navigation, and visual language of each device
Create specs or each device and work with devs to ensure pixel-perfect implementation
.png)
Kindle Fire
For Kindle Fire, I worked with designers across multiple teams to understand device visual language, navigation and UX patterns, and generate a design that seamlessly fits into its new environment. I also extended functionality by adding icons and key definitions to the home page, tabs, and as a splash of color to the X-Ray Strip.
.png)
Android
The biggest challenge for designing for Android was its navigation. Unlike IOS, The Nav bar was always visible within the app, and I had to ensure that navigation within the app was consistent with build-in behavior. On Kindle and IOS, the detail page had a back button, but on Android, I replaced it with a "close" button to avoid redundant controls. Kindle Fire uses Android IOS, so there were a lot of similarities between layouts on these devices.
.png)
IOS
Designing for IOS allowed me to make the interactions more seamless by using the horizontal swipe gesture to change filters, vertical scrolling to switch between page, chapter and book views of terms. I also added UX enhancements such as term highlights, current location, and current mentions overlay
.png)
Amazon Fire Phone
The Fire Phone was developed and released by Amazon in 2014. Its key differentiator is a 3D perspective display, which created new design challenges for porting X-Ray functionality. I modified the UX to use visual language developed by the Fire Phone design team, and added 3D effects where it made sense to stay consistent with the device theme
Impact
The design of the X-Ray strip, landing and detail pages was granted 12 patents and publications.
UX concepts and patterns were adopted by Amazon Video team, who implemented XRay for Videos to display character and actor information for streaming shows.
.png)
ORG IMPACT:
CUSTOMER IMPACT:
-
Increased Kindle usage in academia and education
-
Created new use cases as study aids and research tools
-
Enhanced engagement from authors
-
Established new UX patterns for E-Ink screens
-
Set a new bar for innovation within reading industry
-
Functionality & patterns adopted by Video team