This post is Merpay & Mercoin Advent Calendar 2024 , brought to you by the Merpay Engineering Manager @masamichi.
The Merpay mobile team is currently working on a project to migrate hundreds of Merpay screens that exist within the Mercari app to SwiftUI/Jetpack Compose.
This article describes the history of the project and how it is proceeding.
Release of Merpay
The Mercari app with Merpay was released in February 2019. The initial development was mainly done in 2018.At that time, SwiftUI and Jetpack Compose were not announced, and the Mercari app with Merpay was developed in UIKit/Android View.
SwiftUI/Jetpack Compose, a declarative UI framework for iOS and Android, was then announced within 2019.
GroundUP App Project
Meanwhile, around 2020, the mother app, Mercari app, launched the GroundUP App project to revamp its code base to solve issues that had accumulated over years of development.
The GroundUP App project fully adopted SwiftUI/Jetpack Compose and was ready for release in 2022.
For more details on the project, please refer to the core members articles:
- Making Mercari’s Business and Ecosystem Sustainable: Our Journey to Creating GroundUp App, a Project More Colossal Than Anything We Have Done Before The journey of the GroundUp App, a project of unprecedented scale
- “Just Wait Till You See What’s Next for Mercari Engineering”: The iOS & Android Tech Leads Recap the “GroundUp App” Project
Various functions of Merpay were modularized and embedded in the Mercari app in a somewhat loosely coupled state, so we were able to make them embedded in the new app and continued to develop new features in parallel with the GroundUP App project.
For more information on the Merpay migration, please refer to these articles:
- メルカリアプリのコードベースを置き換える GroundUP App プロジェクトの話
- 【書き起こし】Merpay iOSのGroundUP Appへの移行 – kenmaz【Merpay & Mercoin Tech Fest 2023】
DesignSystem
Mercari has defined DesignSystem for screen design and development. Mercari has been gradually introducing it to the app since around 2019.
In particular, the new app after the GroundUP project has been revamped with SwiftUI/Jetpack Compose-based UI components, and the full adoption of the DesignSystem has resulted in a unified screen UI/UX, dark mode support, and improved accessibility.
On the other hand, as mentioned above, Merpay has integrated the modules developed since the beginning directly into the new application. The screens were based on UIKit/Android View, and the DesignSystem was also based on the previous version of the UIKit/Android View-based implementation. As a result, there were issues such as differences in UI/UX, lack of dark mode support, and architectural differences due to the different UI frameworks.
In order to take full advantage of the benefits gained from the GroundUP project, a project to migrate Merpay existing screens was started in 2023.
Engineering Projects and Golden Path
Migrating hundreds of Merpay screens requires a long-term commitment. Merpay has developed a framework called Engineering Projects to drive these long-term engineering investments.
For more information on Engineering Projects, please read this article by @keigow, VP of Engineering.
We have also defined a standard technology stack across the entire Mercari Group as the Golden Path, aiming to improve development efficiency and reuse of technology assets. Merpay migration project is called the DesignSystem Migration Project for simplicity.
The actual implementation of migration requires man-hours and discussion of priorities. I have prepared a project plan to launch this project, clarifying the background, actions, structure, and milestones. We are promoting this project as one of the Engineering Projects.
Project Structure and Approach
Structure
Merpay has a cross-functional team structure that includes product managers and engineers for each of the major program domains. Proceeding with the Design System migration involved collaboration between mobile teams and designers from all of the programs. Regular bi-weekly meetings with mobile team leaders and designers were held to share progress, blockers, and regularly set milestones. During the project launch phase, a weekly meeting cadence was adopted. Once the project was somewhat solidified, the frequency of meetings became bi-weekly.
I created an internal Confluence page with all of the project information. This Confluence page included the project plan, structure chart, Slack communication channels for each function, design and development know-how, QA test cases, feature release status, regular meeting minutes, and other information necessary for the project to be viewed from a high level.
Excerpts from the Table of Contents
Man-hours and timing are important to proceed with migration. Migration can be carried out efficiently if it can be done at the same time as the introduction of new measures for the product. On the other hand, this alone will not allow migration of functions that change little. In addition, there are cases where development with a high degree of urgency is temporarily carried out on existing screens in order to prioritize speed. We work closely with the design and mobile team leader of each program to ensure a good balance between migrating existing functions as they are and migrating at the same time as new product initiatives are introduced.
Screen List and Progress Tracking
In order to migrate screens, it is first necessary to understand as accurately as possible how many functions and screens there are. At Merpay, we created a spreadsheet with a list of all the screens when we started the project.This allowed us to accurately identify the number of screens and screen patterns, as well as the team, development, and design staff with ownership of the functionality in a centralized location. We have also assigned IDs to all screens to ensure that there are no discrepancies in the recognition of the target screens within the team.
Each screen is also assigned a progress status as shown below and plotted on a graph so that the overall progress can be visually tracked.
- TODO
- Design In Progress
- Design In Review
- Design Done
- Dev in Progress
- In QA
- Done
We update the progress of the features we are working on for migration at our regular bi-weekly meetings.
By accurately tracking the status of each screen, we are able to report transparent and accurate information to the CTO and VPoE at regular Engineering Projects meetings.
Excerpts from the Screen List sheet
Strategy Sharing
At Merpay, we have a quarterly event called Strategy Sharing, where we review and share the company’s strategy and roadmap, as well as deciding on the priorities for the next quarter. During this event, we also share Engineering Projects milestones with the whole company. This allows people outside of the engineering department to understand how the project is progressing and gain recognition throughout the company.
Once in the second half of each quarter, Merpay holds a “Strategy Sharing,” in which priorities for the next quarter’s initiatives are decided and the strategy and roadmap are reviewed and shared with the entire company. During this process, we define the functions and progress rates to be targeted in the next quarter and share milestones company-wide about Engineering Projects. This allows people outside of the engineering department to track progress and gain company-wide recognition.
Current Progress
We have been promoting the project for about two years from 2023 to 2024, and as of December 2024, Android has completed about 65% of the migration and iOS about 60% of the migration, and it has been released. Including those under development, migration is progressing at 70% ~ 80%.
Android Progress
iOS Progress
Our team will continue to work together to update Merpay’s mobile engineering, and we will continue to promote the project with the goal of 100% completion.
In Closing
This article introduced the background and approach we took to migrate hundreds of Merpay screens within the Mercari app to SwiftUI/Jetpack Compose. The project has been a large, long-term effort filled with difficulties, but I believe that tackling this kind of challenge is a testament to the Mercari Group’s strength as an engineering organization. I hope this article will be helpful to all teams considering or in the process of migrating to SwiftUI/Jetpack Compose.
Next article will be by @kimuras. Look forward to it!
