Rakuten: Paving the way for a buyer-centric shopping experience

日本語まとめ (Summary in Japanese)

Rのオンラインモールは、コアユーザーをマーチャント(お店側)と定義していたため、全体の体験(UX)が『お買い物をするお客さん』中心ではなく、『広告スペースを購入するマーチャント』中心だった。 クリエイティブWebディレクター担当としてプロデューサー達と緊密に協力しながら模範となる多数の案件を進め、他ディレクターのフォーカスを本当のお客さん ーつまり、お買い物客ー にシフトするよう促した。

This slideshow requires JavaScript.

Rakuten’s entire online-mall experience was merchant-centric as they defined their core user group as their merchants who purchase advertisement and listing space, rather than online shoppers.

As a Creative Web Director, I took up the challenge to lead by example and collaborate closely with producers and inspire fellow directors to shift the focus; to engage the real audience — the shoppers.

Leading by example: Airsoft Feature

The initial brief for an Airsoft feature page in Rakuten’s massive online mall, was that it would merely be an unfocused grid of products with no targeted audience. This was the standard of every feature page, which no one questioned.

To challenge this status quo, I collaborated closely with the producer to:

  • bring focus and purpose to the page by defining a narrower audience, the tone of language, content and visual direction;
  • direct user flow, to better reflect buyers’ shopping mindsets and help make purchase decisions;
  • specify the mobile experience to follow closely to that of the desktop experience; and
  • spread design thinking and inspire other directors and producers to place buyers at the centre of design.

Defining the audience

After chatting with members of airsoft clubs, the target audience for the first release of the feature page was chosen to be airsoft beginners.  Typical questions, desires, and concerns of airsoft beginners were researched and transformed into a persona.

Helping shoppers make purchase decisions

To help reduce the dilemma of choice that is apparent in a massive online mall (which returned 4,800 results for airsoft guns alone), a select few recommended products were featured along with their single unique characteristic to help with decision making.  Since airsoft involves holding and running around with equipment for an extended period of time, the weight of the products was highlighted, as well as their price range to help with budgeting.

Prior to this project, clicking on a product on a feature page took users to search results using the product name as the keyword, which meant users would be faced with hundreds of merchant results but no further information on the product.  For the first time, we made sure that clicking on a product takes users to the product description page within Rakuten that also lists all the online shops within Rakuten’s mall that it can be purchased from.

To help airsoft beginners choose accessories to purchase together with the gun, accessories at varying price points were also featured on the page. These were accompanied by explanations of common scenarios they are likely to encounter while playing the sport; ones that are not so obvious for beginners such as investing in goggles which not only provide protection, but also have anti-fogging technology.

Inclusion of mobile users

So far, the main changes to the status quo were:

  • Defining a narrower audience and defining the language that resonates with the target audience;
  • Linking products to the product page rather than search results with no further information;
  • Highlighting unique and physical features to help with decision making;
  • Upselling by communicating the benefits of accessories;
  • Using creative copy on banners to lead users to the page;

Most strategies used for this page were new to Rakuten. The strategy to make the mobile design closely reflect the desktop version was no different. Prior to this project, mobile content consisted of a single list of products on sale regardless of what the desktop counterpart displayed.

In order to enable mobile users to engage in the same way as desktop users, a detailed brief that communicates how each element translates to mobile was created and sent to the front-end developer.  The coding brief also included granular front-end specifications so that future editing of content would not require a designer and coder.  (e.g. avoiding text and buttons as images, separating the background from the foreground, avoiding inline styling.)  This paved way for templating and enabled serialisation of featured and topical pages.

Spreading the trend

In order to not affect the normal operations of the department, this challenge was completed in a normal 2-week campaign page creation cycle that usually only require product item updates.  The process and outcome were featured in director meetings to educate and continue the trend of putting the buyers at the centre of designs.

Different product categories were owned by different producers.  To spread design thinking, I collaborated with many producers owning various categories.  Getting projects featured in producer meetings raised other producers’ expectations about their future projects, and inspired fellow directors to create feature pages that engage customers through the use of strategic content and layouts.

Through close collaboration with immediate team members and leading the broader team by example, the mindset of directors and producers shifted from making pages in order to sell advertisement space, to crafting informative pages that help buyers make purchasing decisions.