Rakuten Kobo
Improving the digital reading experience
Rakuten Kobo and the german tolino merged to become the biggest competitor to Amazon Kindle and Audible. Both brands had their own e-reader and reading apps. Our main task was to evaluate the overall experience and merge 2 different digital products into one.
The biggest handicap is that we had teams in Japan, Canada, and Germany, which made collaboration tricky. We came with the idea to integrate a Design System to work seamlessly and consistently across teams.
My Role:
As Senior UX Designer I led the Design System team between September 2017 and February 2019 and collaborated with the Design teams from Tokyo and Toronto on improving the experience on the App and the Web reader.
In addition, I worked alongside the German Blinden Verband to create a product that helped visually impaired users to have a better reading experience.
*To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Rakuten.
Problem Statement
The first thing we had to tackle was to synchronize our work output. Having 3 different teams working on 3 different products meant having 3 different experiences. If our goal was to have 1 experience for all 3 products we had to create a pattern which we can follow to create new elements. We thought the best option would be to create a design system that included the rules and patterns of the new experience.
What are the benefits of a Design System?
If we think as if the elements of our app and website would be pieces of Lego, a design system would be like a bin full of Lego where we can pick out whatever piece we want to use without worrying if it fits. Why building the Image Slider or a Button over and over if we could reuse them in our working file? A Design System is also able to show utilization rules to our colleagues and Stakeholders, in this way it makes the work easier for all.
Clarity
Eliminates ambiguity. Enables people to see, understand, and act with confidence.
Consistency
Creates familiarity and strenghtens intuition by applying the same solution to the same problem.
Efficiency
Streamlines and optimizes workflows. intelligently anticipate need to help people work better, smarter, and faster.
Scaling the Design System
When multiple designers are working with the so-called "Single source of truth" introducing new elements to the System is something to handle with extreme care. We learned it the hard way. After weeks of scaling the System somebody deleted a "nested" element, we did not see the problem till more or less all the elements in the system were affected. So we had to start from scratch. To avoid such mistakes again we introduced a "Gate Keeper Team" and a Git system to keep track of updates and be able to switch back to a certain File date. This way if the design team comes with a new necessary component, UX and Front-End can control the new component and introduce it to the "Single source of truth"
Organization & Structure
When it comes to using the component library that is hosting thousands of components and rules we needed to add some time of organization and structure. We used Atomic Design principles for this process. Having Atoms being the smallest component such as Icons or Buttons, can be integrated into more complex components such as Navigation or Slider components creating so Molecules and Organisms. With Templates, we understand a complete section of the page or app for example the Header.
Design Thinking Workshop
Now that we had the Team synchronized we needed to find out what pieces of the app where performing good and which ones needed to be addressed. We did a design thinking workshop and found that many things required the implementation of new features to the app. Especially the Japanese market had special needs because they read from right to left, and the most common books are Mangas.
-I can’t tell what books are expiring.
-It’s hard to scroll through a list of 1000.
-I can’t drill down by order; publisher.
-It’s hard to group and see less things.
-It’s hard to manage my content.
-I can’t access series and volumes easily.
-I can’t remember title name to use search.
-I can’t refine by non-manga/manga.
-I can’t see prev or next vol on book details.
-I can find my last manga purchase easily.
-I can’t view segment of important attributes.
-I can’t continue where i left off easily.
-I can’t tell if i read this before.
-I made a mistake, this is not the right volume.
-I want to purchase other volume.
-I made a mistake and hit exit, bookmark is disrupted
User Testing
We conducted some user testing to explore potential solutions during the design process or test the waters during the product design cycle. But also to evaluate already existing products and take the results as a kickoff to improvement. Watching users try to accomplish tasks on the products is the most effective and efficient way to uncover usability problems that we might have.
Kick-off
After getting some insights from the research and the user tests we started writing user stories and JTBD and started looking for opportunities to meet the business goals of Rakuten and also improve the experience of the already existing customers.
Where we came from
Because we had 2 apps we got insights on things that were performing better on one then on the other, kinda like an A/B test. Our new app needed a reading experience such as an Audiobook experience. The Tolino app was focused more on reading and had no great Audio experience, while Kobo´s audiobook experience was great.
Main Card Tolino
The Progress bar shows in to small and is not understood by 50% of the users. Some of the batches are problematic depending on the colors of the book cover. The Bookmark Icon is not understood
Main Card Kobo
The idea kobo had was shown a consistent very present color UI throughout the app, the functionalities where not recognized by over 70% of the users. What was well received was the % information of the book progress.
List elements
In the tests we learned that users prefer list elements on smaller screens, while on wider screens they prefer to have adaptive item cards.
Recos & Navigation
Book recommendations where random items. The Navigation was overall better received then the Hamburger menu.
Starting from left 1. Tolino app home screen 2. Tolino book library 3. Kobo home screen 4. Kobo audiobook library
New UX
Working on the Keyscreens for the App we kept it simple but more informative. By introducing tags, the user now can see the status of his books. We also pursuit a scalable approach to the screen, having in mind that the code will be shared in the database, we had to keep it fully responsive.
We introduced a new feature for borrowing books and created a new tagging system to show the current status of the library items. We went with the bottom navigation and worked on the recommendations to display titles based on the user's library items.
We learned that users don't click on "Filters" instead they want to jump from single items to their collections. We let Authors in the design because we don't want to overwhelm existing customers with a new experience. but gradually we would get rid of the "Authors" folder.
We had the hypothesis that users would only switch from grid to list view once in a while, we later found out that was not the case and implemented an extra icon for that in the User interface. You can see it in the ready-designed screens underneath.
User Interface design
We played with the idea of having skeuomorphistic items to give them a touch of life inside the library. Users reacted very positive to this approach so we decided to keep it.
Responsive Components across the app
The idea of the big picture was to have one tech repository for development. So iOS, Android, and Web reader could work on the same database. Therefore the mission was to create fully responsive components in the Design system. We used mainly 3 Breakpoints across all components.
Tolino Webreader
The Web reader became some individual rules in terms of experience. We choosed a side menu instead of the bottom navigation and some other functions that differentiate from mobile usage to desktop usage. But the main components were rendered from the central tech repository.
The Impact
Positive results and much more to do
The redesign of the Tolino and Kobo app and merging the tech repository for all platforms has had a positive impact on the reading and listening experience. Besides offering a much faster usage due to the database update, customers were very pleased about the well-structured interface. There was a significant conversion win due to the quick buy from inside the sample books. However, the Japanese experience needs a re-adaptation to the land specific content (mostly Manga) and learned navigation patterns.