Exactly 6 months ago, on 29th August 2024, we rolled out Mercari to Taiwan for the first time.
A portion of Slack message from the main project manager in charge of InHouse project (cropped for succinctness).
The Spark of a Global Dream
Imagine a project that starts with three simple words: "Make Mercari Global." Sounds easy, right? As the Frontend (FE) Person In Charge (PIC) of project InHouse, I can tell you it was anything but simple. I want to show the behind the scenes of how the Crossborder (XB) team transformed an ambiguous vision into a concrete reality, bringing Mercari’s marketplace magic to Taiwan.
I will be talking about the project management side, frontend side, and the aftermath 6 months later. Please skip to the part you are interested in 🙂
Project Management: Turning Vagueness into Vision
When leadership drops a goal like "Make Mercari Global" on your desk, you could panic. Or you could do what we did: break it down, strategize, and execute with precision.
Why Taiwan?
Currently international users can purchase Mercari items through third party services. From these services we know which countries and regions have demand for Mercari items. Taiwan (台湾) sits high on the second place.
Ranking of countries and regions by amount of purchase from XB. Taiwan is in second place. Image taken from XB transaction trends.
If we further break down the data by popular categories, we see that Taiwan (台湾) ranks highly on all of them.
Ranking of countries and regions by amount of transactions. Taiwan ranks 4th, 2nd, 2nd, 3rd, 2nd for badges, kpop CDs, idol goods, acrylic stamps, and figurines respectively. Image taken from XB transaction trends.
It’s also worth noting that for the initial release we planned to only ship one item at a time. And Taiwan ranks even higher for this metric. Do note that we will soon allow users to order and ship multiple items at the same time, so look forward to that!
Taiwan was chosen over China due to complex licensing requirements, strict data laws, and product certification needs. The sheer size and competition within China makes it a fairly difficult country to release first to.
Taiwan was chosen over the USA for 2 main reasons. Firstly, Mercari already has a presence in the USA through Mercari US. Secondly, Taiwan is geographically much closer to Japan; meaning that we can minimize the shipping cost.
Managing Time: The 8-Month Marathon
Planning an 8-months project that touches every single codebase and screen is like conducting an orchestra where every musician is playing a different genre. Our approach? Sync, sync, and sync even more…
People seem to hate meetings, but I think there’s a time for it. Projects with specs that changes daily and confirmation that requires long contexts is one of them. And man did we have a lot of meetings.
At the peak of it we had
- (30m) Daily standup team meetings where the team can sync on daily changes
- (1hr) Weekly Product/Engineering meetings where each team updates their statuses
- (1hr) Weekly section meetings. For example, I participated in engineering meetings where we discussed technical blockers and approaches. I would also join meetings where we check the schedules and ensure we are still on track to deliver the project.
- (30m) 1on1 with each stakeholder. I mainly have these with PICs from each department
- (1hr) Some sections of the project are quite large and also have their own kickoff and weekly sync meetings. For example, the authentication (handled by Daniel) section had their own weekly sync meetings.
So each week, almost a day’s worth of hours are spent on meetings. This is a lot, but also essential in keeping all the context in sync. Meetings were also one of the ways to highlight critical issues and resolve them quickly.
Having meetings is not an excuse to not properly document decisions. We still ensured every decision is documented and not just left on Slack. Thank you to Aymeric (EM) and Nick (Pdm) for organizing and running many of these meetings.
Managing People: Split loads and break silos
There are 2 forces pulling each other
- You want to enable people to have deep work. To do this you need to minimize meetings and contexts required for a task.
- You also want knowledge to not be siloed. To do this you need to maximize syncs and contexts for a task.
See how each part contradicts each other? Our approach was simple, have 1 PIC for each department (PM, FE, BE, Design, etc) who will have the full context of everything. And then delegate various tasks to other team members.
Simplified frontend team report line diagram.
FE for example split our works by functions. Some examples are
- Purchase flow (Wills)
- Internationalization (Drew)
- Authentication (Daniel)
- MyPage (Gary)
- etc
Members of each section can then ignore the other and focus on delivering their work. As PIC, I need to keep the context of everything. This means any question from another team or department can be asked to me. This speeds up communication across the team. I also document each important decision so when needed, other members can refer to it.
Each team member can dive deep into each functionality and contact the external team for advice and guidance. This allowed fast work by each member without bypassing the codeowners of respective screens or functionality.
Frontend: The Center of Chaos
Frontend plays a central role in this project. The Frontend team ties BE, Design, PM, legal, and other teams together. As such, keeping our heads clear and being on top of all the specs was a must.
The Repo Dilemma: New or Existing?
One of our first big decisions: create a new repository or modify existing ones? We went with modifying our existing one as various infrastructures were already set up. For example, release flow, on-call, and staging was already set up.
Internationalization (I18n): More Than Just Translation
I18n wasn’t just about switching languages. It was about creating a seamless experience that felt native to Taiwanese users. Note that up until now Mercari was only available in Japanese.
We established rigorous standards. Some of these might be obvious, but writing them down and enforcing them was important in order have good standards
- Standardized URL structures for static pages. This is especially important when navigating from pages that are managed on different repositories.
- Use case sensitive BCP 47 standard right after domain name (e.g. jp.mercari.com/zh-TW)
- Consistent file system organization
- This follows the above where we will have parent folder named as the locale (e.g. html/en/cookie_policy)
- UI, flow, and fallback
- If you have multiple language options, always show a language picker from all pages
- Store selected language locally and sync when users are signed-in
- When a language is only partially available, default to en or ja depending on the language
- Clear decision-making flows for localization
- Start with Figma
- Export strings to a CMS
- FE names the keys
- Internal or external team translates the strings
- FE pull latest changes and commits to the codebase
Controlling UI
FE worked closely with Masa (Designer) and other designers to keep the UI and UX consistent between countries. If you are interested in our UI/UX decisions for Taiwan release, please check Redesigning the International C2C Shopping Experience for Mercari Taiwan article written by the design PIC.
Without a doubt, there are sections where the UI must be different. To achieve this, we have a few methods we can use.
By feature flag
This is our current system for doing A/B testing. If you are not familiar with A/B testing, this article by nngroup is a great starting point.
We split the UI depending on whether a feature flag is true or false. For example, we have the XBT-2974_int_cvs_pickup feature flag. The values are set using an internal system, but all it does is randomly distribute values to existing users. If a user receives a false value then they will not see this new feature. If a user receives a true value then they will see the new feature.
# feature flag definition file
const featureFlags = [
...
'XBT-2974_int_cvs_pickup',
...
];
# file where we want to make the split
export const Component = (props: Props) => {
...
const { getFlag } = useFeatureFlag();
...
return (
...
{getFlag('XBT-2974_int_cvs_pickup') ? <NewComponent> : <OldComponent>}
...
);
};
By country
We can also control the UI based on the user country. When signed in we retrieve the user’s country from the DB. When signed out we retrieve the user’s country from our CDN (which determines it using ip address).
# file where we want to make the split
export const Header = (props: Props) => {
...
const isInternationalUser = useIsInternationalUser();
...
return (
...
{isInternationalUser && <LanguagePickerButton />}
...
);
};
By sign in state of user
This is especially useful for pages that should only be accessible by signed in users.
# file where we want to make the split
export const UserPreferencePage = () => {
...
const signIn = useIsSignIn();
useEffect(() => {
if (!signIn) {
loginRedirect(true);
}
}, [loginRedirect, signIn]);
if (!signIn) {
return null;
}
return (
...
);
};
Access Control List (ACL)
To have a more robust access control per user type, user country, and feature, we developed an access control list. This is more complicated and also involves BE. Shoutout to Gary for implementing this.
If you have never heard of Access Control List, then the Access Control chapter from Operating Systems: Three Easy Pieces (OSTEP) is a great starting point.
# permissions
export const permissions = {
...
# Japanese users need to be multi authenticated to use following Shops feature. Since Taiwan has not been set, Taiwanese users can't use this feature.
SHOPS_FOLLOW: [
createPermission(
AccountCountryCode.JP, AuthenticationContextClassReference.MultiFactor
),
],
...
}
# file where we want to make the split
export const ShopsFollowLink = () => {
...
const { isFeatureAvailable} = useACL();
...
return (
...
{isFeatureAvailable(FeatureId.SHOPS_FOLLOW) && <FollowShopsButton>}
...
);
};We employed each method depending on the feature and design. As a rule of thumb, we start with a feature flag for simple A/B features. When it’s more complicated, we use the more complicated ACL. And finally use country/regions or sign in state when that is the only variable we are interested in.
Aftermath
Marketing plans
Successfully launching to a new country/region is a technical achievement, but it is just the beginning. Next we need to make sure the time and effort we invested are paid off. Now, I’m no expert at marketing and business development, so please understand that the following section has my very personal takes.
Mercari is a household name in Japan, but not in Taiwan.That being said, Mercari is quite known for some categories of items (read Anime, Manga, Game, and Idol products). To play into our strength we set up various marketing campaigns targeting these markets.
W11
Singles’ Day lands on 11/11 every year. The date was chosen for how it resembles single people. It is especially huge in Asia since Alibaba started offering huge discounts back in 2009. As this will be Mercari’s first big event in Taiwan, we went with a bang. Setting up offline booths and huge discounts for 2.5 weeks leading in 11/11 and on the day itself (press release in Japanese).
Online campaign page for W11 (campaign page in Taiwanese).
W11 offline event entrance.
W11 offline event 2000s drama themed room.
The W11 event was very successful. Mercari’s name was successfully spread out by influencers taking photos in the offline booths. Taiwanese people are now more than ever aware of our service.
Huge discounts also nudge users for registration and first purchase (2 of the hardest blockers for marketplace).
Christmas
Who doesn’t love Christmas? Mercari definitely does! Hoping to entice users looking for Christmas presents we set up discounts throughout the Christmas period.
Online campaign page for Christmas (campaign page in Taiwanese).
Although it wasn’t as big as the W11 event, the Christmas event was still very successful. We exceeded most of our targets, including many new users and first purchases.
Other marketing events
With the marketing team (shoutout to Moty and Angie) in Mercari working hard, the InHouse project gained over 50,000 users in just the first month! Mercari will continue to hold offline events and campaigns to promote the service so spread the word to your Taiwanese friends as their next purchase might be highly discounted from Mercari!
What’s Next?
The global expansion train has left the station, and we’re just getting started. We are building more features for our Taiwanese users to use our service even easier and cheaper. We will also continue to hold fun events to help promote the brand.
At the same time Mercari will continue to expand to other countries in the following months. Keep your eyes open as Mercari might be available in your country soon!
Thank you for reading! <3
