Autofill

Phase I: Adapting Autofill for the Japanese Market

Summary

Goal

To adapt the Autofill feature from Rakuten Rewards for the Japanese iOS app while ensuring compliance with Japanese laws and optimising for Japanese user behaviours and expectations. The goal was to reduce friction in the checkout process by eliminating the need for users to manually enter their information.

Challenge

The Japanese e-commerce market and user behaviour differ significantly from the US market, so a direct copy would not work. Our task was to adapt, localise and refine the feature to fit Japanese users.

My Role

I joined the project in January 2023 as the lead UX/UI Designer in its early stages. My responsibilities included:

Conducting research and user analysis
Localizing and adapting the feature for Japanese users
Designing and iterating UI/UX solutions to improve usability
Holistic UX/UI design

Outcome

Of the users who accessed the onboarding screen, 40% agreed to use Autofill
During the checkout process, when the Autofill tray was displayed, 90% of users chose to use Autofill
Reduced friction, but data loss after logout or app deletion limited persistence. Low adoption (2%) led to Phase II

Approach

Discover

I began by aligning with key stakeholders (PM, engineers, legal, and management) to define goals and constraints. To ensure timely delivery, we structured the project into milestones using JIRA.

For research, I started by studying the US implementation, as the Japanese e-commerce landscape and user behaviour differ significantly from the US market. I analyzed their flow, identifying areas where Japan might require a different approach.

Key Differences: US vs. Japan

Table comparing Autofill implementations between the US and Japan, highlighting differences in consent, storage, and input format

Define: Key Challenges

Legal Compliance – Rakuten's data privacy laws requires explicit user consent for Autofill
User Trust & Security – Japanese users are highly concerned about data privacy
Complex Input Fields – Address and name fields differ from U.S. formats, requiring careful design

Develop

To address the challenges, we implemented the following solutions:

Created an onboarding flow with clear opt-in consent to comply with Rakuten’s data privacy laws
Allowed data to be stored only on local devices and used progressive disclosure UX to explain how data is stored
Introduced biometric authentication or a passcode for Autofill credit card security
Ensured the input form was broken down into multiple fields to enable accurate Autofill across different merchant sites

To design this, I analysed services like Facebook Autofill and Chrome Autofill to understand best practices. I prioritised usability, consistency and simplicity to minimize user effort.

Designed multiple flow options and iterated with stakeholders before finalizing
Addressed legal concerns by incorporating clear onboarding screens to obtain user consent
Researched credit card with biometric authentication by studying banking apps and mobile payment apps
Once the flow and wireframes were approved, I created high-fidelity mockups and prototypes

Four mobile screens showing biometric login patterns from Japan and Hong Kong apps, illustrating different consent and sign-in flows

User Testing

We conducted remote, unmoderated user testing with five participants (4 women, 1 man, aged 30-50), matching our target audience.

The test had two parts:

Entering personal information manually in the Rakuten Rebates app
Shopping and using Autofill to complete checkout

Key insights:

On a scale of 1-10, participants rated their agreement with the following statements:

It’s easy to fill in credit card information

9/10

Autofill makes the checkout process easy

10/10

I feel confident using Autofill

7/10

Participants scored lower in their confidence using Autofill due to security concerns.

Action:

To iterate: We improved onboarding screens by emphasising data security to increase adoption.

Deliver

I provided detailed flows, specifications, and prototypes to developers and ensured a smooth implementation through development and QA testing.

Detailed flows and specifications

Final Deliverable for Phase I

Differences between the U.S. and Japan in form design:

Side-by-side comparison of US and Japan name-entry layouts illustrating localised support for Kanji, Katakana, Hiragana, and English

We carefully structured the breakdown of complex Japanese name fields to enable accurate Autofill across different merchant sites

Differences between the U.S. and Japan in security practices:

For the Japanese market, an onboarding flow with clear opt-in consent was introduced to comply with Rakuten Japan’s data privacy laws

