top of page
MEIRO TOKYO LOGO.png

Project Overview

Meiro Tokyo is a web prototype that provides photography tours in Tokyo, Japan. The project was based on my personal interest which led to conducting creative research and creating a landing page.

 

Meiro means ‘maze’ in Japanese. Being a maze of a city, the name was fitting in that there are discoveries to be made and new opportunities around every corner.

I was inspired to create this project from a recent trip to Japan last year. As a photography hobbyist, I documented my trip by taking over four thousand photos on my Ricoh GR camera.

Personal Project

Project Length

10 Days

My Role

UI/UX Design, Logo Design, Market Research, Illustrations

Software

Photoshop, Sketch

Outcome

Through creative research, I designed a simple, fun, and visually pleasing landing page that would allow users to easily book photography tours. To stand out from competitors, I combined illustrations, bold lines, and bright colors with photos from my travels.  

A unique feature on the home page is the toggle switch that changes between day and night modes. It allows visitors to view day tours and night tours which adds an immersive experience when booking or viewing the tours. 

Design Process

Research

Domain Research

Competitive Analysis

Inspiration Gathering

Site Audit

Development

Mood Board

Style Tile

Typography

Color Palette

Design

Hi-Fi Skinning

Illustration

Logo

Iconography

Research

I started by looking at general tourism and photography tour websites that are currently out there. Although very informative, I noticed that many of these sites fell into three categories. They were either too image-heavy, text-heavy, or overwhelming with rows of information.

Screen Shot 2019-09-06 at 2.06.13 PM.png
Screen Shot 2020-03-24 at 12.51.45 AM.pn
Screen Shot 2019-09-06 at 2.08.28 PM.png
Screen Shot 2019-09-06 at 2.09.38 PM.png
Inspiration.png

Inspirations

I was drawn to sites that used cards to present their content such as Airbnb and Eyexplore, as they neatly categorize their tours and activities while being visually pleasing.

Site Audit

Next, I conducted a site audit of Eyexplore, a website that offers photography tours in Japan and London. Simplifying their content helped me understand how their pages were structured. The blue tabs represent six key pages. Using visual blocks allowed me to expand upon each tab, highlighting the main features of each section. The yellow tabs contain actions while the orange and green tabs display information. 

Eyexplore Home Page

Screen Shot 2020-03-24 at 5.09.15 AM.png

Site Audit

Eyexplore.jpg

Mood Boards

After studying existing websites, I created mood boards to develop design directions. The first mood board is for daytime tours that shows Japan's streets and neighborhoods in urban and traditional settings. The images consist of open skies with sunlight to offer dynamic, yet tranquil walking tours in unique local areas.

The second mood board is for evening tours. It captures Tokyo’s classic night scenes with the bright lights, neon signs, and billboard ads. I wanted to show that the same place can be two different places in Tokyo. It is a dynamic city for everyone to explore, experiment, and develop their photographic interests.

Mood Board 1 (Day)

Mood Board 2 (Night)

MB Day.png
MB Night.png

Style Tile

The style tile was inspired by the first mood board, for day time tours. I chose Righteous in all caps as the main typeface for its bubbly nature and paired it Open Sans for its simplicity. The images on the right influenced the main illustration, in both style and story telling. The typefaces, colors, and buttons work together to convey a fun and inviting message to visitors. 

 

Style Tile.png

Logo Design

The logo was inspired by a camera being held at a diagonal angle. It represents being ready at any moment while exploring the city. For the name, Tokyo Maze came to mind at first but after translating from 'maze' to 'meiro,' it became catchier and more memorable. It also allowed me to join the words with the colored letter 'O'.

Logo Process.png

Illustration

The illustration represents stored memories within the camera, packed with fun scenes from Tokyo! Some major areas I wanted to highlight were the streets of Asakusa, the Yamanote Line, and side streets filled food stalls and vending machines surrounded by modern and traditional buildings. 

The illustration also sets the tone for a fun user experience. It engages visitors to expect exciting tours presented in a similar style where a lot of the content is boldly outlined combined with bright colors. 

Meiro Tokyo Banner.jpg
Screen Shot 2020-03-24 at 7.13.40 PM.png

Landing Page Concept

Lastly, here are the landing pages in day and night modes! The day/night toggle switch flips the cards from day tours to night tours and vice versa. Using photos are essential especially for tourism and photography websites; however, I sought to portray Japan’s culture by combining stylized illustrations and bright colors with scenic photos. 

Home Page Day Tour.png
Home Page Night Tour.png
Home Page Day Tour.png

Up close, the contents are arranged in separate chunks for easy readability. ​Each part tells something unique about the tours or the city itself. The mini galleries reduce clutter and encourage interactions with its pagination layout. Lastly, the Featured Photo Tours showcase the most popular tours with four displayed at a time.

Home Page Night Tour.png
Home Page Day Tour.png
Home Page Night Tour.png

Conclusion

Creating​ an attractive photography tour website concept for one of my favorite cities was truly an exciting project.

 

Along with street photography, I was inspired by the vivid display of billboard ads, signage, bright lights, and graphic design during my daily commutes around Tokyo. I tried capturing two different moods that showed a variety of tours, just as the city changed from a tranquil environment in the morning to a bustling city at night.

Looking at numerous photography tour websites taught me about content presentation and how I could simplify and present information in a consistent style. Some challenges were creating a balance between text usage for services and tours with images and graphics.

For future considerations, designing the complete user flow would be a great challenge to build a functional prototype.

Animations, hover states of buttons, and custom icons would also bring this concept to life.

bottom of page