Amazon FTUE
A guided onboarding experience designed to help new users navigate the Amazon Manga Store.
UX Lead — Sebastien Chery
SE Intern — Michelle Chen
Background
Amazon Manga Japan underwent a brand marketing overhaul that included train station billboards and crossing ads in Shibuya, Tokyo. To support the influx of new potential users, I was tasked with designing a First-Time User Experience (FTUE) widget.
Situation
Implementing the designs presented several technical challenges, such as performance and adapting the widget for mobile and desktop. The widget also needed to support English and Japanese text, which added complexity as text sizes and layouts needed to be adjusted for different languages.
Tasks
- Mentor an SE intern on UX best practices.
- Design an engaging widget introducing new users.
- Address any performance constraints.
Action
Overview
At the start, I initiated an Alignment Workshop with key stakeholders, translators, and marketers. This workshop helped us align on business objectives, technical constraints, and UX.
We identified key engagement drivers for the widget, such as free products and first-time user promotions that would encourage users to stay within it. We discussed technical feasibility, ensuring how the widget would function across desktop and mobile. We also reviewed a competitive analysis, learning that competitors' FTUE widgets use a chevron symbol, often found on vehicles in Japan to signal a beginner driver.
After the workshop, I mocked the widget using stakeholders' insights to balance business priorities and usability. The stakeholders added that the widget should target only first-time or unauthenticated users to prevent disruption for returning customers. Thus, the solution to the widget's usability became a banner ingress to interactive onboarding cards designed to introduce only new users to the site's key features.
To create the prototype, I worked closely with translators and marketers to refine text, test string sizes, and ensure seamless messaging in English and Japanese. Since text expansion in Japanese could impact design, I collaborated to adjust layouts, ensuring readability while maintaining a responsive experience across languages.
Iterative Process
A sticky banner was decided as the ingress and an interactive modal for the onboarding flow. I refined variations of the solution through internal review cycles to optimize engagement, usability, and performance in preparation for A/B testing with first-time and unauthenticated cohorts.
First Iteration
High-fidelity mockups instead of wireframes were used to help visualize the direction to non-design stakeholders. In the first iteration of the sticky banner, I presented these variations :
A The ingress is in a fixed position. It cannot be closed.
B More content is visible in the viewport.
C The banner closes as the content scrolls.
D The banner is pinned to the bottom.
E A thinner banner is pinned to the bottom.
Second Iteration
Stakeholders continued with E as P0 for the second iteration. Options lowered to those presented here with stylistic options in the background as P1, P2, P3, etc., and not presented to the stakeholders to help direct a decision for P0 :
A Ingress is confined to the 'learn more' text as a link.
B Ingress is derived from Amazon's design system.
Third Iteration
Stakeholders continued with B as P0 for the third iteration. In this iteration, I added the onboarding card sequence. Stakeholder concerns about the card order impacting engagement were raised, particularly the risk of users dropping off before reaching high-value cards like free-reading demos or discounts. Through Journey Mapping, I proposed introducing store features first, followed by incentives, to build interest and drive retention for the demo and discount cards at the end of the onboarding sequence. This was the final order of the cards:
1 Discover New Titles
2 Sample Manga
3 Explore Indie Manga
4 Read for Free Demo
5 Discount
Results
For the prototype, I guided the intern toward a scalable and performance-optimized widget. We developed a single card package with conditional logic to maintain modularity, allowing the widget to adapt seamlessly between desktop and mobile. I helped integrate Amazon’s AUI carousel for swipe navigation on mobile and arrow-based navigation on desktop. Additionally, we implemented asynchronous loading to optimize performance, preventing the widget from negatively impacting page load times.