Creating the PayPay Style Guide

PayPay rolled out the PayPay app only three months after the company was established. The speed with which they worked is probably far beyond our imagination. Whatever the case may be, the Design Team from the Product Division was in charge of the PayPay app design—the face of PayPay. This time, we interviewed Maki Aoyagi, who has been involved with the app since PayPay Corporation was founded. We asked her how they were able to create a style guide from absolute scratch, as well as what sort of future the Design Team envisions for PayPay.
  • Maki AoyagiSenior Manager of the Design Department, Product Division. Aka “YAGI-san.” She joined Yahoo Japan Corporation in 2008, where she was in charge of designing apps, such as the Yahoo! JAPAN app. In 2014, she became a “black belt,” or expert designer, in visual design. Since the launch of PayPay in 2018, she was in charge of design to enable the use of PayPay in the Yahoo! JAPAN app, and was later seconded to PayPay in July 2019 to be in charge of the PayPay app design as the on-site chief. She transferred to PayPay Corporation in April 2020 and was promoted to her current position in May 2021.

“Let’s just roll out the service!” Starting with no rules when PayPay was founded

Could you please tell us how you got involved with PayPay?

When PayPay Corporation was established in June 2018, I was in charge of a project to integrate the PayPay payment feature into the Yahoo! JAPAN app. E-money was not so widespread in Japan a couple of years ago, but when I actually used it, it was really convenient, and I was convinced that it would spread in the future. So, I volunteered to transfer to PayPay.

What did you think of the people working at PayPay? What kind of impression did you have?

At the time, the project members of the Yahoo! JAPAN app had set up camp in a corner of the PayPay office, where I worked watching PayPay employees out of the corner of my eye.

PayPay was so fast at making products and decisions, it sometimes appeared to be a tough place to work at. But I got the impression that the people who worked there were having a lot of fun and were enthusiastic about their jobs. Plus, it had an extremely global culture where a diverse group of bright people were gathered including members dispatched from Paytm. What particularly struck me was how close Adi (Aditya Mhatre), the Product Division Head back then, and other officers were close to employees, discussing and creating services together. We were developing services at a tremendous rate despite the small number of people, exchanging opinions directly with each other. That was an environment that I had never experienced before.

Photo of PayPay app rollout on October 5, 2018. Everyone is watching the moment the app goes public.
Have you ever been perplexed or troubled after becoming fully involved in PayPay?

Our situation was basically, “let’s just roll out the service and get through the huge campaign (10 Billion Yen Giveaway Campaign),” so speed was of the most importance. We had no rules, and the designs and services were all just a jumble. Honestly, I didn’t know where to start. But it was because of that experience that we created the style guide.

During that time, we had five designers. With five people, you get five different designs. The issue with that is that the flavor and impact of a design starts to depend on personal ability. Considering that we wanted to hire more people as PayPay expanded its services, I thought it necessary to set standards and rules so that everyone could create a consistent design and maintain the quality above a certain level.

A style guide atypical to a Japanese company

What is a style guide?

It’s a document that summarizes the design philosophy of the PayPay app, rules for designing, and the rules and specifications for certain UI parts. The PayPay app and mini apps which appear in the PayPay app are primarily designed based on this document.

I think having a style guide is common overseas, but I’m guessing it’s rare for a company in Japan to create one. When making it, I looked at the design guidelines of various global companies and platforms for reference.

What are the benefits of having a style guide for the Design Team?

First, we were able to ensure quality and provide a consistent experience to our users by setting the rules and avoiding the design from varying by person. This is not limited to within the company since PayPay is integrated with many services and mini apps are increasing in number. Other companies are now also able to create a design based on the style guide when deploying their services within the PayPay app. Of course, each service and brand has an identity that it treasures, and we respect that. But if we lose consistency, the design will differ by feature or screen, and users will need to relearn each feature. I believe this is a very important criterion for providing a better service experience to our users.

Second, we improved operational efficiency. When I started working at PayPay, we only had five designers including me, but now we have 14. With more designers, we could do more things, but on the other hand, there were concerns that we would lose consistency or that communication costs would increase due to having to check and confirm small design details. However, by using the style guide, we were able to eliminate checking alignment with basic concepts and methods of design. Even for a new UI or service design, I think it became very clear how to create them. Now at PayPay, everyone is working fully remotely under the WFA system, and the style guide makes it possible to work smoothly even in such an environment.

While a style guide is very useful, I can imagine the difficulty of verbalizing visual things like design. Wasn’t it tough to write it up?

Even after it’s gone public, I still feel uneasy and ask myself, “Is this right?” The rules for colors and illustrations are emotional. We created the style guide after numerous discussions with everyone, but it’s not yet complete and I want to continue improving it. I want to update it to an even better style guide.

In all honesty, the hardest thing was to secure resources! Three or four members, including myself, were involved in creating it, but everyone was working on producing the style guide in parallel with normal development tasks. It was difficult to make time, so managing resources was rather tough. But Adi, the Product Division Head, entrusted me with the task, so I kept plowing on, reporting whatever was finished including the structure of the style guide. I think it’s a great part of the PayPay culture to be given the freedom to make decisions, build relationships of trust with each other, and keep moving forward with the work on your own.

Someday, I want to make a design that’s original to PayPay. A design that’s up for challenges as PayPay expands its services

Do you have any expectations for the style guide going forward?

In addition to the benefits I previously mentioned, I would like for it to make the PayPay app easier to use and improve PayPay’s brand power. The services offered within PayPay look like they’re offered by PayPay, even if some of them aren’t operated by us. If these kinds of services and all other services related to PayPay are created based on the style guide, consequently unifying the user experience, we will be able to nurture PayPay’s distinctive character.

Currently, the style guide is not only limited to the PayPay app but is applied to all services that have “PayPay” in their name (such as PayPay Bank and PayPay Securities). If we can provide a consistent experience across the entire group with a single style guide, I believe that users will be able to seamlessly use all services, the usability will increase, and ultimately the overall PayPay experience will be enhanced.

Finally, please tell us what you and PayPay’s Design Team are aiming for and what your goals are!

Currently I have a lot of management duties, but PayPay has a lot of rollouts for new features and services, so I would like to provide better user experience from the perspective of design. Also, this is one of the purposes of the style guide, but I would like to further cultivate the brand power of PayPay and its unique characteristics.

It may take a while, but there is also talk in the team of wanting to create PayPay’s original font. I think that’s another way to increase PayPay’s brand power. In cultivating a “PayPayness,” there are many things that I want to try or don’t know what to do about, but the members of the Design Team are really tight, everyone’s so good at what they do and very dependable, so I would like to continue taking on challenges with everyone in the Team!

Members of the Design Team. Photo from a farewell party for Adi, the previous Product Division Head. The team is quite multinational, with people from Japan, Korea, Taiwan, India, Vietnam, Belgium, Thailand, Australia, and Saudi Arabia. Communication is not limited to Japanese and English, and they make it a point to communicate closely with each other.
See our currently available open positions hereList of open positions
Editor: Mamiko (PayPay Inside-Out Editing Department) *All Information is as of the time of the interview.
You May Also Like