Are your design reviews stuck in an infinite loop? The story of creating Rakuten Card's design principles

Hello, this is Video from the Creative Design Group.

Suddenly, does your team ever have moments like this?
The moment in a review meeting when you are struck by a sense of déjà vu, thinking, "Wait, I feel like I've seen this problem before." Every time, different points are raised, the design and specifications never seem to get finalized, and you end up repeating revisions and rejections.
Our organization had them too. Over and over again.
Such issues cause quality to vary from person to person, and lead to a lack of speed where a certain level of quality is only reached after many reviews.
This time, I will talk about the production process of the "Rakuten Card Design Principles" that we formulated to solve such on-site issues.

Why we created them

At Rakuten, there is a UI/UX guideline for the entire Rakuten Group called "Rakuten Brand & Rex Guidelines," and Rakuten Card also operates its own design system. However, in actual production settings, there were many moments where we wondered, "In this case, how should we make a decision?"
The criteria for judgment between the broad guidelines and the specific components were missing.
Therefore, we decided to formulate design principles as a behavioral guideline to solve UI/UX issues that frequently occur on-site and to aim for consistent quality improvement.

How we created them

With the cooperation of external experts, we proceeded with the following steps.

Identifying issues

We conducted a total inspection of the app and web from the following three perspectives.
1. Heuristic evaluation
Heuristic evaluation is an evaluation method in which experts identify problems in a user interface based on known usability principles (heuristics).
Using this method, we checked the "experience and operability" from the user's perspective and identified difficulties and frustrations encountered during actual use.
2. Expert review
We checked "rules of thumb and practices" from a designer's perspective, and examined design, consistency, and emotional impression expression.
3. Reference-based review
We extracted issues based on "UI principles" derived from standard and general-purpose design systems.

As a result of the inspection, a total of 96 issues were found across the app and web.
We diagnosed the "severity" of these issues one by one from a usability perspective, and thoroughly identified the root causes of why they were occurring.

For example, on the app's home screen, there were issues such as the following:

• The priority of information is unclear, causing users to get lost

• The tap area is small, making it easy to perform incorrect operations

• Inconsistent expressions lead to high learning costs

Designing design principles from two perspectives

While analyzing the issues, I noticed something.
It is that we need to prepare for both "problems we are currently facing on-site" and "problems that may become apparent in the future."

1. Guidelines aimed at solving issues
Addressing what we are struggling with on-site now
Extracted from the 96 issues occurring in actual products. We summarized points where omissions are likely to occur during production, such as "inconsistent button placement" and "unclear information priority," as guidelines.
→ Emphasis on practicality. Concrete guidelines that can be used from today's production.

2. Principles-based guidelines
Essential principles that should be maintained in the future
Principles that are not currently apparent but should always be considered as the foundation of design.
For example, universal principles such as "reducing user cognitive load" and "maintaining consistency" fall into this category.
→ Foundation building. Guidelines that will not waver even if the team's skills change.

We focused on covering (1) while also covering the important parts of (2).
With these two wheels, we aimed for design principles that are truly useful on-site.

Repeating divergence and convergence

Classifying, grouping, integrating, and verbalizing issues. We repeated this work many times.

What we created

In this way, 13 design principles were completed.

Each design principle includes concrete Before/After examples and checkpoints to use when you are unsure how to proceed.

However, we struggled with one thing here. No one reads guidelines that are too serious. Documents that are impressive but never opened. We wanted to avoid that future at all costs.
Therefore, the main person in charge of production tailored them into user-friendly guidelines infused with humor. Expressions that make you chuckle and examples you'd want to share with others are scattered throughout.
Instead of inorganic and strict rules, they are something everyone can use with familiarity.
We valued that 'approachability'.
Practical content that doesn't end with abstract ideals but can be used in today's production work.
And content that is fun to read. This balance is the hallmark of these design principles.
For example, it looks like this.

It's not finished once created; we continue to nurture it

The design principles are referred to regularly as a touchstone whenever someone is in trouble, from the project start phase to the design production phase.
And we value not just finishing once created, but having everyone 'nurture and establish' them.
Specific initiatives:

• Incorporating them into Figma templates

• Mutual review sessions between designers and directors called 'Principle Dojo'

• Creating an environment where they can be printed on paper and kept on desks to be referenced anytime, anywhere

Moving forward, together

Since the design principles were created, discussions in reviews have become more constructive, and the speed of decision-making has increased.
For example, in discussions about functional improvements, we can now make proposals based on a common guideline, such as 'Shouldn't we change the operation flow in light of this principle?' When designers explain things to planners or directors, they can now use the common language of 'principles' instead of relying on experience, allowing both sides to make decisions with a sense of conviction.
In fact, there are many improvement measures based on the design principles, and the effects are appearing in the numbers.
Just as the product continues to evolve, we want to continue growing the design principles together with the team.