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.
- I categorized all the current pages into 2: 2-column-layout,
- and 3-column-layout. Then, I designed the tablet and mobile layout for those 2 categories.
- 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.