Credit-card entry screens comparing US and Japan flows; Japan version requires biometric verification before using Autofill

Biometric authentication or a passcode was added to enhance Autofill credit card security in Rakuten Rebates app

Triggering Biometrics During Shopping Trip

Outcome

Successfully launched Autofill for Japan while ensuring compliance
Increased checkout efficiency for users who opted in
Of the users who accessed the onboarding screen, 40% agreed to use Autofill
During the checkout process, when the Autofill tray was displayed, 90% of users chose to use Autofill
Reduced friction, but data loss after logout or app deletion limited persistence. Low adoption (2%) led to Phase II.

https://www.damanwoo.com/node/93085

Phase II: Enhancing Autofill with my Rakuten Data Sync

After launching Phase I, we observed that adoption was lower than expected. While factors such as a limited number of supported stores and passive marketing strategies contributed to this, a key reason was that users had to consent to Autofill and manually enter their information before it could function. Additionally, if users logged out or deleted the app, all stored data was lost, requiring them to re-enter their details. To address these issues, we needed a more seamless and automated solution.

Since Rakuten Ichiba is a widely used online shopping app in Japan, most users interact with it before accessing Rakuten Rebates, where their data is already stored. Syncing this existing data with the Rakuten Rebates iOS app provides a logical and frictionless way to enhance the Autofill experience.

Summary

Goal

To increase the adoption rate of Autofill by syncing my Rakuten data while providing users with the option to input their data manually.

Challenge

Due to competing projects, the available time and development resources for this project are limited. Additionally, legal requirements for user consent will affect the timing of data synchronisation. Technical feasibility must also be considered, along with the challenge of aligning stakeholders with differing visions.

My Role

I am the main UX/UI Designer for Phase II of the Autofill project as well. My role was to lead holistic UI/UX execution for my Rakuten sync feasibility.

Impact

Autofill adoption increased from 2% to 40% from Phase I to Phase II
The percentage of users with profile data in Autofill increased from 0.5% to 42% from Phase I to Phase II

Approach

Discover

Since all Rakuten Rebates users had a Rakuten Ichiba, we explored the possibility of syncing data from my Rakuten to Rakuten Rebates.

I began by analysing how other services within the ecosystem used my Rakuten data and found that syncing was not required for those services. Based on this, we determined that it is legally feasible.

Additionally, the project management and development teams were responsible for assessing technical feasibility, including API verification, and confirmed that data synchronisation would be possible.

my Rakuten screen displaying personal account details and rewards balance

my Rakuten screen showing user's information

Define: Key Challenges

Legal Compliance – Rakuten's data privacy laws requires explicit user consent for Autofill.
Low Opt-In Rate – Users were required to opt in during onboarding to use Autofill, which resulted in low adoption. Additionally, this made the optimal timing for my Rakuten data synchronisation within the flow unclear
Managing Existing Autofill Users – Some users had already manually entered their data into Autofill, requiring a strategy to handle these entries after syncing data from my Rakuten
Technical Feasibility – Several technical constraints needed to be addressed when implementing data synchronisation, such as differences in address formatting

Develop

To address the challenges, we implemented the following solutions:

Consulted with the Legal team again to incorporate Autofill consent into the signup and login process. This eliminated the need for users to opt in separately to use the Autofill feature. As a result, once users updated or signed up in the app, their data was automatically synced
Allowed multiple data entry methods to provide flexibility in how users manage their information
Worked with engineers to map data structures and ensure compatibility
Ensured the input form was broken down into multiple fields to enable accurate Autofill across different merchant sites.

To design this feature, I analysed services that offer sync or update functionalities.

