liveBook

Providing A Streamlined Way to Learn

After seeing that liveBook was starting to pick up traction, I decided to take the time to figure out what was currently working for the readers and what wasn’t.

Looking at Feedback and Heatmaps

I started with the question, “What does liveBook mean to the user?”. Overall, the feedback was positive. The readers loved how they could begin to read their book instantly without any need to wait for a physical copy or download to their e-reader device. There were a few key details people wanted to see, though.

1. An app to read on the go
2. A lack of clarity regarding navigation and a lack of feature usage

Testing the Reader

With the details listed above in my mind, I wanted to dig deeper. I wanted to test potential liveBook readers, so I reached out to a group of developers. I gave them this prompt:

Imagine you are looking to learn more about Javascript. You find this book online and begin to read.

After they navigated to the liveBook, I watched the reader silently as they navigated through a book. What was apparent with every tester right off the bat was that they did not know what all the icons meant in the top navigation bar. They spent a significant amount of time hovering over the icons and clicking without reading. Tester, after tester, presented confusion with the many icons in the header.Distraction became the basis for the entire testing exercise.

Adding Download Features

Priority number one was adding the download feature to an existing app that the development team had already started. With distraction in mind from testing, I knew I needed to do one thing through the entire redesign process.

Keep distractions minimal. Please keep it simple.

I needed to break the action of download it into its purest form. I started by sketching out possible buttons.

Narrowing Down

Once designing many options, the team and I were able to narrow it down to a simple circular button with icons.

Tackling the Navigation. OOF…

I knew tackling the navigation would be an exciting yet challenging task. Again I kept the idea of distraction-free in my mind at all times. There was a balance I had to learn and understand. The user vs. the companies goals with new features. Some key questions I asked myself were:

• What were the critical components of the entire platform?
• How could we combine these features?
• Could some of the functionality move from the navigation to other areas of the app?

Grouping the Essentials

A few essential items were vital such as search and the table of contents. I started playing with different icon variations. Each time I made a variation, I asked myself, “how could I edit this down some more?” How could I minimize distractions?

The Original

The Final Navigation

I drastically changed the navigation. Instead of 13 icons in the navigation, liveBook now had 4. Community and discussions, bookmarks, and resources were moved to the slide-out navigation in prominent positions. In contrast, help was moved to settings, and audio was moved to the bottom of the page. The cart was removed, and a one-click buy option was enabled.

Final Thoughts

The download cards and navigation were approved and moved to development. There are still many tweaks and edits that are needed on production. A new way to navigate the community is much needed as well as changes to the notebook and audio. I expect ongoing changes and iteration based on testing when the project is complete.