Case study: Redesigning the design process

The Electronic Book industry is rapidly evolving, with more and more people using electronic devices and gadgets to accomplish daily tasks. Reading books has also made its way to electronic devices such as mobile phones, tablets, and e-readers. The experience, however, is far from perfect and as my first attempt at product design, I was asked by my mentor to research a solution for lack of interest in eBooks (compared to print books) and implement it as an eBook reader for smartphones.

Interviews

I started researching users who were familiar with or already using eBook readers. I prepared for interview sessions with carefully constructed, open-ended, unbiased questions and a previously defined interview path. My goal in conducting interviews was to uncover user pain points that may have been unseen previously.

I interviewed eight people, took notes, and recorded answers to recheck later in the process.

Surveys

As I gathered enough qualitative information from the interviews to begin the design process, there was no need for questionnaires. I studied previously done surveys by the University of Malaya and Queensland University on eBooks for less crucial quantitative data.

Later in the process, however, I felt the need to gather quantitative data on how people use their eBook reader apps. I prepared a short 4-question survey asking attendants to answer a few short questions and upload a screenshot of their most-used e-book app.

This simple task provided useful information on what settings users often use to read digital text on their electronic devices. This information helped me avoid making a biased decision.

I divided the pain points information on an affinity board and used it to ideate solutions for each or a group of pain points. The main pain points users suffered from are as follows. For each

• Eye Strain: Users often suffer from eye strain after a long time of reading on electronic screens.
• Distractions: Users are often distracted on electronic devices by notifications and the tendency to check other apps.
• Feel: Book readers tend to like the feeling and the smell of paper which isn’t provided by the e-book.
• Sense of Achievement: Many readers enjoy gathering books on their shelves.
• Audiobook Control: Users who are distracted while listening to audiobooks mostly have to relisten to some parts of the book.

After figuring out what exactly keeps users from reading electronically, we started ideating to generate features to resolve each or a group of pain points. The introduced features are as follows:

Dark Mode

For eyestrain, several solutions were introduced. With AMOLED screens gaining popularity, and with their ability to completely turn off pixels for pure black, using an optimized dark mode would in theory emit less light to directly enter the eyes, hence having less strain on the eyes in the long term use.

Rest Prompt

Ophthalmologists suggest taking breaks while reading, using the 20–20–20 rule. This means looking away at something 20 feet away for 20 seconds after 20 minutes of focused reading. We implemented this as a rest prompt message to remind users of taking breaks to mitigate eye strain.

Matte Screen Overlays

As a personal experience, we found out that while reflecting less ambient light, matte screen protectors, convey a sense of roughness similar to that of paper that is absent in glass protectors. This can make the experience more similar to print books while reflecting less light and helping mitigate eye strain as well.

This could be implemented as a recommendation for savvy users, or as redeemable gifts for achievements to build loyalty.

Focus Mode

As previously mentioned by interviewed users, digital devices, especially smartphones, bombard users with notifications and prevent the focus required to read or listen to books. For this purpose, a focus mode is introduced to block unnecessary notifications.

Another attempt to help build the habit of reading longer for users was to award achievements for focused reading.

Sharable Library

To help resolve the users’ need for collections, either to brag about or to be enjoyed by the users themselves, I included a customizable library of books, divided into shelves, which could be shared with others.

Text Assistant for Audiobooks

Another pain point that had never been resolved in book reader apps was the way users (often distracted), had to inaccurately rewind or fast forward to a specific part of the audiobooks and were forced to listen to parts of it, over and over again.

This would be resolved by adding synced text to the audio player with the ability to select exact sentences to start playing from, enabling accurate rewinding or fast forwards for less hustle and a smoother experience.

User Flow

The first step towards building the actual product was to draw a general, high-level user flow. We excluded a lot of unnecessary side-flows and this flow map turned out to be an extremely simple, yet crucial piece of an asset to the process.

Red Routes

With almost every feature defined, I was able to create a red routes map, based on both user needs and business goals, making it easier for the information model to be laid out later on.

Information Architecture

I opted to use card sorting to visualize the data. This, however, didn’t turn out to be as accurate as I needed it to be, so I made modifications as needed. The final information map was something completely new — showing low-fidelity frames, built with reorderable cards and specific actions shown as well.

This eliminated the need for low-fidelity wireframes and turned out to be more productive, easier, and faster than the usual process.

Wireframes

The information models were accurate enough so didn’t need any low-fidelity frames. I started designing high-fidelity frames based on the information model frames and since the models defined sections, pages, and relations so accurately, the high-fidelity wireframes required no iteration going forward.

Design System

After defining styles, each component for the design system was built based on hi-fi wireframes which themselves represented a single card in the IA models. Components were designed based on Google’s material 2 guidelines for easier implementation.

A visual showcase of the final product can be seen on Behance.

While this project took a long time to complete, it ended up being the most diverse product design process in the early years of my career since I chose to design every single detail for this project — including icons, illustrations, etc.

The research was self-funded and not limited by any company priorities, such as time or budget, and I was able to spend more time uncovering deeply underlying pain points and resolving them with creative solutions.

The design process was also intriguing since I had the freedom to bend the process, skip steps, and overwork aspects as needed. This taught me that for the design process to work its magic, it needs to be designed to match the problem first.