Developed user flows for both existing and new Autofill users
Addressed Japanese users' security concerns by providing an option to opt out of the service, even though consent was obtained during the signup or login phase. Additionally, users who opted in could disable Autofill at any time. To further enhance clarity, we improved onboarding content and introduced simple animations to increase user understanding
Developed the address sync and correction flow. When importing data from my Rakuten, the address format did not fully align with Rakuten Rebates’ Autofill fields. To address this, we ensured that users were prompted to manually correct certain fields
Updated the Autofill UI in Settings to follow a card-based layout, ensuring clear visual separation from the background and improving information hierarchy through containers and rounded corners. Additionally, this aligns with modern UI trends, creating a clean and approachable look, ultimately enhancing usability and adoption

User Testing

A remote, unmoderated user testing session was conducted with five participants to evaluate their willingness to opt in.

Key insights:

4/5 users enabled the feature
1 user declined, stating that manually entering their information was not inconvenient for them
Some users were confused about the address correction pop-up, requiring further clarification

Action:

To iterate: Based on the feedback, we improved the address text fields and address correction pop-up.

Comparison of address forms before and after iteration, where “Example:” was added to placeholders to clarify editable fields

Address Correction Flow

Deliver

I provided detailed specifications and prototypes to developers and ensured a smooth implementation through development and QA testing.

Additionally, I created animations for the onboarding process and designed the Autofill Usage Guide Page to support different breakpoints.

Three screens showing empty, partial, and maximum data states in the basic-information form for Autofill setup

Specifications covered the empty state, scenarios with few data entries, and cases where data entries reached the maximum limit. Additionally, on the final screen, different scenarios were designed to accommodate users who had only added partial data

Autofill usage guide page shown across mobile and desktop layouts

Autofill usage guide page in different breakpoints

Final Deliverable for Phase II

Comparison of Phase I and Phase II Autofill menus; Phase II adds settings and data-sync options

In Phase II, we updated the UI and added the sync feature

Three basic-information screens comparing Phase I manual input with Phase II manual input and synced non-editable data from my Rakuten

In Phase I, we only provided forms for users to manually input their data. In Phase II, we introduced data sync, which required designing different types of forms

In Phase I, users were required to provide consent before using Autofill. In Phase II, consent was integrated into the signup process, so users no longer needed to grant it separately

Outcome

Enabled my Rakuten data sync, allowing users to retrieve saved information easily and reducing user effort by eliminating manual data input. Even though data is lost if users sign out or delete the app, they can always resync from my Rakuten
Improved Autofill adoption by surfacing onboarding at key moments, particularly during the checkout phase
Autofill adoption increased from 2% to 40% from Phase I to Phase II
The percentage of users with profile data in Autofill increased from 0.5% to 42% from Phase I to Phase II

https://www.damanwoo.com/node/93085

Reflection & Next Steps

https://www.damanwoo.com/node/93085

Working on a large-scale project with limited development resources and time constraints is challenging. Due to these limitations, some technical issues remain unsolved. However, as UX designers, we focus on finding creative and practical solutions within the available constraints. Moving forward, I hope to negotiate for more time and resources to conduct comprehensive user testing, ensuring a more user-centered approach.

For the next steps, we will continue addressing technical limitations and user pain points while enhancing the Autofill feature. To improve flexibility, we will introduce multiple data selection on the Autofill tray, allowing users to choose from different saved entries. Additionally, we will expand the updated UI design across the entire Autofill feature to create a more consistent and intuitive experience. To further drive adoption, we will increase the number of supported stores, making Autofill more useful and appealing to a broader range of users. Furthermore, we plan to extend this feature to Android, ensuring a seamless experience across platforms.

Reducing Friction with Autofill for Japanese Users of a Rewards Program

About Rakuten Rebates

Phase I: Adapting Autofill for the Japanese Market

Summary

Goal

Challenge

My Role

Outcome

Approach

Discover

Define: Key Challenges

Develop

User Testing

Deliver

Final Deliverable for Phase I

Outcome

Phase II: Enhancing Autofill with my Rakuten Data Sync

Summary

Goal

Challenge

My Role

Impact

Approach

Discover

Define: Key Challenges

Develop

User Testing

Deliver

Final Deliverable for Phase II

Outcome

Reflection & Next Steps

Say hi.