Katherine Tachibana

Versatile & Playful UI Alchemist | ISTP-A

MachiAsobi Tokyo

The idea behind MachiAsobi Tokyo was to build an engaging and impactful brand campaign that promotes tourism on a peculiar side of Tokyo.  This was a solo and the final project at Red Academy.

The main features:

  • Introducing hand-picked places that the users can enjoy where the locals go at reasonable prices.
  • Simple Japanese phrases are included.
  • The users can browse the locations on Google map by simply tapping the coordinates given.
  • Useful travel tips which attract people who plan to go somewhere.
MachiAsobi Logo

Project: Tourism Campaign

Date: 2018

Tools: Hand-drawings, Photoshop, Illustrator, Sketch, Adobe XD, Principle, InVision, and Google Slides

Timeline: 18 days

Research - Find a key

pain_points

I started by researching other tourism campaigns and focused on following key points: 

  • Distribution channels 
  • How they promote
  • How their campaigns advertised
  • What kind of information they provide
  • What kind of content they use
  • Identifying the best website with the best UI and UX

After completing market research, I focused on adapting the best features used by the best website and focused on how I could improve it further and create a competitive advantage through superior UX and unique UI. I also conducted a simple user research to find out pain points.

  1. Tokyo is too big to specify areas to visit especially for the first time visitors. The suggestions can inspire the users where to explore.
  2. There is a language barrier for non-Japanese speakers. It’s quite difficult for them to explore the town without Japanese language knowledge.
  3. The typical idea of Tokyo for tourists is that everything is expensive.

Ideation - Unlock

The user research showed potential users want to know more practical and useful information than just a promotion as a tourism campaign.  I thought that the more useful and fun information provided, the more tourists would be inspired to choose Tokyo, and as a result, the campaign would likely be successful.

I decided to provide some attractive information with the following adjectives:

  • Local
  • Explore
  • Hidey-holes
  • Adventurous

From a UI perspective, I decided to go with “a vending machine” like interface as Japan is full of vending machines and I thought it would be fun.

The colour palette had three primary colours: charcoal grey, red, and sky blue.  

In this phase, I started to figure out about the features to solve the pain points. I wanted to create not only informative, but also attractive, fun, and simple outcome.

Solutions

Design - Cast a spell

Once I was clear on what needed to include, I started creating the campaign logo and style guide. I also created wireframes of low and mid fidelity to validate my ideas.

To be consistent in the brand style, I always referred to the style guide when I designed the high fidelity prototypes for desktop and mobile. 

Social Media and Display Ads/Examples showing the application of the visual brand identity were also a part of the requirements.

Key Deliverables:

  • Two initial art directions, pursing one of them for the final presentation
  • The style guide in terms of: 
    1. Logo Guidelines
    2. Typography
    3. Colours
    4. Imagery/ Photography
  • Social Media and Display Ads (minimum of 4): consistent design and include clear CTAs
  • Examples showing the application of the visual brand identity in the form of something of my choice (minimum of 2)
    1. Flyers
    2. T-shirts
    3. Tenugui — is a high quality woven cotton Japanese hand towel. Typically, it’s about 35 by 90 centimetres in size, and almost always dyed with some pattern.
  • Conceptual key web design pages mocked up for mobile and desktop: a total minimum of 8 screens (4 for mobile, 4 for desktop)
  • 1 logo
  • A 10-minute presentation
  • A design case study 
MachiAsobi T-shirt_Front
MachiAsobi T-shirt_Back

Iteration - Tweak

Tweaks and a challenge to be done:

  • Revise the colour palette and font colours to improve the legibility.
  • Create video prototypes for both desktop and mobile.
  • Develop real websites. 
Scroll Up