top of page

Kindle X-Ray

Amazon Kindle

At-a-glance overview of key concepts in the book

Frame 109.png


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


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


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.


whereslugo-gbJYf-XhNwk-unsplash 2.png
mathew-schwartz-7OHXqcsyVYU-unsplash 1.png



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

jamie-templeton-6gQjPGx1uQw-unsplash 1.png

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 

kelly-sikkema-ml1IgjV8OvY-unsplash 1.png

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. 



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.

ugur-akdemir-XT-o5O458as-unsplash 1.png
sandy-millar-Kl4LNdg6on4-unsplash 1.png
  •  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



navigation (8).png
navigation (8).png

Entry Point

Detail View


navigation (8).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

Group 2660 (3).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

Group 2661 (3).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

jamie-templeton-6gQjPGx1uQw-unsplash 1.png


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


Create an awesome experience using developing technology on a device with unique parameters that restrict what can be implemented

k8--rroXsdBKzU-unsplash 1.png
frank-holleman-VEoUWF2iQlQ-unsplash 1.png


  • 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


  •  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

kelly-sikkema-ml1IgjV8OvY-unsplash 1.png


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. 

aditional functionality (3).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 


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.

jose-martin-ramirez-carrasco-yhNVwsKTSaI-unsplash 1 (1).png


Integrate new and existing functionality, maintain consistent visual language, and align UX patters across teams?


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


Interactive Flowchart & Prototype

aditional functionality (2).png


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


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



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

ant-rozetsky-SOLzyQvindY-unsplash 1.png

Translate Kindle functionality on all handheld devices, adjusting the UX for the patterns specific to each device

Get familiar and comfortable using each device



Carefully study patterns, navigation, and visual language of each device

Create specs or each device and work with devs to ensure pixel-perfect implementation

kindle fire (2).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.

android (3).png


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.

ios (5).png


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

fire phone (2).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


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.

stephanie-harvey-sTgmxWNK9rY-unsplash 1 (1).png



  • 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

bottom of page