A flexible reading platform to effortlessly switch between reading a book and listening to it.
Overview
Problem
The nature of reading books has changed a lot since the introduction of virtual readers like Kindle and Audible. These methods of reading books allow readers to consume books while on their couch or driving their car. Starting a book as an audiobook and the author describing a graph or photo that is in the Kindle or hardback version can be frustrating. Being able to switch between an Audiobook and a digital version of the book would allow readers to have the flexibility of consuming the book in a way that works well with a busy lifestyle.
Solution
After researching, exploring solutions, testing solutions, and reiterating, I crafted a platform to let users seamlessly switch between reading a book and listening to the same book.
My Role
UI/UX Designer, Researcher, Usability Tester
Tools
Sketch, Marvel, Figma, Miro, Coolors, Google Forms, Google Docs, Procreate, Zoom
Process
My process was to utilize the core stages of design thinking: Empathize, Define, Ideate, Prototype, Test. I reiterated this process several times.
Empathize
I conducted research to empathize with users in the space and learn what they are really struggling with.
Survey
To screen potential interviewees, I created a Screener Survey and sent it out to my network to find users between 25 and 60, who use web and mobile services regularly (3+ times a week), and read books and audiobooks regularly (2+ times a week).
User Interviews
Once I collected enough user surveys, I narrowed it down to 4 users to understand their pain points and behavior toward consuming books.
Affinity Mapping
After conducting interviews, I wanted to take a look at the overlapping information from each person. I synthesized the key information into the following affinity map:
Refining the Problem Statement
After my research and deep-dive discovery into the potential users of Flexreads, I wanted to make sure I was clearly articulating the problem(s) I was trying to solve. I framed these in 4 "How Might We..." statements before I went any further into crafting a solution.
What causes a user to not finish a book?
What do people like about reading a book versus listening to an audiobook?
How much do people most commonly spend on books and audiobooks?
Are users curious about having both an audio and readable version of a book?
Define & Ideate
My next phase of this project was to brainstorm solutions to the problem based on my research and How We Might Problem Statements.
User Flows
Thinking of the user stories, I thought about the routes that users might take to achieve specific goals in the app. I crafted essential routes – or red routes – to outline this.
Sketching
Sketching was the next part of my process to quickly get my ideas down before creating an in-depth prototype. My goal was to be able to get a low-fidelity version of my ideas down so I could test them first.
Guerilla Usability Testing
To get initial feedback on my ideas, I employed the method of Guerilla Usability Testing. My goal was to quickly learn what users liked, disliked, and struggled with in order to further my ideas.
I conducted the test with 5 friends and family members. I recruited them by explaining I was working on a project for school and if they could give me a few minutes of their time for feedback it would help me a lot.
Findings & Recommendations The usability testing was extremely interesting and provided me with a lot of insight. I discovered a few areas that needed improvement and got some ideas on how to further the platform. There was some confusion on how to access the bookshelf, how to actually flip between the audio and reading version, and some confusion on search boxes. I think the simplicity of the set up helped the users easily understand the purpose of the app overall. I definitely think doing another round of testing would be helpful after I make some design tweaks and build things out a bit more.
Style Guide
Crafting a visual style that will resonate with users was my next step in the process. I wanted a clean, streamlined feel for the branding. The name “Flexreads” feels straightforward, flexible, and to the point which embodies how essential a streamlined experience is for the user base.
Prototype
High Fidelity Mockups
Creating a fleshed out version of the app after establishing the style guide was the next step in my process. My goal was to create an engaging, accessible, and inclusive design that solved the user problems. To create the best user experience possible, there were two versions of the high fidelity mockups. There were not any huge tweaks done between the two versions of the overall design, but minor UI changes uncovered from usability testing were the changes done to Version 2. Version 1
Version 2
Testing
Throughout each version of the high fidelity prototype, I employed user testing to get feedback. I wanted to figure out what would work and what needed improvement in my designs. Some of the feedback was more casual in nature from mentors and colleagues, but two official rounds of Usability Testing were employed.
Usability Testing
For the two “official” rounds of Usability Testing I conducted, I wanted to see if users understood how to do key tasks: (1) searching for a book by genre, (2) exploring books for purchase, (3) purchasing a book, (4) playing a book, (5) toggling from playing a book to reading a book.
In the first round of testing, there was some confusion on how to actually purchase a book, how to flip between the audio and reading versions of a book, and the bookshelf accessibility. As a whole, users had a pretty easy flow through the app and using it. I made minor tweaks to the UI after this test and did another round of testing.
The second round of testing came with more detailed feedback. My biggest takeaway was that in future iterations of the app I should create a “Getting Started” guide to explain the core functions like: how to flip between the audio version and read version of a book. I also gained some valuable feedback on the purchase page that I need to explain if all books will have both versions automatically purchased or if users will have the opportunity to do just one or the other.
Reflections and Next Steps
Working on variations of this app and employing user testing throughout helped tremendously. Users didn't have a lot of issues with my final prototype but did have suggestions on how to further the idea of the app. If I were to further the app, there are some ideas I would explore including:
A getting started guide
A way to click through to reviews of books
Book recommendations based on previous reading
Profile stats on how much a user has read and listened to books over the last week, month, etc.