Kids+ mobile reader redesign

Help kids read more efficient on mobile device with Kids+ subscription.

巴扎嘿素材7_2x.png

Amazon Kids+

Amazon Kids+ is an all-in-one app for entertainment, fun, and educational content. Kids will have unlimited access to over 10,000 children’s movies, TV shows, books, and games tailored for children 3 – 12 years old. The mobile reader experiences foster their love of reading with thousands of children’s books, audiobooks, stories, and series. 

AmazonKids_Illustration_Scene_6_KitchenTable-01.png

My role

I designed the entire mobile reader experience until I left Amazon (2021 April - October). I mainly with PM, SDM on the scope of work, timeline, and deliverables for P0, P1, and P2. Proposed new mobile reader experiences and the new design helped to lift the app reviews and get design sign-off by all country managers and the legal team. Ran multiple comprehension studies to iterate and improve the core UI and advocate features for kids through study insights. 
Worked with 1 PM, 1 SDM, 1TPM, and 8 developers.

What I did

• Sprint facilitation
• A/B testing
• Usability study - Comprehension test
• ​Research coordination 
• Data analysis
• UI, UX, motion design
• Redlines with breakpoints and support with edge cases. 
• Excutive presentations
• Fostering relationships with partners, especially JP and EU country managers
• Collaberate with cross-function teams 

Impact

Positive in App/Android store reviews

Help lift Kids+ App in both the App and Android store reviews

+ 1.5% Kids+ subscription

With a strong increase of the Kids+ subscription coming through mobile post launch.

The challenge

• Prioritize and optimize the reading experiences for kids aged 5-12. 
• Ran in-person study with kids on the UI comprehension test in the short time frame. 
• Deal with downstream use cases, edge cases, and technical limitations. 
• Consider localization for 4 other locals

Where everything starts

“Peixin, we knew you are new to the team, but we need your help with the Kids+ reader design in two months because the dev team is waiting on UX and we are targeting launching at least P0 in about 4 months” - PM

Screen Shot 2021-10-11 at 10.44.06 PM.png
Screen Shot 2021-10-11 at 10.44.06 PM.png

When I joined the team, this project had a sense of urgency. The team lack of UX support for quite a long time. So I switch my focus from parent experiences to a new area - Kids+ mobile reading experiences.

“But why we are redesigning it?” - Peixin

• Since the existing mobile reader was released, 25% of our customer reviews mentioned the keyword “Book,” and the average rating for these reviews is 1.9 out of 5 stars, mainly due to the CX specifically; top complaints include lack of bookmarking and lack of reliable zoom capabilities, etc.

• Kids+ mobile app is the window for parents to have a peak view of Kids+ subscription services and the education aspect of the app is the most appealing feature compared to the other competitors on the market. But parents were disappointed by the poor reader CX and moved to other platforms. It is a real pain for the business.

• Since the mobile team needs to build the experience from the ground up rather than leverage Kindle CX, it is an excellent opportunity to advocate for our specific customers - kids and parents to create a simple, convenient, enjoyable reading experience. 

Review 1-1
Review 1-3
Review 1-2

Design goals

 Address the negative feedback about the reader CX, expected to raise review scores on both Android and IOS, and thereby indirectly lead to subscription growth. 
• Design the experiences for kids aged 5-12.
• Keep reader design consistent across the Amazon ecosystem. 
• Get design sign-off by all stakeholders and hand over design in two months. 

Previous Kids+ mobile reader VS Kindle adult mobile reader

Kids+ mobile reader

Kindle adult mobile reader

Unpack the live Kindle experiences and align on product road map

When the Kids edition table went out, it used the same structure from the Kindle app. So everything Kindle provides shows the same on Kids Edition Tablet. But when the tablet team launched the design, there was no study explicitly conducted for tablet reading experiences. We only know what features have better clicks on the tablet. Only copying and pasting everything on mobile won’t work because the Kindle experience is way more advanced for kids. I worked with my PM to list all features we need to introduce to the mobile reader and keep parity with the Kindle and Kids Edition Tablet.

Kindle Chrome Prod Chapter book.png

Kindle

KET_chrome_chapter-book_paginated.png

Kids Edition Tablet

Feature list.png

Core reading features:

• Page turn

• Pinch & Zoom on image

• Save reading progress

• Change font size

• Search keywords

• Bookmark & Notebook

• Read vertically

Bring kids convenience: 

• Heart to save (New)

• Go to the beginning (New)

• Back to the previous page

• Autosave location

• Table of content

Update to kids friendly UI

• Close button

• Overflow icon

• Bookmark & Notebook

• Lock orientation

The core features kids use most often will be prioritized for earlier release. Also, consult with the dev team on the scope of work to ensure we can release on time.

