Amazon English
English learning app for the Japanese market with a focus on reading and listening comprehension of current news and various publication formats.
5 MIN READ
My Role
I was a UX/UI Designer in a large team of more than 10+ people comprising other Designers, Devs, QA Leads, and Project Managers.
We followed agile methodology by breaking the project down into different sprints. Through frequent video calls and daily scrums, we kept the design process on track.
DESIGN PHASE
- Analyze existing UX patterns
- Document UX changes in the iOS system
- Capture missing workflow and offer new design solutions for the iOS system
- Redesign the app in iOS standards
- Create interactive prototypes
DEVELOPMENT PHASE
- Create design specification
- Deliver assets and upload asset requirement specification
- Work with QA Lead to test the app and report bugs
ROLE
UX/UI Designer
CLIENT
Audible (Amazon)
TIMELINE
12-months project
COLLABORATION
Bin Wu, Aman Sagar, Audible Team
Design Context
Making a platform transition from Android to iOS often falls into the trap of a “screen swap”.
The Audible team consulted with us to rebuild their existing Amazon English app in iOS. The predesigned Android version needed to translate into the proper iOS design standard. The goal of this project was to make sure that the Amazon English mobile experience would be seamless on both platforms.
Design Challenge
How to design a product that fits each system's interaction patterns?
Breaking down the existing app and finding interchangeable UX patterns between operating systems were my design priorities. The challenge to translate the design of another mobile platform required a full understanding of the existing app workflow and limitations of the current platform.
Design Process
There are key differences between Android and iOS App Development. Google uses Material Design, and iOS follows Human Interface Guidelines by Apple. We wanted to make sure that the Amazon English iOS mobile experience seamlessly fits our predefined user interaction patterns. By discussing with the Audible design team during daily design ramp-up calls, we understood the overall functionality of the app and mapped out our design priorities for each sprint. We also travelled to Audible's head office in New Jersey to report our progress and solve any edge cases together. When working with a large design team consisting of more than 10 people, I found it important to document every design change thoroughly to avoid miscommunication later on.
1.
NAVIGATION PATTERNS ANALYSIS
Our first step was to analyze the navigation flow of the Android app before designing each iOS screen. For this project, we focused primarily on capturing differences in Android and iOS navigation patterns. For example, the tab bar on the Android version was placed at the top. But when translated to the iOS version, the tab bar was redesigned to be placed at the bottom according to the iOS standard.
2.
DROPDOWNS VS. ACTION SHEETS
In the Android version, sub-menu items were displayed either as a drop-down list or as a bottom sheet. In the iOS version, menu options related to the current context were presented using action sheets. Since the iOS mobile users already knew this interaction language, the transition was seamless. By utilizing this default iOS component, we also helped to reduce engineering overhead in constructing a custom component.
3.
A/B TESTING ON NAVIGATION FLOW
Users were required to rate the difficulty of every book after they reached the end of the titles. By incorporating each user feedback, the system generated a more tailored recommendation list, which we called the "end of book experience". As part of our efforts
4.
EDGE CASE SCENARIO
As much as we would like to keep both Android and iOS versions similar, some interactions were not as easily swappable between platforms. In Android, users could see a toast format for confirmation messages, but the feature was not available in iOS. For consistency with the Android version, the iOS version mimicked the toast format with a view format instead.
5.
DESIGN DOCUMENTATION
We documented all our iOS recommendations in a change log, which we discussed with Audible for approval prior to each feature implementation. This document provided a thorough overview of the iOS app workflow and captured all the edge cases. As a result, Audible's team could easily understand the limitations and differences between platforms.
New Navigation Flow
When we analyzed the user flow for Guided Learning, we discovered that the navigation flow from Reader -> Guided Learning -> Title Recommendations has multiple activity views on Android. Since presenting multiple modal views was not user-friendly and a problem with the iOS implementation, we introduced a linear navigation pattern to minimize user confusion when moving away from the first, second, or third recommendation.
Missing Design Suggestion
The search view and search results screen were missing empty state graphics during the first-time user experience. My suggestions were to include empty state graphics and to add recent search options.
Visual Design
Even though we followed the existing UI style guide and reused most of the visual design for consistency across the platforms, I still had to redesign several UI elements using iOS UI standards. For the Refine component, I used top nav buttons so the "clear refinement" button and "cancel" buttons are all part of the navbar. I also introduced the iOS picker to select different tests and score choices to avoid having a modal on top of each other.
Outcome
RELEASED BOTH iOS AND ANDROID BETA VERSION ON TIME
Amazon English released a beta version in the summer of 2016 on Amazon Japan's website. It was an invitation-only service targeted to collect user feedback to improve the user experience of the app. The iOS version successfully translated the Android version's design and feature behaviour in iOS design standards and helped to reduce the cost of building unnecessary custom designs.
RECEIVED USER APPRECIATION
Several Japanese users who tried using the Amazon English iOS version for two weeks reported that they were delighted with the app. One user commented that it was interesting to learn English in short and simple ways by listening to the news and articles. Most users were pleased with the dictionary feature and the word list feature.
RECOGNIZED BY LIGUISTIC EXPERTS
Amazon English was a learning method recommended by Professor Kensaku Yoshida, the Director of The Language Education and Research Centre at Sophia University and a member of the Ministry of Education committee on foreign language education. According to Professor Yoshida's words, "Reading while listening to Amazon English 15 minutes every day will aid users to acquire natural English. It would help to reduce anxiety for the English qualification exam and improve reading comprehension."
*Image sourced from Amazon Japan Website in 2016
Lessons Learned
Setting Reminder to Communicate
Since the Audible design team was in New Jersey, I was working remotely most of the time during the project span. While working remotely, I realized the importance of putting communication at the forefront of my day-to-day routine. It was easy to isolate yourself when working alone. A 10-minute ramp-up of the day helped me to keep in the loop with the team's progress. Thus, it's important to set a reminder to communicate with your fellow teammates in a different time zone and remember to speak up when needed.
Working Smarter by Prioritization
After working with a large team consisting of more than 10+ people locally and remotely, I began to grasp the trick of how to work smarter. Working "smarter" was not about being lazy and relying on others to deliver the tasks, but being more time-efficient and creating a structured schedule. For example, we timed our deliverables and prioritized tasks accordingly. We discussed the parameter of sprint deliverables with the Audible team beforehand and documented the features for sign-off. We managed to construct an iOS version that not only had a more efficient data structure but also ended up performing better than the existing Android implementation.
Selected Works
