UI Redesign for Rakuten Rebates
Client
Rakuten Rebates is a shopping rewards service where members earn points as rewards by shopping via Rebates website or a mobile app.
Role
・UI design
Project
・Redesign the web/mobile UI of the Help page to improve visibility and consistency
・Implement responsive design
Problem
Help page’s design is not matching to the latest style guide. The website had text-heavy Help pages that discourage users from finding the answer that they are looking for.
Solution
I updated the UI design under the Help page. And as a new feature, I added four quick link buttons on top which lead to the top four most asked questions. The whole styles for typography and colours under the Help page were updated to meet our latest style guide. The help page in general has a lot of information so the amount of text is the same as before renewal, but the treatment of typography, colour, spacing, and iconography could give better visibility throughout the pages.
Low-fi prototyping
I first went over all the pages and components under the “Help” page to clarify the components. Then I made a low-fi prototype before I moved on to design the details.
Icons
I designed the icons on the quick link buttons. The flat illustration is our visual design’s standard so it is applied here as well. I used minimal colours and made it simple so that it would be easier to switch the icon to another if it is necessary for the future.
Style guide
I applied below style guide to the new design. The old design’s text links were all red which made it difficult to read due to the low colour contrast compared with the text in black. Now all the text links are blue, which has a good colour contrast with black text.
Responsive design
I ensured to design all the components to be compatible with all devices. I paid attention to the spacing of the link components such as quick link buttons or side navigation so there is enough space for finger tapping on mobile devices.
