Storytel Redesigning the bookshelf with better filtering and collection feature Services: Concept Development, Product Development, UI Design, UX Design Brief The users of Storytel needed a better overview of their books in their bookshelf as they felt confused with the filtering options. Problem & Client Goal As a creative assignment as part of a recruitment process. Storytel were experiencing their users having issues when using the bookshelf in the app and decided it needed redesigning. The users were experiencing a lack of overview over their books in the bookshelf. Which were ongoing, finished and saved for reading later. Trying to use the filtering options they felt confused. As known user insights they had: A need for a place to find ongoing books A need for a place to find future books to read (a kind of watchlist for books) A need for a place to find finished books. A better way to get an overview of which books are available offline on the device. A possibility to make a custom reading list or collection of books in the bookshelf. Process In order to solve the problem, I chose to do a mini design sprint as I only had my sparetime to do it. With design sprints you can get from a problem to a tested solution in very short time. Usually you can do it in a week having the right persons onboard. I went through the following phases: Assess the sprint questions (look into user insights and problems) Understand the user journey Find inspiration Sketch ideas Sketch solution Prototype Test prototype I will go into details below – diving into both preparation, conceptualization and results. Concept Redesigning the bookshelf by making a better filtering option and adding a collection feature to better organize your books. Understanding the problem Starting of the process, I looked through the client brief which already contained som questions to be answered and furthermore valuable user insights: Sprint questions Should users be able to customize and personalize their bookshelf? Should we add more social features? Do the users still feel confused when they sort/filter? Do they have a good overview of what they’ve read? I chose to focus on the latter two marked in bold for the mini sprint having the timeframe in mind. Known user insights A need for a place to find ongoing books A need for a place to find future books to read (a kind of watchlist for books) A need for a place to find finished books. A better way to get an overview of which books are available offline on the device. A possibility to make a custom reading list or collection of books in the bookshelf. User journey To understand the user needs, I downloaded the Storytel app in order to identify the user journeys that had let to the needs. I quickly identified some areas to look into: As the users, I found the sorting and filtering in the bookshelf a little confusing. I found the navigation between areas as player, bookshelf and recommendations difficult and containing quite a few clicks. I lacked the opportunity to track the progress of an ongoing book in the bookshelf, without opening it up in the player. When starting as a new user, I would like some more clever recommendations based on my preferences or books in bookshelf to help adding more value in the app from the get-go. I also identified some other quirks, that I would like to hear more about which user needs the features are based on, as they didn’t give me enough or any value. In this category we have: The “bookshelf” is in the Danish version of the app translated to “boghylde”, which is a very direct translation of the English word. The correct translation would be “bogreol”. It resonates better with the Danish terminology used for libraries, books and reading to create better understanding for the Danish users. “X people are also listening to this right now” feature. It has a prominent placement in the player regarding the low value I got from it. Inspiration After I tried the Storytel app, I looked into your competitors to see if they had solved some of the user needs or observations. I looked at the following: Saxo Nextory Bookmate Furthermore, I found inspiration from Spotify, Playpilot and various concepts on Dribbble. Sketching After looking at inspiration, I started out sketching down ideas. Which later was my storyboard or wireframes for my prototype. Prototyping I’ve used Figma to prototype my concept. I did it for two reasons: Firstly, I wanted to try it out so I could compare it with my current tool combination Sketch/InVision. Secondly, I knew Figma was strong animation wise to better simulate a real user experience, so I wanted to try out how easy it was to use. My prototype is to be found here In the “Bookshelf you can sort and filter the books in various ways. In collections you can start a new collection and add books to it. Be aware that I only tested the “Bookshelf” part of it. “Collections” was made while the test was running. Testing Quite early in the process, I found it to be a good idea to A/B test current Storytel flows against my prototype flows. In that way I could answer the sprint questions regarding a better overview of different book states in the bookshelf and if the users were still confused when sorting/filtering books in the bookshelf. I decided to go with the tool Maze as I could make a short, moderated test, where I didn’t need to moderate it myself. In that way, the test could run itself for me, while I made the new addition of “collections” to the prototype. The test was conducted on 18 participants that participated online via a Maze link. The test consisted of two parts. First part was regarding my prototype and the second one the Storytel flow. The participants were presented identical tasks and follow-up questions in both parts. In that way, I could easily compare the results. Test setup The test was set up in this way: You’re looking at the bookshelf in an e-book/audiobook app. It’s showing the books you are reading right now. But now you want to show only the books you have decided to read in the future. The user then had to navigate the prototype to find the correct end screen. How easy was it to show only the books you have decided to read in the future? The user chose a customer effort score on a scale from 1 (very difficult) to 7 (very easy) Now you want to show only the books you have already finished in the past. How easy was it to show only the books you have already finished in the past? Now you want to show all the books in your bookshelf at once. How easy was it to show all the books you have in your bookshelf at once? Now you want to sort the books by author rather than by title. How easy was it to sort by author rather than title? You will view an image for a limited time. Try to understand what the image is about and remember as much information as you can. A screen of the bookshelf filtered with all books available was shown for 10 seconds. How many of the books were downloaded on your device? This question was used to determine how easy understandable the user interface itself are when trying to identify downloaded books. Test results Find books you will read in the future Misclick rate Storytel: 10.6% My prototype: 9.4% Customer effort score Storytel: 4.6/7 My prototype: 6.3/7 Find books you already have finished in the past Misclick rate Storytel: 17.5% My prototype: 6.7% Customer effort score Storytel: 5/7 My prototype: 6.8/7 Find all the books you have in your bookshelf Misclick rate Storytel: 6.7% My prototype: 3.3% Customer effort score Storytel: 4.7/7 My prototype: 6.8/7 Sort by author rather than title Misclick rate Storytel: 11.% My prototype: 0% Customer effort score Storytel: 5.6/7 My prototype: 6.3/7 10-second test: How many of the books were downloaded on your device? Current Storytel 11 out of 17 answered 3. My prototype 8 out of 15 answered 3. Conclusion In general, my prototype scored better in misclick rates and customer effort scores. From my perspective it’s interesting that the misclick rate fluctuates throughout the test for the current Storytel app, where it decreases throughout the test for my prototype. That indicates that the sorting/filtering currently is less intuitive as the user has to perform more clicks before reaching the goal. The Storytel app scored better in the 10-second test. A little bias is introduced as the users didn’t know the task and what to look for when testing my prototype as that was tested first. The second time they knew what to look for, but even though that fact, not all could spot that the green background equals downloaded books. In both cases it’s clear, that there’s a need for a filter to show downloads in the bookshelf, which I then have made in the prototype. All in all, I used an effective process to reach a better solution backed by data from both the current and proposed design of the bookshelf.