How could I bridge a gap between the digital and print reading experience

Talayeh Dehghani
Bootcamp
Published in
9 min readAug 16, 2021

--

The Challenge

Maybe you’ve heard this statement several times “ I prefer print books but I need digital one too”. How can I build a bridge between user preference and functionality? How can I connect print books to digital materials?

_ _Talayeh

using AR to connect print and digital books

The most frequent readers are those who read both print books and digital materials (e-books, digital texts, web pages …). Lifestyle factors contribute significantly to the choice between digital materials and print books. For example, people overwhelmingly prefer print books over e-books and digital materials in certain situations, such as reading to a child and sharing books with other people. Digital materials are preferred in other situations, such as needing to get a book quickly and reading books while on the move. Ease of access and the increasing selection of materials are other reasons why many people need the newer media, unlike their preference. Clearly, at this point, digital materials and print books provide unique functions in different reading situations. In this study, I have tried to bridge a gap between the digital and print reading experience by developing an application that uses paper as a source to interact with digital materials.

Product vision and solution

As a UX Researcher, I knew we needed to find out what our user’s reading habits were. So we worked closely with users to construct a mental model to map these habits.

Diary studies

The project started with diary studies. 25 users including students, lecturers, book readers, specialists were invited to do diary studies.

Diary study is a research method to collect qualitative data about user behaviors, activities, habits, and experiences over time. Data was self_reported by participants over few days. During the reporting period, some cards including questions were given to study participants by miroboard and they were asked on a daily basis to keep a diary and log specific information about study habits, reading habits, sharing information, book review and etc… cards included 4 categories of questions:

Habits: What time of the day do users engage with digital and print books? if and how users choose to share content with others?

Usage scenarios: what are the user’s primary tasks? what are their workflows for completing longer-term tasks?

Attitudes and motivations: what motivates people to perform specific tasks? how are users feeling and thinking?

Diary study mathod

Affinity diagram

an affinity diagram is used to organize data gathered from diary sessions to see the patterns in what’s been discussed and it helps identify potential solutions to problems.

this method was used in this project as it simplifies analyzing complex data by grouping them, which helps bring out connections among research data and identify patterns. So, the information gathered from the diary studies session was written down on separate cards on miro board. Then, we reviewed the cards while looking for similarities or whether they were related to each other in some way. Based on the similarities we identified, we came up with header names for each group that conveyed the relationship between the information in a single word or phrase. Then we started writing the problem statement and touchpoints at the top of the diagram.

Affinity diagram

Persona & Empathy map

based on information analyzed in the affinity diagram, user persona and empathy map developed to prioritize users need and goals in order to generate all the necessary features.

A user persona is an archetype that represents a group of users based on their behaviors, goals, motivations, and pain points. Data shown in persona covered a rich array of variables user’s reading habits in terms of reading frequency and quantity for various purposes, including work or school, pleasure, to keep up to date, and to research specific topics of interest.

Persona

to captures knowledge about a user’s behaviors and attitudes, an empathy map was used. To create an empathy map, we tried to see with the user’s eyes the possible problems that the product can solve. We reviewed cards in the affinity diagram and when it was necessary, we made second interviews with the primary participants. It helps designers break biases and stereotypes about user’s behaviors and attitudes. The empathy map includes four sections: thinking and feeling, seeing, hearing, saying.

Empathy map

Journey mapping

Empathy map takes the designer from a flat view of a persona and completes it with all the dimensions of pain points, inefficiencies, points of confusion, and other opportunities that are revealed in the user journey. We defined 4 personas, therefore 4 user journeys showed different scenarios focusing on how persona can interact with the product in a particular context to achieve their goals. The aim was to map out all the possible routes to an experience for connecting digital information with print books and highlighted opportunity areas we could then work on later. Journey mapping helps designers identify the steps in the customer’s flow and where the pain points and opportunities exist.

User journey

Defining the MVP

conducted research and sketching sessions used to map out the user flow and come up with a storyboard to capture the MVP. We identified the following key features:

  • Goal definition. Create a collaborative library platform where all educators, learners, and book readers can collaborate and annotating print books with digital data and self-generated material (podcast, video, pdf,…).
  • List of recommendations This broad platform of working, learning and pleasure is supported by augmented reality.
  • Connecting with providers. If you point your camera at any page of the book, by the means of this application you can have access to digital-related information and all documents added by others (educators, specialists, students, and artists…) and you also can add the content of your own. So while you are reading a print book, you can easily access digital information related to that book just by this application.
  • Tracking of development. View your progress over time to see how you are tracking towards your goal.