• P0 focusing on the core, most often used features like page turn, pinch and zoom, change font size, hamburger menu, save location, etc.
• P1 focusing on reading convenience and less tech-heavy but is being requested a lot from customers like sync across devices, Bookmark & Notebook guided view for manga books, back to, etc.
• P2 focusing on advanced features like Search keywords, highlight content, dictionary, integration with Alexa, etc.

NEW mobile reader

Once I locked down the P0 requirements, I started with a core reader chrome design. The structure dev must build first and sign off by all stakeholders as soon as possible. The design covered most of the core features we plan to support across P0, P1, and P2. It is essential to design toward the long-term rather than only considering P0 requirements. 

Core top chrome

Core bottom chrome

New reader chrome.png

Device orientation and reflow-able format

Device orientation and reflowable format.png

Pinch & Zoom

Pintch and zoom.png

Jump chapter

Through the hamburger menu, kids can jump into different chapters, go to the beginning of the book or read the details. 

ezgif.com-gif-maker (4).gif
ezgif.com-gif-maker (5).gif

Change the text sizes

Provide a wide range of font sizes for kids to choose from. Adjust the text size when it comes to the chapter book. This option won’t show up in the image book.

Bookmark & Notebook

Bookmark the page and revisit in the future through notebook.

ezgif.com-gif-maker (6).gif
ezgif.com-gif-maker (7).gif

Read by vertical scrolling

For chapter books, kids might like to read through vertical scrolling, and they can adjust it through the tools. 

Localize the experiences post the stakeholder review

Localize the text size variations for Japanese

"Aa" is the most often used symbol representing the text size for US customers, but the symbol should be localized using JP character for JP customers. The “あ” means the same in JP, but I only use one letter on the icon since JP doesn’t have capital and small letters. 

Customize text size icons for Japanese

Japanese.png
Localize the font.png

Choose the typeface for book rendering and in book UI

I encountered many problems when I chose the in-book UI and book rendering font. I reached out to the Kindle and JP design teams and was told that the UD Shin Go is the right font for the in-book UI, and the book rendering should be TBMincho. But when I worked with my dev team to see from the code, the in-book UI is TBGothic, but the JP country manager wanted me to stick with UD Shin Go. I researched the JP fonts and how each font is used. I also reached out to the JP shopping design team for a consultation. I found that the TBGothic is smaller than the UD Shin Go in the same text size. It is more consistent with Amazon Ember in terms of the text height and width. The TBGothis has better spacing compared to UD Shin Go. Also, for the JP design team, a smaller text size works better than a large text size. I convinced the JP manager to use TBGothic just like the Kindle does.

Choose the font for book.png
ezgif.com-gif-maker (2).gif
Buy Again V3 iphone.png
ezgif.com-gif-maker (3).gif
Buy Again V3 iphone.png

Kids comprehension study: age 7-12

With limited time, nobody expected to run any study before release. But these new features and the new UI elements I introduced to the page haven’t been tested with kids previously. So there is a risk if we roll out without testing and refinement. So I worked with an external agency to run the in-person comprehension test with older kids. The goal is to understand if kids understand the new features and UI elements.  

General insights

• Older kids respond to the icons better than younger kids.

• Kids have more experience reading on digital devices and have better recognition of the UI elements.

Testing site.png

In person comprehension test with kids

Insight 1: 

• Kids always misread the tools icon. 

Tweak the icon design and make it more familiar or straightforward for kids to understand.

 

• Kids misread the black heart as they hate the book. 

Bring the original red color to the heart icon once selected.

 

• Kids don’t know bookmark for a specific page and don’t make the connection between bookmark and notebook. 

Show the bookmark icon on the specific page and keep the color consistent. Use transition and color to help kids connect the bookmark and notebook.

Core chrome.png

Insight 2: 

Kids better understand the bookmark and table of content over device rotation.  

Prioritize features based on kids’ usage rather than the dev efforts with respect to the project timeline.  

During the research study, I found that kids generally don’t familiar with device orientation settings. But they were delighted to see that they can bookmark a page and see it being selected on the core top chrome. I think we should prioritize the features that have better comprehension by kids. So if kids don’t understand the feature, let’s drop it for P0 and focus on the parts that kids know better. Also, the bookmark was requested heavily on app store reviews. 

“Peixin, I knew the bookmark is critical and easy to understand by kids, but we can’t get it into P0 because the tech scope is way larger than the dropped feature - lock orientation. We should keep it for P1 for now.”

- SDM and PM

“I understood. What about the table of content? This feature was also straightforward for kids to understand, and kids expressed an interest in using it to jump locations in the book. Is it possible to prioritize it over lock orientation? ”

 

- Peixin

“Table of content is fairly easy. Let’s prioritize the table of content to P0.“

 

- SDM and PM

