Designing Rakuten Pay Online Tumblr Blog

Project Info

Rakuten Pay Online tumblr blog is a blog for the developers who use the online payment service. The blog is the media to inform them about the upcoming maintenance, event or promotion, or informing a new released features.

  • Status : Released
  • Project Member: 1 Project Manager, 1 Designer + Coder (self), 2 back-end developers

Problem

Developing a theme for tumblr is slightly different from developing a normal HTML. Tumblr is built around seven key post types: text, photos, links, quotes, chat, audio, and video, and each of them has slighly different parameters and customization. One of the requirement was to make the appearance not look similar to the tumblr basic style. It script to hide several features of tumblr such as like and reblog.

Last problem: the internal company analytics tool can't be implemented for external site.

Research

Engineering blog is different with lifestyle or other kinds of blog. It does not really emphasize flashy and colorful visual. Prior to the design process, I did some research on our competitors. Do they have an engineering blog? What kind of CMS do they have? What kind of features do they have? I also took notes of our internal blog design.

Comparison Table with Competitors
  1. My research result about engineering blog. Result is categorized into what's needed, what's nice to have, and what's not needed at all

Designing for Stakeholders

First Iteration

The core target of this blog is developers and business-related unit who's going to post the contents through tumblr dashboard. Tumblr is chosen for its simplicity - they already have a predefined post category -

My orginal concept was to create the structure and design style similar with our main site (portal, manual or dashboard) to create a familiarity. Users who visit the blog can relate that the blog is belong to Rakuten Pay Online LITE.

Low Fidelity Mockup
  1. I create several low fidelity mock-up. Then I asked some internal engineers' opinions.
  2. Some of the feedback are: hero image is not really important, remove the subscribe button.

Second Iteration

After gaining enough feedback, I began to crafting the high-fidelity mock-up. At the same time I began to do research about what kind of analytic tools I should use.

High Fidelity Mockup
  1. I'm adding some banner to relate the blog with the service and to add some color to the visual
  2. I add subscribe by email and RSS to keep the reader updates. However, it increase development cost, so it was cancelled.

Final Product

Scripting

I create a script to hide tumblr iFrame. I added another script to retrive all the used tags and retrieve the latest posts.For the analytics tool, I added Google Analytics code as replacement for the internal tool.
I worked extra miles to create the tumblr blog responsive.
At the end, the blog is based on tumblr, but it does not really look like a tumblr blog

Final Product Final Product

Learned Lesson

The blog is live and it's constantly updated. The page speed is good and so the UX score. The site receive a positive feedback from the user when it was launched. Until now, it still gets hundreds of page view and nev visitors every month. Stakeholders can post content and developers can get the information they need without too much hassle.
If I did not have enough time to tweak all post types from tumblr. If possible, I would like to style the other post such as photo and photosets post.