Redesigning Rakuten Pay Online Manual Page

Project Info

Rakuten Pay manual page is documentation pages dedicated for developers who use the service. It contains documentation such as how to call API, API response, how to use Sandbox and other features.
I was asked to create a responsive version of the manual pages and adding new pages and visual element to improve the clarity of the manual. The goal of the improvement is to increase the number of visitors by providing them a good experience when using the manual in any device.

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

Problem

Orginally, the desktop version was existed and my task was just to make it responsive. However, the manual consisted of 9 different pages at that time and all those pages has different types of content. For a large scale business like Rakuten, consistency is the key. The challenge in this project is to redesign all the pages while maintaining a consistent style across all pages.

Building a Foundation

I create an atomic structure and elements to allow users to get comfortable using the manual. The core target of this manual is developers who are looking for organized layout and clearly displayed data. Therefore, I took this into account by categorizing the view into 2 types and creating a responsive layouts and navigations to accomodate the users' need.

Categorizing the old sites
  1. I categorized all the current pages into 2: 2-column-layout,
  2. and 3-column-layout. Then, I designed the tablet and mobile layout for those 2 categories.
New Page Structure
  1. Responsive Layout, inspired from Stripe API Layout.

I implemented 2 navigations, the right-side navigation is for users to navigate to related pages such as the inquiry page and the dashboard page. The left-side navigation is to navigate within the portal pages.

I reconstruct the grid, giving it a proper structure and class name. It's easier to maintain the code and it's reusable for the other pages too.

Manual Navigation

Building Experience

Stakeholders refuse the idea of adding search function to the manual because of resource issue and the project need to be done quickly (1 month).

To tackle this, additional pages are assembled with specific elements so user can look for information they need quickly. Example: the page explaining the security features and page explaining the transfer process.

I also added some visual elements such as tables and diagrams to explain a slightly complex system to the user.

Manual Pages

Result and Learned Lesson

All the pages go live. Improve the UI/UX score up t0 100%, improve the page load speed by 20%.
I still feel that a proper manual page should be equipped with a search function. Probably in the future, this project can be improved.