When the dev team was close to the end of the implementation, they ran into many dependency issues from other teams. These dependencies force the team to push the timeline to two months later. I brought up the bookmarked topic to the group and prioritized it to P0 with the additional time left. 

Post study chrome.png

Insight 3: 

In general, kids have difficulties understanding the icons and features newly introduced to the new reader. 

Provide tutorials to help kids and parents to understand the icons and the features. 

Design goals for the tutorial
• Let the visual speaks rather than the text
• Optimize for 5-8 years old kids
• Fewer steps and easy to get through
• Optimize the features that kids don’t have good comprehension

What features need additional education?
Adjust the text size
Bookmark and Notebook
Lock the device orientation
Switch to continuous view

Tutorial sketch.png

I did a lot of explorations about the visual style and the possible animations to provide better comprehension for kids. I consulted the Kids+ brand designer on the style guide and brand guide. Involved the Kids+ brand color and branding-specific lava shape in keeping the visual consistency across the entire Kids+ experience.  

ezgif.com-gif-maker.gif
Buy Again V3 iphone.png

Delivery the mocks and redlines to Dev team

What’s interesting about this project is making my design compatible with all types of devices, including mobile phones and tablets for Android and IOS. I need to design towards 3 breakpoints in code to cover the 4 major viewport sizes.:

SM < 414 < = MED < 678 < = LRG <800 < = XL

 

Mockups and Redlines are based on the above 4 viewport sizes:

• SM (Phone) - 360 by 640

• MED (Phone) - 414 by 896

• LRG (Tablet) - 768 by 1024

• XL (Large Tablets/Chromebooks) - 800 by 1280

View ports.png

Detail redlines and specs

Detail redlines and specs 1-1.png
Detail redlines and specs 1-2.png

Transition animation

Transition animation 1-2.png
Transition animation 1-1.png

Join dev daily standup and helped with edge cases

When it comes to design hand-off, I typically start to join the daily standup when implementation begins. I can stay on the same page during the implementation stage and ensure they get design support when technical limitations and edge cases arise. 

Storage problem

This is the first problem I discovered. Compared to storage size, the mobile experience has a lot of limitations, especially since parents use their mobile devices daily. So it is expected that customers might run into storage problems. With limited time, I need to develop a simple solution so parents can easily remove the downloads and free up their space. So I created this short-term solution that can free the space with an easy one tap, but a long-term solution will provide ways to delete content by size or content type.

Storeage problem.png
Download page.png

Book licence limites

The book license limits are very different depending on the contract Amazon Kids+ with each author. Usually, the license limit is between 4-12+. If Kids download from many other devices, they might run into the problem of downloading the book from the mobile device. So I need to consider the error message to tell kids or parents to remove the download from other devices.

Page turn too fast or fast swipping

For large-size books, the system won’t download the entire book cause it will take longer, and customers need to wait for the download to complete. So for these types of books, it only downloads for 30% and continuously downloads and renders the text as kids read more. But there is a possibility that kids swipe too fast, and the download can’t catch up with speed. I designed the alert message to notify the loading situation. 

Page turn.png

Round corner device and cutting notch

When it comes to all types of devices, the round cornor and cutting notch will affect the top and bottom chrome design. Core functions might get cut off. I worked with dev team to specify the design for each unique device to make sure all core features won’t be covered or cut off.

Round conor.png

Chrome shadow problem for Android

For the top chrome and bottom chrome, the implementation couldn’t match my design on the Android devices cause the shadow system work differently in IOS and Android. As the image is shown on the left, the bottom chrome is barely recognizable to kids. I worked with developers to develop the solution to make the bottom chrome look mostly symmetric compared to the top chrome by adding a border on the top and adjusting the CSS.  

Chrome shadow.png

Making it real

There are a lot of dependencies and challenges when implementing the design. Kudos to my excellent development team for making it real and helping me define so many edge cases. The design was launched around April 2021.
The new design has driven a 1.5% increase in Kids+ subscriptions.

Old Kids+ mobile reader

ezgif.com-gif-maker (2).gif
Buy Again V3 iphone.png

New Kids+ mobile reader

ezgif.com-gif-maker (1).gif
Buy Again V3 iphone.png

Few take-aways:

• Customer anecdotes worth a thousand words. Collecting quantitative data will help validate the design and convince the team on what changes need to be made to be more successful. 

• For a project like this, the significant challenges won’t just come from convincing the stakeholders or driving design alignment. Sometimes, it might come from the implementation. Be proactive and collaborative when working with developers and earn trust by helping them overcome all the technical difficulties. 

• Working with kids is a lot of fun cause they are the most collaborative, open-minded, and honest group of people. You will learn a ton by observing what they do and hearing what they say.  

• Designing for kids requires a lot of thinking and legal review cause we might touch on sensitive topics when coming up with new ideas. Just to remember, we provide tools rather than teaching parents about parenthood.