Why this project started

Clipbox, mobile app published in Japan since 2011 is popular especially for 10s female and male. However because it is only available in Japan, some user from overseas hadn't get the opportunity to know and download service, even though we were also publishing Clipboxes as the app for overseas. Therefore, we decided creating app's teaser website as the first step to show off with some non-Japanese languages.

This is corresponding to the following 9 languages. Language automatically changes depends on the language on your browser settings.

• English
• Chinese (TC, SC)
• Indonesia
• Thai
• Español
• Português
• German
• Hindi

The Key Challenge

Creating a teaser website to approach potential users outside of Japan.

Workflow

1 - Research About User and Mood for Advertisement

I researched user data with Google Analytics and Firebase. (Google Analytics is for official website, Firebase is for iOS and Android app).

The main user of Clipbox was the late 10s to the early 20s of female and male, however, the main user of Clipboxes was the late 20s to the early 30s, also slightly dominated by males rather than females.

In addition, we had to consider that preferred visual design for the domestic market and international market is totally different - Particularly if we had to target North American/European market, we needed to less and simplify information in the advertisement, compared to the Japanese one.

2. Create Persona

The image of the core user for Clipboxes was a male salaryman. However because we wanted to show off equally for every gender and generation, we created another persona as a person who has a little more neutral character. In this case, we created those two below.

• case a: 32 years old male who is working for a full-time job, he uses Clipboxes for managing youtube video and some document
• case b: 25 years old female who likes to makeup, she uses Clipboxes for watching makeup tutorial and listening to music

3. Create Customer Journey & Wireflaming

Since I started brief wireflame for the website, I iterated brushing up, improve design together with discussing product manager and product owner. Also, I briefly created customer journey map.

4. Create Mockup with Coding

I created the design based on brand guidelines which were already existing since before we started this project. color for the landing page is considering along to Clipbox's branding.

Also, this app was a little difficult to explain the feature with just a word, thanks to flexibility. This app can download, save, organize zip file, MS office file, image file, and also mp3 or mp4. So that I tried applying illustration to image something more easily.

On this website, most of the part is coded by myself as well with using HTML/CSS and jQuery.

Result

After launching website, we did a couple of campaigns in Taiwan and Thailand. Especially, the number for Downloading and Daily Active Users(DAU) is increased by up around 10% in Taiwan compare to before we launched it.

Reflection

I noticed important things that we have different cultures even between Japan and overseas, especially scenes for when and how we use smartphones as an information device. Japanese usually have to commute by getting onto the train. Therefore we have plenty of time to touch screens. However, there are a lot of people who cannot touch smartphones due to driving a car. I guessed unzip file might not be so convenient for those people.

Being aware of and understand the cultural difference for how to get information is very important if considering creating UI which is used internationally.

Staff Credit

Front-end development, UI/UX design, Project management: Kaai Suzuki
Full-stack development: Shingo Imota
Creative Director, Marketing Specialist: Yoshitaka Sonobe
Consulting for design: Keiichi Hibari