Redesigning Rakuten Pay Online Portal Page

Project Info

Rakuten Pay LITE Portal page is the landing page of Rakuten Pay LITE, one form of the payment service.
The goal of this project is to make the page responsive to improve the user experience and reducing the development cost. There will be only one code for both mobile and desktop and the development cost can be reduced and it will be easier to maintain the code.
Another purpose is to adding a tracting code so the company can track the CTR and other profile. The captured data will be used to improve the current service.

  • Status : Released
  • Project Member: 1 Project Manager, 1 Designer + Coder (self)


The original portal site was only available in desktop version. So when the user open the site in their smart phone, they have to adjust the zoom and try to locate the paragraph they were looking for.

There are 2 main conversions in this page which is 1. to get user register as merchant (the red button) and 2. to get user try the sandbox dashboard. However, the tracking code was not adjusted to track mobile device. This is also one of the problem.

Starting from 0

I did not have any data to begin with. I learnt how to use the analytics tool and I did some meeting with the previous designer and we discussed the concept of the mobile site. We viewed the sites in various screen sizes and we took notes at which point did the layout break. Those points will be set as our breakpoint.

First Wireframe
  1. The first wireframes. The navigation menu on the mobile version was on the left side

First Iteration

For a big company that has a lot of services like Rakuten, navigation matters. It connect a lot of services and it can bring a potentional new user. I put that into consideration by adding a hamburger menu for navigation. The navigation contains link to other related pages. I presented this design to the stakeholder.

Categorizing the old sites
  1. First Iteration: the menu on left side is not well-accepted.
  2. Probably it's a good idea to put the 2 important conversions to the navigation.

The first iteration result: it's not good to put the menu on left side because even though most user is right-handed, most of the company's product keep the menu on right side. It's a good idea to keep all the products in a uniform style.
Another suggestion is to put the two most important conversion (link to new merchant registration and link to sandbox) in the menu, so user can easily get access to them.

Second Iteration: Final Product

Based on the suggestions I received in first iteration, I began to code and create a working prototype. I also implemented the new tracking code (Adobe Analytics code), so in the future, we can gather the neccessary data.

Final Product

Result and Future Improvement

I managed to improve the visit in smart phone by 10% and it's much more efficient and faster to update the contents because now everything is managed in one source code. Most important thing is, I increase the page load speed by 30% by compressing the script, stylesheet, and images. As one of my coworker said this to me:

Our customer does not care if the page looks fancy on their phone, but they DO care if our page takes 5 minutes to load and not getting things done.

Based on the tracking result, I found out that the button on the bottom of page does not have a high conversion rate. Probably the page is too long, so I redesign the whole page to be implemented in future.

Future Improvement