Apr 8, 2022
Embracing the "楽市・楽座" Philosophy
Originating from the "楽市・楽座" concept of the Oda Nobunaga era, Rakuten Group symbolizes a positive economic ecosystem that empowers merchants to freely sell their products. Initially, Rakuten's global marketplace granted significant freedom to merchants, allowing them to use iframes for webpage customization.
As various e-commerce platforms emerged, consumers developed mental models that were not aligned with iframe customization. This led to technical barriers for merchants and inconsistent user experiences, resulting in high bounce rates. In response to stakeholder feedback and interviews, we aimed to establish a platform that enables merchant customization while providing a smooth user experience.
Defining the Problem
Through heatmaps, we discovered user scrolling patterns and formulated several hypotheses, including:
Lengthy pages causing information overload and confusion
PC Narrow page display not meeting modern device standards, and inefficient
Analyzing the data, we found that users frequently navigated between search and item pages (for cross-store comparisons) and within store categories (for in-store comparisons). These behaviors indicated that visual material conversions were lower than expected, emphasizing the need for clearer navigation to enhance the user experience, increase page views per visit, and create an enjoyable shopping journey.
Prototype Design
We implemented various design decisions, including:
Simplifying the highlighting of product benefits to increase motivation
Placing essential information near call-to-action buttons
Organizing high-conversion in-store navigation features to facilitate "cart filling"
Adjusting the sequence of store banner displays
Utilizing breakpoints to distinguish page sections
Resizing product images
...
These design decisions encompassed numerous aspects.
Empathy/Testing
Based on these design decisions, we directly engaged with users to validate our ideas through testing. We identified user journey stages, considering different aspects at each stage.
Noteworthy findings from our research include:
In-store and Out-store Experiences
From our tests, we learned that users perceive navigation differently between the "in-store" and "out-store" experiences. To better accommodate these experiences, we planned information architecture differently. Since users frequently move back and forth between the global search and item pages, products are perceived as public areas. Thus, we emphasized store entrances to guide users to the homepage and then navigate to specific stores.
Comparison of Similar Products
To engage users in our shopping flow, it is crucial for them to compare products and create a personal shopping list before proceeding with in-store actions, such as "cart filling." This ensures users feel well-informed and more inclined to complete purchases.
Implementation of Product Page 2020-2021
We focused on creating a clean and minimalistic visual presentation. We utilized a larger area of white space to ensure that the product information stands out prominently. By simplifying the layout and organization of the page, we made it easier for users to scan and access relevant information.
Modern users prefer clean website designs. We discovered an interesting combination of red and white brand colors within minimalistic layouts, allowing us to amplify the focus on product images. By expanding cells and incorporating pop-up information, we streamlined the presentation of overall product information.
Mobile
PC
Reinventing the E-commerce Experience
Through the product page redesign, our team gained deeper insights into user interactions, leading to a greater understanding of business requirements and user data. We refined our design direction and alternated between various validation methods, such as internal and external user testing and interviews. Our approach varied based on project timelines, cost considerations, and the specific validation goals.
Design - Shopping Cart and Checkout Page 2021-2022
We simplified the checkout process from three steps to two, aligning with modern consumer habits. Additionally, we included numerous nudges in the shopping cart to encourage users to proceed with checkout.
During checkout, we designed surprises to emphasize Rakuten Points.
Mobile
PC
Design - Channel Pages 2022
To enhance marketing operations, we implemented customized designs for different product categories.
Design - Homepage 2023 (In Progress)
To strengthen the Rakuten brand recognition and trust in our e-commerce platform, we analyzed heatmaps and conducted surveys, revealing that 30% of users utilize search, 20% view their orders, 20% browse aimlessly, and 30% have a high bounce rate. Based on stakeholder communication, our redesign aims to increase brand recognition, enhance member functions, and improve navigation.
Planning Detail
Mobile
PC
Design - Merchant Backend 2023 (In Progress)
Through numerous merchant interviews, we identified insufficient feedback regarding activity setup and product shipments. Starting from the merchant backend homepage, we initiated designs to enhance usability.
Design System
After the item page redesign, we collaborated with developers to establish a design system step by step, following an experiential approach. The design system, initiated by our headquarters in Japan, was localized for our team's implementation.
The Path of a Product Designer
The Rakuten Redesign project began in 2020, gradually covering product pages, search pages, shopping cart pages, and ongoing enhancements to the homepage and backend. Before major redesigns, we conducted NPS and SUS data monitoring, qualitative and quantitative testing, information architecture organization, and direct user interactions to test our ideas.
I introduced design thinking into the team through a series of training sessions, enabling team members to think holistically and consider users, markets, and design implementation independently.
