A Closer Look At The Interaction Design of Tokyo Marathon Website - Part 1

Dec 30, 2015. | By: Dongmei Hu

Tokyo Marathon is listed as Top 10 World’s Best Marathons, while the event website is not up to the same standard. While I was registering for the 2016 race, I had difficulties in finding information and navigating through the web page. The design was in an old fashion and not interactive enough. So I decided to take a closer look at the website, and explore how to make an improved site that is more effective, more engaging and more interactive.

The User Scenario

Before I dive into the current website, I need to establish a scenario to represents a common user experience. This will guide me through my design process on from evaluating user experience, identifying what are the problems and to implementing solutions.

As one of the World Marathon Majors, the Tokyo Marathon is not only the larget marathon in Japan, but also the most in-demand marathons in the world. Each year, more than 300,000 runners enter the lottery with only about 35,000 entries being awarded. The event website is a platform for foreign runners make applications and gather information about the race. In this case, my target user, John, is going to be a regular runner that is registering online for the race, and he has never been to Japan and does not speak Japanese. He is going to seek information about the race such as date, route, application fee and eligibility. He would like to know how to make the applciation, when and how he could be notified about the lottery result.

If lucky enough to be selected, John is going to look for more information to get prepared for the race. He is going to look for tips and advices on equipments to bring on the race day. He would like to know what is the typical weather in Tokyo during the race period, and how is the food and water supply and emergency response. John would be delighted to find any offer or suggestion provided by the organizer on accommendation and trasportation.

So this user scenario will be used to evaluate the website, and improve the design for better interaction.

Home Page


When John lands on the Home Page, the first thing he will notice would be the big logo on the left upper corner, followed by the header, navigation bar and overall layout. The logo together with the banner at top is quite colorful but not very styllish. As for the logo design, lines with various width are in more than then colors and being positioned in three different directions. But the site name “Tokyo Marathon 2016” is clear and big for John to spot immediately. He is ensured that he has landed on the correct site. I’m going to focus on the interaction design, so I will try to preserve as much the visual design and branding as possible.

The countdown watch is working, and this tells John that the site is alive. However, John could not help himself from reading the numbers and calculating in head when is the race day. Why not the site tells John the exact date and time on the Home Page directly?

On the right upper corner, there are a few icons for social sharing and language selection. The social sharing icons could have been designed in larger size. Giving a more prominant design on the social sharing buttons calls for user’s action and makes it easier for user to click. A common icon is used for the search button, however it introduces an additional click depth even in the large screen. John has to click the search button to expand the input box first, followed by entering keyword. Uncollapsed seach icon without input box was used for small screen like mobile phones to save space via responsive design. It’s unnecessary to apply this design when the screen is big.

Navigation Bar

The design of navigation bar is quite responsive. The background of each tab changes color when John mouse over the navigation bar. In addition, whene John mouses cross the navbar, the sub-menu is immediately open as a navigation drawer. This is responsive, while it could be improved by introducing a time delay in opening the navigation drawer. This minimizes the undesirable display of extra content simply because the mouse has moved close to the active zone.


When the auto rotating image banner loads, John have no idea how many slides there are. An improvement is to add an indicator at the bottom of the carousel, telling user the number of slides and giving users the control to jump to whichever image they want. Plus, auto-pause could be applied when mouse hangs over on the image. These two subtle changes make the design more user friendly when expanding the carousel gallery or displaying intensive message on the image.

To be continued.

Around the web

© 2016 All Rights Reserved.