We mocked up the main screens for the MVP based on the sketches and came up with the following:

  • Login screen
  • Category page
  • Home page
  • Integrative discovery engine
  • Add material page
  • Profile page and progress dashboard

Design and Development

I did some mockups of the basic user journey before going over it with the desired styling. I opted for a minimal look and the simplicity of the UI. Then, I created for the developers a clickable prototype in Figma.

Always Category Matters

By signing into co-library application, you are asked to pick up your favorite genera like other book application but the main difference is that when it comes to selecting a great book, we don’t discriminate here at co-library. our approach to finding an exciting page-turner is to have an open mind. when you’re a major reader, it’s easy to get stuck in an endless array of genres. To answer this question, we have listed — and defined — the most popular life area that people engaged in and enjoy most: 12 categories Like travel, art, food, music, environment, engineering, …etc.

Sign in and Category pages

Prevent information overload

all categories are shown on the home page. But there is not only book inside but also boards where all material (videos, audios, texts) about a book or specific topic is collected. You can choose to search among books or among boards. Boards are where you save, collect, and organize materials of the similar topic and books together. Creating boards prevent users to get confused and avoid overloading information. Co-library is an integrative discovery engine for finding different material about a specific book or topic. you’ll always find user -generate texts, videos, audios about books you are looking for…

All materials are organized by “recommended” option that show you results based on your search, or you can choose “recent option” to have recently added materials. Before you open the board, you can read the board description first and then decide if this board suits your purpose or not. It is really time saving. You even can edit, create and share your board to pave the way for other users to find the best result in shortest time you can invite your friends and users to this board to ask them collaborate with you in gathering information…

home page

integrative discovery engine

The way that you search inside this platform is different from other engine. if you are looking for a book or a single keyword, you can choose an ordinary engine and look for it. Another option is when you look for three related keywords. this engine filters all material based on these keywords, So you active keyword engine bottom and then generate a board that is offered by co library. This board suggest you to read this text, watch this video and listen to this podcast to dive into the keywords. Besides, you can filter engine search and limit it to audio, video or text or any materials you want.

Integrative discovery engine

Profile page

Profile page includes 3 parts. First part is attachments where you can see digital materials (pdfs, image, audio, videos) related to any books. Information about books are visually presented and before you search inside the file, you can read file explanation to know if it is useful for you or not. If the attachment is image, you can directly add your text into it. If the file is video or audio. first of all, you can read file description and then decide to open it. by opening it you can have access to like and comments about this file and have a free discussion with other users. You can watch video or listen to a podcast generated by others for books. The second part is note. Based on our research, it is a must for book readers to leave a note or highlight part of a text about a book. By adding note to each book, you can easily get access to them online. You can choose if your note is private or is visible for other users too. The third part is save files. Any material or any board you save goes into this part. If your boards are visible, other users can see them and enjoy. besides, you can edit your personal information through profile page.

Profile page

Add materials

as we said it is a platform for user generated information. To add materials into a book. You should just go through some steps

  • Choose new book
  • Add book cover like the video.
  • Next, add book information, invite your friends to collaborate with you, choose a category
  • · Then add any self-generated material. (do not forget to add a short explanation)
  • · Add a note if you like (public it or keep it private)
  • Share this book to the platform.

you also can add a board, you can invite your friends to collaborate with you, make a description keep board secret or public and then share it. Board will appear on your save part.

How to add 3d materials to print books

File explanation

If you search for a book and go to its folder. You can check book information. It shows you three categories: text, audio, video. You can check the explanation of any material uploaded for this book and then use. You can check comments and likes for any materials. Besides you can add your own materials (pdf, text, audio, video) to this book. You can even add your note about this book and make it public or private.

Show 3d materials( Audio, pdf, videos) attached to a book

Development

Figma used to allow the engineers to inspect the HTML and CSS of the designs. The team used Glitch to develop the application. It is soon accessible via the iOS app.

prototype sample

https://www.behance.net/gallery/132657221/Avoid-overloaing-information

I’ like to hear from you. Say hello at talayeh.dehghanighotbabai@students.fhnw.chor connect on Linkedin

--

--

UX designer whose career was founded with a curiosity around how a better understanding of the human mind and behavior will lead to the better design.